@backmatter/studio 0.0.1

package/src/pages/SettingsGithubPage.tsx

@@ -0,0 +1,277 @@
+// packages/studio/src/pages/SettingsGithubPage.tsx
+import { useEffect, useState } from "react";
+import { useNavigate, useOutletContext } from "react-router";
+import {
+  attachGithubInstallation,
+  bindGithub,
+  type ApiError,
+  type GithubInstallationChoice,
+  unbindGithub,
+} from "../api";
+import { Button, ButtonLink } from "../ui/Button";
+import { Field } from "../ui/Field";
+import { Input } from "../ui/Input";
+import { ConfirmDialog } from "../ui/ConfirmDialog";
+import { PageHeader, Panel, Stack } from "../ui/Page";
+import { Text } from "../ui/Text";
+import * as stylex from "@stylexjs/stylex";
+import { colors, space, type } from "../styles/tokens.stylex";
+import type { WorkspaceOutletContext } from "../workspace/types";
+import { githubConnectPath } from "../workspace-path";
+
+export function SettingsGithubPage() {
+  const { workspace, reload } = useOutletContext<WorkspaceOutletContext>();
+  const navigate = useNavigate();
+  const connected = Boolean(workspace.githubRepoFullName);
+  const canEdit = workspace.role === "admin" || workspace.role === "developer";
+  const [confirmDisconnect, setConfirmDisconnect] = useState(false);
+  const [disconnecting, setDisconnecting] = useState(false);
+  const [connecting, setConnecting] = useState(false);
+  const [choices, setChoices] = useState<GithubInstallationChoice[] | null>(null);
+  const [installUrl, setInstallUrl] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [directory, setDirectory] = useState(workspace.githubDirectory ?? "");
+  const [directoryError, setDirectoryError] = useState<string | null>(null);
+  const [savingDirectory, setSavingDirectory] = useState(false);
+
+  useEffect(() => {
+    setDirectory(workspace.githubDirectory ?? "");
+  }, [workspace.githubDirectory]);
+
+  async function onSaveDirectory(e: React.FormEvent) {
+    e.preventDefault();
+    if (!workspace.githubRepoFullName || !workspace.githubDefaultBranch) {
+      setDirectoryError("Connect a repository and branch before saving a directory.");
+      return;
+    }
+    setSavingDirectory(true);
+    setDirectoryError(null);
+    try {
+      await bindGithub(workspace.id, {
+        repoFullName: workspace.githubRepoFullName,
+        defaultBranch: workspace.githubDefaultBranch,
+        githubDirectory: directory,
+      });
+      await reload();
+    } catch (err) {
+      const code =
+        err && typeof err === "object" && "code" in err
+          ? (err as ApiError).code
+          : undefined;
+      if (code === "invalid_github_directory") {
+        setDirectoryError("The directory is invalid.");
+      } else {
+        setDirectoryError(err instanceof Error ? err.message : "Save failed");
+      }
+    } finally {
+      setSavingDirectory(false);
+    }
+  }
+
+  async function onConnect(installationId?: string) {
+    setConnecting(true);
+    setError(null);
+    try {
+      const result = await attachGithubInstallation(workspace.id, installationId);
+      if (result.installationId) {
+        await reload();
+        navigate(githubConnectPath(workspace.slug));
+        return;
+      }
+      if (result.installations.length > 1) {
+        setChoices(result.installations);
+        setInstallUrl(null);
+        return;
+      }
+      setChoices(null);
+      setInstallUrl(result.installUrl);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Connect failed");
+    } finally {
+      setConnecting(false);
+    }
+  }
+
+  async function onDisconnect() {
+    setDisconnecting(true);
+    setError(null);
+    try {
+      await unbindGithub(workspace.id);
+      await reload();
+      setConfirmDisconnect(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Disconnect failed");
+      setConfirmDisconnect(false);
+    } finally {
+      setDisconnecting(false);
+    }
+  }
+
+  return (
+    <section>
+      <PageHeader
+        title="GitHub"
+        description="Repository this workspace commits to and imports from."
+      />
+      {error ? (
+        <div {...stylex.props(styles.error)}>
+          <Text tone="danger">{error}</Text>
+        </div>
+      ) : null}
+      <Panel>
+        {connected ? (
+          <Stack>
+            <dl {...stylex.props(styles.dl)}>
+              <div>
+                <dt {...stylex.props(styles.dt)}>Repository</dt>
+                <dd {...stylex.props(styles.dd)}>{workspace.githubRepoFullName}</dd>
+              </div>
+              <div>
+                <dt {...stylex.props(styles.dt)}>Branch</dt>
+                <dd {...stylex.props(styles.dd)}>
+                  {workspace.githubDefaultBranch}
+                </dd>
+              </div>
+              {!canEdit ? (
+                <div>
+                  <dt {...stylex.props(styles.dt)}>Directory</dt>
+                  <dd {...stylex.props(styles.dd)}>
+                    {workspace.githubDirectory ?? "Repository root"}
+                  </dd>
+                </div>
+              ) : null}
+            </dl>
+            {canEdit ? (
+              <form onSubmit={(e) => void onSaveDirectory(e)}>
+                <Stack>
+                  <Field
+                    label="Directory"
+                    hint="Folder inside the repository that contains this site. Leave empty for the repository root."
+                  >
+                    <Input
+                      value={directory}
+                      onChange={(e) => setDirectory(e.target.value)}
+                    />
+                  </Field>
+                  {directoryError ? (
+                    <Text tone="danger">{directoryError}</Text>
+                  ) : null}
+                  <div>
+                    <Button type="submit" disabled={savingDirectory}>
+                      {savingDirectory ? "Saving…" : "Save"}
+                    </Button>
+                  </div>
+                </Stack>
+              </form>
+            ) : null}
+            {canEdit ? (
+              <div {...stylex.props(styles.actions)}>
+                <ButtonLink
+                  variant="secondary"
+                  to={githubConnectPath(workspace.slug)}
+                >
+                  Change repository
+                </ButtonLink>
+                <Button
+                  variant="danger"
+                  disabled={disconnecting}
+                  onClick={() => setConfirmDisconnect(true)}
+                >
+                  Disconnect
+                </Button>
+              </div>
+            ) : null}
+          </Stack>
+        ) : (
+          <Stack>
+            <Text tone="muted" size="sm">
+              Connect finds the backmatter CMS installation on your GitHub
+              account and opens the repository list here. Saving on GitHub does
+              not return to Backmatter.
+            </Text>
+            {canEdit ? (
+              <div {...stylex.props(styles.actions)}>
+                {workspace.githubInstallationId ? (
+                  <ButtonLink to={githubConnectPath(workspace.slug)}>
+                    Choose repository
+                  </ButtonLink>
+                ) : choices ? (
+                  choices.map((choice) => (
+                    <Button
+                      key={choice.id}
+                      disabled={connecting}
+                      onClick={() => void onConnect(choice.id)}
+                    >
+                      {choice.account ?? choice.id}
+                    </Button>
+                  ))
+                ) : (
+                  <Button disabled={connecting} onClick={() => void onConnect()}>
+                    {connecting ? "Connecting…" : "Connect GitHub"}
+                  </Button>
+                )}
+                {installUrl ? (
+                  <ButtonLink href={installUrl} newTab={false} variant="secondary">
+                    Install on GitHub
+                  </ButtonLink>
+                ) : null}
+                {workspace.githubInstallationId ? (
+                  <Button
+                    variant="danger"
+                    disabled={disconnecting}
+                    onClick={() => setConfirmDisconnect(true)}
+                  >
+                    Disconnect
+                  </Button>
+                ) : null}
+              </div>
+            ) : null}
+          </Stack>
+        )}
+      </Panel>
+      <ConfirmDialog
+        open={confirmDisconnect}
+        onOpenChange={(open) => {
+          if (!open && !disconnecting) setConfirmDisconnect(false);
+        }}
+        title="Disconnect GitHub?"
+        description={
+          connected
+            ? `This workspace will stop committing to and importing from ${workspace.githubRepoFullName}. Existing content stays. You can connect a repository again later.`
+            : "This removes the GitHub App installation from this workspace. You can connect again later."
+        }
+        confirmLabel={disconnecting ? "Disconnecting…" : "Disconnect"}
+        destructive
+        busy={disconnecting}
+        onConfirm={() => void onDisconnect()}
+      />
+    </section>
+  );
+}
+
+const styles = stylex.create({
+  dl: {
+    margin: 0,
+    display: "flex",
+    flexDirection: "column",
+    gap: space.lg,
+    fontSize: type.md,
+  },
+  dt: {
+    color: colors.textMuted,
+    fontSize: type.sm,
+  },
+  dd: {
+    margin: 0,
+    fontWeight: 500,
+  },
+  actions: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: space.sm,
+  },
+  error: {
+    marginBottom: space.lg,
+  },
+});

