From 7a6a9741efb4eb839f55641bf04c5b1b5a36c0ef Mon Sep 17 00:00:00 2001
From: Marc-Antoine Parent <maparent@acm.org>
Date: Wed, 5 Nov 2025 14:24:47 -0500
Subject: [PATCH 1/6] EG-1014: reified relation triple button

---
 .../src/components/settings/AdminPanel.tsx    | 132 +++++++++++++-----
 .../roam/src/components/settings/Settings.tsx |   3 +-
 2 files changed, 97 insertions(+), 38 deletions(-)

diff --git a/apps/roam/src/components/settings/AdminPanel.tsx b/apps/roam/src/components/settings/AdminPanel.tsx
index 924b37806..16d657482 100644
--- a/apps/roam/src/components/settings/AdminPanel.tsx
+++ b/apps/roam/src/components/settings/AdminPanel.tsx
@@ -1,5 +1,17 @@
 import React, { useState, useEffect } from "react";
-import { HTMLTable, Button, MenuItem, Spinner, Label } from "@blueprintjs/core";
+import {
+  Button,
+  Checkbox,
+  HTMLTable,
+  Label,
+  MenuItem,
+  Spinner,
+  Tab,
+  TabId,
+  Tabs,
+} from "@blueprintjs/core";
+import { OnloadArgs } from "roamjs-components/types";
+import Description from "roamjs-components/components/Description";
 import { Select } from "@blueprintjs/select";
 import {
   getSupabaseContext,
@@ -91,7 +103,8 @@ const NodeTable = ({ nodes }: { nodes: PConceptFull[] }) => {
   );
 };
 
