jazz-tools 0.19.10 → 0.19.12

package/src/inspector/account-switcher.tsx

@@ -0,0 +1,440 @@
+import type { AgentSecret, RawAccountID } from "cojson";
+import React, { useCallback, useEffect, useState } from "react";
+import { styled } from "goober";
+import { useNode } from "./contexts/node";
+import { Button, Icon, Input, Modal } from "./ui";
+import { AccountOrGroupText } from "./viewer/account-or-group-text";
+
+interface Account {
+  id: RawAccountID;
+  secret: AgentSecret;
+  syncServer?: string;
+}
+
+interface JazzLoggedInSecret {
+  accountID: string;
+  accountSecret: string;
+  secretSeed?: number[];
+  provider?: string;
+}
+
+export function AccountSwitcher({
+  defaultSyncServer,
+}: {
+  defaultSyncServer?: string;
+}) {
+  const {
+    accountID: currentAccountId,
+    localNode,
+    createLocalNode,
+    reset,
+  } = useNode();
+  const [accounts, setAccounts] = useState<Account[]>(() => {
+    const storedAccounts = localStorage.getItem("inspectorAccounts");
+    return storedAccounts ? JSON.parse(storedAccounts) : [];
+  });
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedAccountId, setSelectedAccountId] =
+    useState<RawAccountID | null>(() => {
+      const lastSelectedAccountId = localStorage.getItem(
+        "lastSelectedAccountId",
+      );
+      return lastSelectedAccountId
+        ? (lastSelectedAccountId as RawAccountID)
+        : currentAccountId;
+    });
+  const [newAccountId, setNewAccountId] = useState("");
+  const [newAccountSecret, setNewAccountSecret] = useState("");
+  const [newAccountSyncServer, setNewAccountSyncServer] = useState(
+    "wss://cloud.jazz.tools",
+  );
+  const [addAccountError, setAddAccountError] = useState<string | null>(null);
+
+  const addAccount = (
+    id: RawAccountID,
+    secret: AgentSecret,
+    syncServer: string,
+  ) => {
+    const newAccount: Account = {
+      id,
+      secret,
+      syncServer,
+    };
+    const accountExists = accounts.some((account) => account.id === id);
+    if (!accountExists) {
+      const updatedAccounts = [...accounts, newAccount];
+      setAccounts(updatedAccounts);
+      localStorage.setItem(
+        "inspectorAccounts",
+        JSON.stringify(updatedAccounts),
+      );
+      setSelectedAccountId(id);
+    } else {
+      setSelectedAccountId(id);
+    }
+
+    setNewAccountId("");
+    setNewAccountSecret("");
+    setNewAccountSyncServer(syncServer);
+    setAddAccountError(null);
+  };
+
+  const deleteAccount = (accountId: RawAccountID) => {
+    const updatedAccounts = accounts.filter(
+      (account) => account.id !== accountId,
+    );
+    setAccounts(updatedAccounts);
+    localStorage.setItem("inspectorAccounts", JSON.stringify(updatedAccounts));
+    if (updatedAccounts.length > 0) {
+      setCurrentAccount(updatedAccounts[0]!.id);
+    } else {
+      setSelectedAccountId(null);
+      localStorage.removeItem("lastSelectedAccountId");
+      reset();
+    }
+  };
+
+  const deleteCurrentAccount = () => {
+    if (currentAccountId) {
+      deleteAccount(currentAccountId);
+    }
+  };
+
+  const setCurrentAccount = useCallback(
+    async (accountId: RawAccountID | null) => {
+      if (accountId === null) {
+        localStorage.removeItem("lastSelectedAccountId");
+        reset();
+        setSelectedAccountId(null);
+
+        return;
+      }
+
+      const account = accounts.find((a) => a.id === accountId);
+      if (!account) {
+        throw new Error(`Account ${accountId} not found in accounts list`);
+      }
+      const syncServer =
+        account.syncServer || defaultSyncServer || "wss://cloud.jazz.tools";
+
+      await createLocalNode(accountId, account.secret, syncServer);
+
+      setSelectedAccountId(accountId);
+      localStorage.setItem("lastSelectedAccountId", accountId);
+    },
+    [createLocalNode, accounts, defaultSyncServer],
+  );
+
+  const handleModalCancel = () => {
+    setSelectedAccountId(currentAccountId);
+    setNewAccountId("");
+    setNewAccountSecret("");
+    setNewAccountSyncServer("wss://cloud.jazz.tools/");
+    setAddAccountError(null);
+    setIsModalOpen(false);
+  };
+
+  const handleNewAccountIdChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ): void => {
+    const value = e.target.value;
+    setNewAccountId(value);
+
+    if (value.trim().startsWith("{") && value.trim().endsWith("}")) {
+      try {
+        const parsed: JazzLoggedInSecret = JSON.parse(value);
+        if (parsed.accountID && parsed.accountSecret) {
+          setNewAccountId(parsed.accountID);
+          setNewAccountSecret(parsed.accountSecret);
+        }
+      } catch (error) {
+        console.log("Failed to parse JSON:", error);
+      }
+    }
+  };
+
+  const handleAddAccountSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newAccountId || !newAccountSecret) {
+      setAddAccountError("Account ID and secret are required");
+      return;
+    }
+    try {
+      // first: try to use the credentials
+      // if successful, add the account to the list
+      addAccount(
+        newAccountId as RawAccountID,
+        newAccountSecret as AgentSecret,
+        newAccountSyncServer,
+      );
+
+      // await setCurrentAccount(newAccountId as RawAccountID);
+      setSelectedAccountId(newAccountId as RawAccountID);
+
+      setIsModalOpen(false);
+    } catch (error) {
+      setAddAccountError(
+        error instanceof Error ? error.message : "Failed to add account",
+      );
+      deleteAccount(newAccountId as RawAccountID);
+    }
+  };
+
+  useEffect(() => {
+    if (selectedAccountId) {
+      setCurrentAccount(selectedAccountId);
+    }
+  }, [selectedAccountId]);
+
+  return (
+    <>
+      <AccountSwitcherContainer>
+        <Button
+          variant="secondary"
+          onClick={() => {
+            setSelectedAccountId(currentAccountId);
+            setIsModalOpen(true);
+          }}
+          className="max-w-96"
+        >
+          {currentAccountId ? (
+            localNode ? (
+              <AccountOrGroupText
+                coId={currentAccountId}
+                showId
+                node={localNode}
+              />
+            ) : (
+              currentAccountId
+            )
+          ) : (
+            "Select account"
+          )}
+        </Button>
+        {currentAccountId && (
+          <Button
+            variant="secondary"
+            onClick={deleteCurrentAccount}
+            className="rounded-md p-2 ml-1"
+            aria-label="Remove account"
+          >
+            <Icon name="delete" className="text-gray-500" />
+          </Button>
+        )}
+      </AccountSwitcherContainer>
+
+      <Modal
+        isOpen={isModalOpen}
+        onClose={handleModalCancel}
+        heading="Select Account"
+        showButtons={false}
+        wide={true}
+      >
+        <ModalContentGrid>
+          <div>
+            <AccountSelectionFieldset>
+              <legend>Accounts</legend>
+              {accounts.length === 0 ? (
+                <p style={{ color: "var(--j-text-color)", margin: "0.5rem 0" }}>
+                  No accounts available. Add one below.
+                </p>
+              ) : (
+                accounts.map((account) => (
+                  <RadioOption key={account.id}>
+                    <input
+                      type="radio"
+                      id={`account-${account.id}`}
+                      name="account-selection"
+                      value={account.id}
+                      checked={selectedAccountId === account.id}
+                      onChange={(e) =>
+                        setSelectedAccountId(e.target.value as RawAccountID)
+                      }
+                    />
+                    <label htmlFor={`account-${account.id}`}>
+                      <AccountLabelContent>
+                        {localNode ? (
+                          <AccountOrGroupText
+                            coId={account.id}
+                            showId
+                            node={localNode}
+                          />
+                        ) : (
+                          account.id
+                        )}
+                        <SyncServerText>
+                          {account.syncServer ?? "cloud.jazz.tools"}
+                        </SyncServerText>
+                      </AccountLabelContent>
+                    </label>
+                  </RadioOption>
+                ))
+              )}
+            </AccountSelectionFieldset>
+          </div>
+
+          <ModalAddAccountForm onSubmit={handleAddAccountSubmit}>
+            <FormHeading>Add an account to inspect</FormHeading>
+            <FormDescription>
+              Use the <CodeInline>jazz-logged-in-secret</CodeInline> local
+              storage key from within your Jazz app for your account
+              credentials. You can paste the full JSON object or enter the ID
+              and secret separately.
+            </FormDescription>
+            {addAccountError && <ErrorText>{addAccountError}</ErrorText>}
+            <Input
+              label="Account ID"
+              value={newAccountId}
+              required
+              placeholder="co_z1234567890abcdef123456789 or paste full JSON"
+              onChange={handleNewAccountIdChange}
+            />
+            <Input
+              label="Account secret"
+              type="password"
+              required
+              value={newAccountSecret}
+              onChange={(e) => setNewAccountSecret(e.target.value)}
+              placeholder="sealerSecret_ziz7NA12340abcdef123789..."
+            />
+            <Input
+              label="Sync server"
+              required
+              value={newAccountSyncServer}
+              onChange={(e) => setNewAccountSyncServer(e.target.value)}
+              placeholder="wss://cloud.jazz.tools/"
+            />
+            <Button className="mt-3" type="submit">
+              Add account
+            </Button>
+          </ModalAddAccountForm>
+        </ModalContentGrid>
+      </Modal>
+    </>
+  );
+}
+
+const AccountSwitcherContainer = styled("div")`
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  gap: 0.25rem;
+`;
+
+const ModalContentGrid = styled("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  @media (min-width: 768px) {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+  }
+`;
+
+const AccountSelectionFieldset = styled("fieldset")`
+  border: 1px solid var(--j-border-color);
+  border-radius: var(--j-radius-md);
+  padding: 1rem;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+
+  legend {
+    padding: 0 0.5rem;
+    font-weight: 500;
+    color: var(--j-text-color);
+  }
+`;
+
+const ConfirmButtonContainer = styled("div")`
+  margin-top: 0.5rem;
+  display: flex;
+  justify-content: flex-end;
+`;
+
+const RadioOption = styled("div")`
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+
+  input[type="radio"] {
+    margin: 0;
+    cursor: pointer;
+    margin-top: 0.25rem;
+  }
+
+  label {
+    cursor: pointer;
+    color: var(--j-text-color);
+    flex: 1;
+  }
+`;
+
+const AccountLabelContent = styled("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+`;
+
+const SyncServerText = styled("span")`
+  font-style: italic;
+  font-size: 0.875rem;
+  color: var(--j-text-color);
+  opacity: 0.7;
+`;
+
+const ModalAddAccountForm = styled("form")`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  @media (max-width: 767px) {
+    padding-top: 1rem;
+    border-top: 1px solid var(--j-border-color);
+  }
+`;
+
+const ErrorText = styled("p")`
+  color: #b91c1c;
+  font-size: 0.875rem;
+  margin: 0;
+  padding: 0.5rem;
+  background-color: #fee2e2;
+  border-radius: var(--j-radius-sm);
+  border: 1px solid #f87171;
+
+  @media (prefers-color-scheme: dark) {
+    color: #fca5a5;
+    background-color: #7f1d1d;
+    border-color: #991b1b;
+  }
+`;
+
+const FormHeading = styled("h2")`
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: #111827;
+
+  @media (prefers-color-scheme: dark) {
+    color: #fff;
+  }
+`;
+
+const FormDescription = styled("p")`
+  margin-bottom: 1.25rem;
+  font-size: 0.875rem;
+  color: var(--j-text-color);
+`;
+
+const CodeInline = styled("code")`
+  white-space: nowrap;
+  color: #0c0a09;
+  font-weight: 600;
+
+  @media (prefers-color-scheme: dark) {
+    color: #fff;
+  }
+`;

package/src/inspector/contexts/node.tsx

@@ -0,0 +1,129 @@
+import {
+  createContext,
+  type PropsWithChildren,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { CoID, LocalNode, RawAccount } from "cojson";
+import { WasmCrypto } from "cojson/crypto/WasmCrypto";
+import type { PureJSCrypto } from "cojson/dist/crypto/PureJSCrypto";
+import { createWebSocketPeer } from "cojson-transport-ws";
+
+type NodeContextType = {
+  accountID: CoID<RawAccount> | null;
+  localNode: LocalNode | null;
+  server: string;
+  createLocalNode: (
+    accountID: CoID<RawAccount>,
+    clientSecret: string,
+    server: string,
+  ) => Promise<void>;
+  reset: () => void;
+};
+
+export const NodeContext = createContext<NodeContextType>({
+  accountID: null,
+  localNode: null,
+  server: "wss://cloud.jazz.tools/",
+  createLocalNode: async () => {
+    throw new Error("createLocalNode not implemented");
+  },
+  reset: () => {
+    throw new Error("reset not implemented");
+  },
+});
+
+type NodeProviderProps = PropsWithChildren<{
+  localNode?: LocalNode | null;
+  accountID?: CoID<RawAccount> | null;
+  server?: string;
+}>;
+
+let crypto: WasmCrypto | PureJSCrypto | null = null;
+
+async function getCrypto() {
+  if (crypto) return crypto;
+  crypto = await WasmCrypto.create();
+  return crypto;
+}
+
+export function NodeProvider(props: NodeProviderProps) {
+  const [accountID, setAccountID] = useState<CoID<RawAccount> | null>(
+    props?.accountID ?? null,
+  );
+  const [localNode, setLocalNode] = useState<LocalNode | null>(
+    props?.localNode ?? null,
+  );
+  const [server, setServer] = useState<string>(
+    props?.server ?? "wss://cloud.jazz.tools/",
+  );
+
+  useEffect(() => {
+    if (props.localNode !== undefined) setLocalNode(props.localNode);
+
+    if (props.accountID !== undefined) setAccountID(props.accountID);
+
+    if (props.server !== undefined) setServer(props.server);
+  }, [props.localNode, props.accountID, props.server]);
+
+  async function createLocalNode(
+    accountID: CoID<RawAccount>,
+    clientSecret: string,
+    server: string,
+  ) {
+    if (localNode) {
+      localNode.gracefulShutdown();
+    }
+
+    setLocalNode(null);
+
+    const wsPeer = createWebSocketPeer({
+      id: "cloud",
+      websocket: new WebSocket(server),
+      role: "server",
+    });
+
+    const crypto = await getCrypto();
+
+    const node = await LocalNode.withLoadedAccount({
+      accountID: accountID,
+      accountSecret: clientSecret as any,
+      sessionID: crypto.newRandomSessionID(accountID),
+      peers: [wsPeer],
+      crypto,
+      migration: async () => {
+        console.log("Not running any migration in inspector");
+      },
+    });
+
+    setLocalNode(node);
+    setAccountID(accountID);
+    setServer(server);
+  }
+
+  function reset() {
+    if (localNode) {
+      localNode.gracefulShutdown();
+    }
+    setLocalNode(null);
+    setAccountID(null);
+    setServer("wss://cloud.jazz.tools/");
+  }
+
+  return (
+    <NodeContext.Provider
+      value={{ accountID, localNode, server, createLocalNode, reset }}
+    >
+      {props.children}
+    </NodeContext.Provider>
+  );
+}
+
+export function useNode() {
+  const context = useContext(NodeContext);
+  if (!context) {
+    throw new Error("useNode must be used within a NodeProvider");
+  }
+  return context;
+}

package/src/inspector/custom-element.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { setup } from "goober";
 import { Account } from "jazz-tools";
 import { createRoot } from "react-dom/client";
-import { JazzInspectorInternal } from "./viewer/new-app.js";
+import { InspectorInApp } from "./in-app.js";
 
 setup(React.createElement);
 
@@ -56,7 +56,7 @@ export class JazzInspectorElement extends HTMLElement {
     }
 
     this.root?.render(
-      <JazzInspectorInternal
+      <InspectorInApp
         localNode={this.account.$jazz.localNode}
         accountId={this.account.$jazz.raw.id}
       />,

package/src/inspector/in-app.tsx

@@ -0,0 +1,61 @@
+import { CoID, LocalNode, RawAccount } from "cojson";
+import { styled } from "goober";
+import { PageStack } from "./viewer/page-stack.js";
+import { GlobalStyles } from "./ui/global-styles.js";
+import { InspectorButton, type Position } from "./viewer/inspector-button.js";
+import { useOpenInspector } from "./viewer/use-open-inspector.js";
+import { NodeProvider } from "./contexts/node.js";
+import { InMemoryRouterProvider } from "./router/in-memory-router.js";
+import { Header } from "./viewer/header.js";
+
+export function InspectorInApp({
+  position = "right",
+  localNode,
+  accountId,
+}: {
+  position?: Position;
+  localNode?: LocalNode;
+  accountId?: CoID<RawAccount>;
+}) {
+  const [open, setOpen] = useOpenInspector();
+
+  if (!open) {
+    return (
+      <InspectorButton position={position} onClick={() => setOpen(true)} />
+    );
+  }
+
+  return (
+    <NodeProvider localNode={localNode ?? null} accountID={accountId ?? null}>
+      <InMemoryRouterProvider>
+        <InspectorContainer as={GlobalStyles} style={{ zIndex: 999 }}>
+          <Header
+            showDeleteLocalData={true}
+            showClose={true}
+            onClose={() => setOpen(false)}
+          />
+
+          <PageStack />
+        </InspectorContainer>
+      </InMemoryRouterProvider>
+    </NodeProvider>
+  );
+}
+
+const InspectorContainer = styled("div")`
+  position: fixed;
+  height: 50vh;
+  max-height: 800px;
+  display: flex;
+  flex-direction: column;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: white;
+  border-top: 1px solid var(--j-border-color);
+  color: var(--j-text-color);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--j-background);
+  }
+`;

package/src/inspector/index.tsx

@@ -1,28 +1,8 @@
 import React, { useEffect, useState } from "react";
-
-export { JazzInspectorInternal } from "./viewer/new-app.js";
-export { PageStack } from "./viewer/page-stack.js";
-export { Breadcrumbs } from "./viewer/breadcrumbs.js";
-export { AccountOrGroupText } from "./viewer/account-or-group-text.js";
-
-export { Button } from "./ui/button.js";
-export { Input } from "./ui/input.js";
-export { Select } from "./ui/select.js";
-export { Icon } from "./ui/icon.js";
-export { GlobalStyles } from "./ui/global-styles.js";
-
-export {
-  resolveCoValue,
-  useResolvedCoValue,
-} from "./viewer/use-resolve-covalue.js";
-
-export type { PageInfo } from "./viewer/types.js";
-
 import { setup } from "goober";
 import { useJazzContext } from "jazz-tools/react-core";
 import { Account } from "jazz-tools";
-
-import { JazzInspectorInternal } from "./viewer/new-app.js";
+import { InspectorInApp } from "./in-app.js";
 import { Position } from "./viewer/inspector-button.js";
 
 export function JazzInspector({ position = "right" }: { position?: Position }) {
@@ -40,7 +20,7 @@ export function JazzInspector({ position = "right" }: { position?: Position }) {
   }
 
   return (
-    <JazzInspectorInternal
+    <InspectorInApp
       position={position}
       localNode={localNode}
       accountId={me?.$jazz.raw.id}