package/src/pages/SettingsLayout.tsx

@@ -0,0 +1,127 @@
+// packages/studio/src/pages/SettingsLayout.tsx
+import { Navigate, Outlet, useLocation, useOutletContext } from "react-router";
+import * as stylex from "@stylexjs/stylex";
+import { NavItem } from "../chrome/NavItem";
+import { GearIcon, GithubIcon, PlugIcon, SchemaIcon, UsersIcon } from "../chrome/icons";
+import { colors, space, type } from "../styles/tokens.stylex";
+import type { WorkspaceOutletContext } from "../workspace/types";
+import { isGithubSettingsPath, settingsPath } from "../workspace-path";
+import { canDevelop, canManageMembers } from "../workspace/permissions";
+
+export function SettingsIndexRedirect() {
+  const { workspace } = useOutletContext<WorkspaceOutletContext>();
+  return <Navigate to={settingsPath(workspace.slug, "general")} replace />;
+}
+
+export function SettingsLayout() {
+  const location = useLocation();
+  const ctx = useOutletContext<WorkspaceOutletContext>();
+  const slug = ctx.workspace.slug;
+  const develop = canDevelop(ctx.workspace.role);
+  const manage = canManageMembers(ctx.workspace.role);
+
+  return (
+    <div {...stylex.props(styles.scroll)}>
+      <div {...stylex.props(styles.row)}>
+        <aside {...stylex.props(styles.aside)}>
+          <nav aria-label="Settings pages">
+            <p {...stylex.props(styles.section)}>Settings</p>
+            <ul {...stylex.props(styles.list)}>
+              <li>
+                <NavItem to={settingsPath(slug, "general")}>
+                  <GearIcon />
+                  General
+                </NavItem>
+              </li>
+              {develop ? (
+                <li>
+                  <NavItem
+                    to={settingsPath(slug, "github")}
+                    active={isGithubSettingsPath(location.pathname)}
+                  >
+                    <GithubIcon />
+                    GitHub
+                  </NavItem>
+                </li>
+              ) : null}
+              {develop ? (
+                <li>
+                  <NavItem to={settingsPath(slug, "schema")}>
+                    <SchemaIcon />
+                    Schema
+                  </NavItem>
+                </li>
+              ) : null}
+              {develop ? (
+                <li>
+                  <NavItem to={settingsPath(slug, "mcp")}>
+                    <PlugIcon />
+                    Connectors
+                  </NavItem>
+                </li>
+              ) : null}
+              {manage ? (
+                <li>
+                  <NavItem to={settingsPath(slug, "users")}>
+                    <UsersIcon />
+                    Users
+                  </NavItem>
+                </li>
+              ) : null}
+            </ul>
+          </nav>
+        </aside>
+        <div {...stylex.props(styles.main)}>
+          <Outlet context={ctx} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const styles = stylex.create({
+  scroll: {
+    minHeight: 0,
+    flex: 1,
+    overflowY: "auto",
+  },
+  row: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "flex-start",
+    gap: space.xxl,
+    width: "100%",
+    boxSizing: "border-box",
+    paddingInline: space.xxl,
+    paddingBlock: space.xxl,
+  },
+  aside: {
+    position: "sticky",
+    top: space.xxl,
+    width: "200px",
+    flexShrink: 0,
+  },
+  main: {
+    width: "100%",
+    maxWidth: "720px",
+    minWidth: 0,
+  },
+  list: {
+    margin: 0,
+    padding: 0,
+    listStyle: "none",
+    display: "flex",
+    flexDirection: "column",
+    gap: 2,
+  },
+  section: {
+    margin: 0,
+    marginBottom: space.sm,
+    paddingInline: space.md,
+    fontSize: type.xs,
+    fontWeight: 600,
+    letterSpacing: "0.08em",
+    textTransform: "uppercase",
+    color: colors.textMuted,
+  },
+});

package/src/pages/SettingsMcpPage.tsx

@@ -0,0 +1,30 @@
+// packages/studio/src/pages/SettingsMcpPage.tsx
+import { useOutletContext } from "react-router";
+import { McpConnectorsPanel } from "../mcp/McpConnectorsPanel";
+import { PageHeader } from "../ui/Page";
+import { Text } from "../ui/Text";
+import type { WorkspaceOutletContext } from "../workspace/types";
+
+export function SettingsMcpPage() {
+  const { workspace } = useOutletContext<WorkspaceOutletContext>();
+  const canEdit = workspace.role === "admin" || workspace.role === "developer";
+  const canView = canEdit;
+
+  return (
+    <section>
+      <PageHeader
+        title="Connectors"
+        description="Remote MCP servers available to the AI chat in this workspace."
+      />
+      {canView ? (
+        <McpConnectorsPanel
+          scope="workspace"
+          workspaceId={workspace.id}
+          canEdit={canEdit}
+        />
+      ) : (
+        <Text tone="muted">Connectors are available to admins and developers.</Text>
+      )}
+    </section>
+  );
+}

package/src/pages/SettingsSchemaPage.tsx

@@ -0,0 +1,93 @@
+// packages/studio/src/pages/SettingsSchemaPage.tsx
+import { useEffect, useState } from "react";
+import { useOutletContext } from "react-router";
+import { fetchSchema } from "../api";
+import { PageHeader, Panel } from "../ui/Page";
+import { Text } from "../ui/Text";
+import * as stylex from "@stylexjs/stylex";
+import { space, type } from "../styles/tokens.stylex";
+import type { WorkspaceOutletContext } from "../workspace/types";
+
+export function SettingsSchemaPage() {
+  const { workspace } = useOutletContext<WorkspaceOutletContext>();
+  const [schemaVersion, setSchemaVersion] = useState<number | null>(null);
+  const [schemaBranch, setSchemaBranch] = useState<string | null>(null);
+  const [schemaJson, setSchemaJson] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    function load() {
+      void fetchSchema(workspace.id)
+        .then((schema) => {
+          if (schema.schema) {
+            setSchemaVersion(schema.schema.version);
+            setSchemaBranch(schema.schema.branch ?? schema.branch ?? null);
+            setSchemaJson(JSON.stringify(schema.schema.payload, null, 2));
+          } else {
+            setSchemaVersion(null);
+            setSchemaBranch(schema.branch ?? null);
+            setSchemaJson("");
+          }
+        })
+        .catch((err: Error) => setError(err.message));
+    }
+    load();
+    window.addEventListener("backmatter:workspace-changed", load);
+    window.addEventListener("backmatter:head-changed", load);
+    return () => {
+      window.removeEventListener("backmatter:workspace-changed", load);
+      window.removeEventListener("backmatter:head-changed", load);
+    };
+  }, [workspace.id]);
+
+  return (
+    <section>
+      <PageHeader
+        title="Schema"
+        description="Content types for the current branch, mirrored from models/*.ts on the bound repo."
+      />
+      {error ? <Text tone="danger">{error}</Text> : null}
+      <Panel>
+        <div {...stylex.props(styles.head)}>
+          <Text as="h2" size="lg" weight="medium">
+            Schema snapshot
+          </Text>
+          <Text tone="muted" size="sm">
+            {schemaVersion
+              ? `v${schemaVersion}${schemaBranch ? ` · ${schemaBranch}` : ""}`
+              : "none"}
+          </Text>
+        </div>
+        {schemaJson ? (
+          <pre {...stylex.props(styles.pre)}>{schemaJson}</pre>
+        ) : (
+          <div {...stylex.props(styles.block)}>
+            <Text tone="muted" size="sm">
+              Pull from GitHub to load models from the repo. Host-token boot sync is optional.
+            </Text>
+          </div>
+        )}
+      </Panel>
+    </section>
+  );
+}
+
+const styles = stylex.create({
+  head: {
+    display: "flex",
+    alignItems: "baseline",
+    justifyContent: "space-between",
+    gap: space.lg,
+  },
+  block: {
+    marginTop: space.lg,
+  },
+  pre: {
+    marginTop: space.lg,
+    overflowX: "auto",
+    fontFamily: type.mono,
+    fontSize: type.sm,
+    lineHeight: 1.5,
+    whiteSpace: "pre-wrap",
+  },
+});