-const AdminPanel = () => {
+const AdminPanel = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
+  const extensionAPI = onloadArgs.extensionAPI;
   const [context, setContext] = useState<SupabaseContext | null>(null);
   const [supabase, setSupabase] = useState<DGSupabaseClient | null>(null);
   const [schemas, setSchemas] = useState<NodeSignature[]>([]);
@@ -101,6 +114,7 @@ const AdminPanel = () => {
   const [loading, setLoading] = useState(true);
   const [loadingNodes, setLoadingNodes] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [selectedTabId, setSelectedTabId] = useState<TabId>("node-list");
 
   useEffect(() => {
     let ignore = false;
@@ -196,41 +210,87 @@ const AdminPanel = () => {
   }
 
   return (
-    <>
-      <p>
-        Context:{" "}
-        <code>{JSON.stringify({ ...context, spacePassword: "****" })}</code>
-      </p>
-      {schemas.length > 0 ? (
-        <>
-          <Label>
-            Display:
-            <div className="mx-2 inline-block">
-              <Select
-                items={schemas}
-                onItemSelect={(choice) => {
-                  setShowingSchema(choice);
-                }}
-                itemRenderer={(node, { handleClick, modifiers }) => (
-                  <MenuItem
-                    active={modifiers.active}
-                    key={node.sourceLocalId}
-                    label={node.name}
-                    onClick={handleClick}
-                    text={node.name}
+    <Tabs
+      onChange={(id) => setSelectedTabId(id)}
+      selectedTabId={selectedTabId}
+      renderActiveTabPanelOnly={true}
+    >
+      <Tab
+        id="node-list"
+        title="Node list"
+        panel={
+          <>
+            <p>
+              Context:{" "}
+              <code>
+                {JSON.stringify({ ...context, spacePassword: "****" })}
+              </code>
+            </p>
+            {schemas.length > 0 ? (
+              <>
+                <Label>
+                  Display:
+                  <div className="mx-2 inline-block">
+                    <Select
+                      items={schemas}
+                      onItemSelect={(choice) => {
+                        setShowingSchema(choice);
+                      }}
+                      itemRenderer={(node, { handleClick, modifiers }) => (
+                        <MenuItem
+                          active={modifiers.active}
+                          key={node.sourceLocalId}
+                          label={node.name}
+                          onClick={handleClick}
+                          text={node.name}
+                        />
+                      )}
+                    >
+                      <Button text={showingSchema.name} />
+                    </Select>
+                  </div>
+                </Label>
+                <div>
+                  {loadingNodes ? <Spinner /> : <NodeTable nodes={nodes} />}
+                </div>
+              </>
+            ) : (
+              <p>No node schemas found</p>
+            )}
+          </>
+        }
+      />
+      <Tab
+        id="experiments"
+        title="Experiments"
+        panel={
+          <div className="flex flex-col gap-4 p-1">
+            <Checkbox
+              defaultChecked={
+                extensionAPI.settings.get("use-reified-relations") as boolean
+              }
+              onChange={(e) => {
+                const target = e.target as HTMLInputElement;
+                extensionAPI.settings.set(
+                  "use-reified-relations",
+                  target.checked,
+                );
+              }}
+              labelElement={
+                <>
+                  Reified Relation Triples
+                  <Description
+                    description={
+                      "When ON, relations are read/written as sourceUid:relationBlockUid:destinationUid in [[roam/js/discourse-graph/relations]]."
+                    }
                   />
-                )}
-              >
-                <Button text={showingSchema.name} />
-              </Select>
-            </div>
-          </Label>
-          <div>{loadingNodes ? <Spinner /> : <NodeTable nodes={nodes} />}</div>
-        </>
-      ) : (
-        <p>No node schemas found</p>
-      )}
-    </>
+                </>
+              }
+            />
+          </div>
+        }
+      />
+    </Tabs>
   );
 };
 
diff --git a/apps/roam/src/components/settings/Settings.tsx b/apps/roam/src/components/settings/Settings.tsx
index 08c31aff5..58c619ed0 100644
--- a/apps/roam/src/components/settings/Settings.tsx
+++ b/apps/roam/src/components/settings/Settings.tsx
@@ -78,7 +78,6 @@ export const SettingsDialog = ({
     selectedTabId ?? "discourse-graph-home-personal",
   );
 
-
   useEffect(() => {
     const handleKeyPress = (e: KeyboardEvent) => {
       if (e.ctrlKey && e.shiftKey && e.key === "A") {
@@ -230,7 +229,7 @@ export const SettingsDialog = ({
             id="secret-admin-panel"
             title="Secret Admin Panel"
             className="overflow-y-auto"
-            panel={<AdminPanel />}
+            panel={<AdminPanel onloadArgs={onloadArgs} />}
           />
         </Tabs>
       </div>

From d18a2b19b1ff9b5d15148136c49c282e4ef87f8a Mon Sep 17 00:00:00 2001
From: Marc-Antoine Parent <maparent@acm.org>
Date: Mon, 10 Nov 2025 10:13:53 -0500
Subject: [PATCH 2/6] renamed the panels

---
 .../src/components/settings/AdminPanel.tsx    | 62 +++++++++----------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/apps/roam/src/components/settings/AdminPanel.tsx b/apps/roam/src/components/settings/AdminPanel.tsx
index 16d657482..927fff39c 100644
--- a/apps/roam/src/components/settings/AdminPanel.tsx
+++ b/apps/roam/src/components/settings/AdminPanel.tsx
@@ -114,7 +114,7 @@ const AdminPanel = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
   const [loading, setLoading] = useState(true);
   const [loadingNodes, setLoadingNodes] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [selectedTabId, setSelectedTabId] = useState<TabId>("node-list");
+  const [selectedTabId, setSelectedTabId] = useState<TabId>("admin");
 
   useEffect(() => {
     let ignore = false;
@@ -215,6 +215,36 @@ const AdminPanel = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
       selectedTabId={selectedTabId}
       renderActiveTabPanelOnly={true}
     >
+      <Tab
+        id="admin"
+        title="Admin"
+        panel={
+          <div className="flex flex-col gap-4 p-1">
+            <Checkbox
+              defaultChecked={
+                extensionAPI.settings.get("use-reified-relations") as boolean
+              }
+              onChange={(e) => {
+                const target = e.target as HTMLInputElement;
+                void extensionAPI.settings.set(
+                  "use-reified-relations",
+                  target.checked,
+                );
+              }}
+              labelElement={
+                <>
+                  Reified Relation Triples
+                  <Description
+                    description={
+                      "When ON, relations are read/written as sourceUid:relationBlockUid:destinationUid in [[roam/js/discourse-graph/relations]]."
+                    }
+                  />
+                </>
+              }
+            />
+          </div>
+        }
+      />
       <Tab
         id="node-list"
         title="Node list"
@@ -260,36 +290,6 @@ const AdminPanel = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
           </>
         }
       />
-      <Tab
-        id="experiments"
-        title="Experiments"
-        panel={
-          <div className="flex flex-col gap-4 p-1">
-            <Checkbox
-              defaultChecked={
-                extensionAPI.settings.get("use-reified-relations") as boolean
-              }
-              onChange={(e) => {
-                const target = e.target as HTMLInputElement;
-                extensionAPI.settings.set(
-                  "use-reified-relations",
-                  target.checked,
-                );
-              }}
-              labelElement={
-                <>
-                  Reified Relation Triples
-                  <Description
-                    description={
-                      "When ON, relations are read/written as sourceUid:relationBlockUid:destinationUid in [[roam/js/discourse-graph/relations]]."
-                    }
-                  />
-                </>
-              }
-            />
-          </div>
-        }
-      />
     </Tabs>
   );
 };

From 7673ea6b7253e11bb2923969f1ec1cd1b8e7a702 Mon Sep 17 00:00:00 2001
From: Marc-Antoine Parent <maparent@acm.org>
Date: Mon, 10 Nov 2025 10:23:13 -0500
Subject: [PATCH 3/6] update button description

---
 apps/roam/src/components/settings/AdminPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/roam/src/components/settings/AdminPanel.tsx b/apps/roam/src/components/settings/AdminPanel.tsx
index 927fff39c..6a6ca4b08 100644
--- a/apps/roam/src/components/settings/AdminPanel.tsx
+++ b/apps/roam/src/components/settings/AdminPanel.tsx
@@ -236,7 +236,7 @@ const AdminPanel = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
                   Reified Relation Triples
                   <Description
                     description={
-                      "When ON, relations are read/written as sourceUid:relationBlockUid:destinationUid in [[roam/js/discourse-graph/relations]]."
+                      "When ON, relations are read/written as reifiedRelationUid in [[roam/js/discourse-graph/relations]]."
                     }
                   />
                 </>

From ab72758ff60375204dfc8fceb49c45ddd1a5307f Mon Sep 17 00:00:00 2001
From: Marc-Antoine Parent <maparent@acm.org>
Date: Mon, 10 Nov 2025 12:24:34 -0500
Subject: [PATCH 4/6] coderabbit comment: add return type

---
 apps/roam/src/components/settings/AdminPanel.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/roam/src/components/settings/AdminPanel.tsx b/apps/roam/src/components/settings/AdminPanel.tsx
index 6a6ca4b08..8aefadb4e 100644
--- a/apps/roam/src/components/settings/AdminPanel.tsx
+++ b/apps/roam/src/components/settings/AdminPanel.tsx
@@ -103,7 +103,11 @@ const NodeTable = ({ nodes }: { nodes: PConceptFull[] }) => {
   );
 };
 
-const AdminPanel = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
+const AdminPanel = ({
+  onloadArgs,
+}: {
+  onloadArgs: OnloadArgs;
+}): React.ReactElement => {
   const extensionAPI = onloadArgs.extensionAPI;
   const [context, setContext] = useState<SupabaseContext | null>(null);
   const [supabase, setSupabase] = useState<DGSupabaseClient | null>(null);

From 21d5b8064d055c7516d89ac31aec1fa6867911c7 Mon Sep 17 00:00:00 2001
From: Marc-Antoine Parent <maparent@acm.org>
Date: Mon, 10 Nov 2025 12:33:38 -0500
Subject: [PATCH 5/6] use State

---
 apps/roam/src/components/settings/AdminPanel.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/roam/src/components/settings/AdminPanel.tsx b/apps/roam/src/components/settings/AdminPanel.tsx
index 8aefadb4e..883e8990a 100644
--- a/apps/roam/src/components/settings/AdminPanel.tsx
+++ b/apps/roam/src/components/settings/AdminPanel.tsx
@@ -13,6 +13,7 @@ import {
 import { OnloadArgs } from "roamjs-components/types";
 import Description from "roamjs-components/components/Description";
 import { Select } from "@blueprintjs/select";
+import { getSetting, setSetting } from "~/utils/extensionSettings";
 import {
   getSupabaseContext,
   getLoggedInClient,
@@ -119,6 +120,9 @@ const AdminPanel = ({
   const [loadingNodes, setLoadingNodes] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [selectedTabId, setSelectedTabId] = useState<TabId>("admin");
+  const [useReifiedRelations, setUseReifiedRelations] = useState<boolean>(
+    getSetting("use-reified-relations"),
+  );
 
   useEffect(() => {
     let ignore = false;
@@ -225,15 +229,11 @@ const AdminPanel = ({
         panel={
           <div className="flex flex-col gap-4 p-1">
             <Checkbox
-              defaultChecked={
-                extensionAPI.settings.get("use-reified-relations") as boolean
-              }
+              defaultChecked={useReifiedRelations}
               onChange={(e) => {
                 const target = e.target as HTMLInputElement;
-                void extensionAPI.settings.set(
-                  "use-reified-relations",
-                  target.checked,
-                );
+                setUseReifiedRelations(target.checked);
+                setSetting("use-reified-relations", target.checked);
               }}
               labelElement={
                 <>

From a44cd75f562c5d981effd776e4aaa5f9f5d068b8 Mon Sep 17 00:00:00 2001
From: Marc-Antoine Parent <maparent@acm.org>
Date: Sun, 16 Nov 2025 11:23:36 -0500
Subject: [PATCH 6/6] drop onLoadArgs

---
 apps/roam/src/components/settings/AdminPanel.tsx | 8 +-------
 apps/roam/src/components/settings/Settings.tsx   | 2 +-
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/apps/roam/src/components/settings/AdminPanel.tsx b/apps/roam/src/components/settings/AdminPanel.tsx
index 883e8990a..201c35f6e 100644
--- a/apps/roam/src/components/settings/AdminPanel.tsx
+++ b/apps/roam/src/components/settings/AdminPanel.tsx
@@ -10,7 +10,6 @@ import {
   TabId,
   Tabs,
 } from "@blueprintjs/core";
-import { OnloadArgs } from "roamjs-components/types";
 import Description from "roamjs-components/components/Description";
 import { Select } from "@blueprintjs/select";
 import { getSetting, setSetting } from "~/utils/extensionSettings";
@@ -104,12 +103,7 @@ const NodeTable = ({ nodes }: { nodes: PConceptFull[] }) => {
   );
 };
 
-const AdminPanel = ({
-  onloadArgs,
-}: {
-  onloadArgs: OnloadArgs;
-}): React.ReactElement => {
-  const extensionAPI = onloadArgs.extensionAPI;
+const AdminPanel = (): React.ReactElement => {
   const [context, setContext] = useState<SupabaseContext | null>(null);
   const [supabase, setSupabase] = useState<DGSupabaseClient | null>(null);
   const [schemas, setSchemas] = useState<NodeSignature[]>([]);
diff --git a/apps/roam/src/components/settings/Settings.tsx b/apps/roam/src/components/settings/Settings.tsx
index 58c619ed0..a46101685 100644
--- a/apps/roam/src/components/settings/Settings.tsx
+++ b/apps/roam/src/components/settings/Settings.tsx
@@ -229,7 +229,7 @@ export const SettingsDialog = ({
             id="secret-admin-panel"
             title="Secret Admin Panel"
             className="overflow-y-auto"
-            panel={<AdminPanel onloadArgs={onloadArgs} />}
+            panel={<AdminPanel />}
           />
         </Tabs>
       </div>