@backmatter/studio 0.0.15 → 0.0.17

package/src/chrome/WorkspaceStatusBar.tsx

@@ -7,9 +7,11 @@ import { Popover } from "@base-ui/react/popover";
 import * as stylex from "@stylexjs/stylex";
 import {
   commitWorkspace,
+  commitCodeSessionEdits,
   countConflicts,
   createGitBranch,
   defaultCommitMessage,
+  fetchCodeSessionEdits,
   fetchGit,
   notifyHeadChanged,
   notifyTreeChanged,
@@ -17,12 +19,13 @@ import {
   notifyWorkspaceChanged,
   pullFromGithub,
   resolveDoc,
+  type ApiError,
   type ChangeStatus,
   type GitChange,
 } from "../api";
-import { contentDocPath } from "../workspace-path";
+import { contentDocPath, isWorkspaceCodePath } from "../workspace-path";
+import { useCodeSessionContext } from "../pages/code-session-context";
 import {
-  commitErrorSummary,
   explainCommitError,
   problemsForRef,
   type CommitErrorView,
@@ -33,10 +36,12 @@ import { WorkspaceSwitcher } from "../components/WorkspaceSwitcher";
 import { colors, radius, space, type } from "../styles/tokens.stylex";
 import { cx, popup, popupClassName } from "../ui/popup";
 import { useEditorStatus } from "./EditorStatusContext";
-import { ContentApiPopover } from "./ContentApiPopover";
-import { OpenSiteButton } from "./OpenSiteButton";
+import { openableSites } from "./open-site";
+import { OpenSiteButton, showsOpenSite } from "./OpenSiteButton";
 import { GitBranchIcon } from "./icons";
+import { pullFailureProblems, type PullProblem } from "./pull-failure";
 import { StatusBar, StatusItem, StatusSpacer } from "./StatusBar";
+import { Toast } from "./Toast";
 import { replicaStore } from "../replica/instance";
 import { useReplicaSession } from "../replica/ReplicaProvider";
 import { useReplicaState } from "../replica/useReplica";
@@ -168,7 +173,17 @@ export function WorkspaceStatusBar({ workspaceId }: { workspaceId: string }) {
   const [resolvingKey, setResolvingKey] = useState<string | null>(null);
   const [message, setMessage] = useState("");
   const [error, setError] = useState<string | null>(null);
+  const [pullProblems, setPullProblems] = useState<PullProblem[] | null>(null);
   const [commitFailure, setCommitFailure] = useState<CommitErrorView | null>(null);
+  const onCodePage = isWorkspaceCodePath(location.pathname);
+  const codeSession = useCodeSessionContext();
+  const codeWorkspaceId = workspaceNav?.workspaceId ?? workspaceId;
+  const [codeFiles, setCodeFiles] = useState<Array<{ path: string; deleted: boolean }>>([]);
+  const [foldPending, setFoldPending] = useState(false);
+  const [codeFoldErrors, setCodeFoldErrors] = useState<string[]>([]);
+  const [codeCommitOpen, setCodeCommitOpen] = useState(false);
+  const [codeMessage, setCodeMessage] = useState("");
+  const [codeCommitting, setCodeCommitting] = useState(false);
   // Commit sha from the last poll. A new sha means HEAD moved. The preview
   // iframe does not reload for that; its page follows the SSE head event.
   const lastHead = useRef<string | null | undefined>(undefined);
@@ -192,6 +207,35 @@ export function WorkspaceStatusBar({ workspaceId }: { workspaceId: string }) {
     }
   }
 
+  useEffect(() => {
+    if (!onCodePage || !codeSession) {
+      setCodeFiles([]);
+      return;
+    }
+    let cancelled = false;
+    const load = () => {
+      void fetchCodeSessionEdits(codeWorkspaceId, codeSession.sessionId)
+        .then((list) => {
+          if (!cancelled) {
+            setCodeFiles(list.files);
+            setFoldPending(list.foldPending);
+          }
+        })
+        .catch(() => {
+          if (!cancelled) {
+            setCodeFiles([]);
+            setFoldPending(false);
+          }
+        });
+    };
+    load();
+    const timer = window.setInterval(load, POLL_MS);
+    return () => {
+      cancelled = true;
+      window.clearInterval(timer);
+    };
+  }, [onCodePage, codeSession, codeWorkspaceId]);
+
   useEffect(() => {
     lastHead.current = undefined;
     void reloadGit();
@@ -264,13 +308,15 @@ export function WorkspaceStatusBar({ workspaceId }: { workspaceId: string }) {
   async function onPull() {
     setPulling(true);
     setError(null);
+    setPullProblems(null);
     try {
       await pullFromGithub(workspaceId);
       notifyHeadChanged();
       await reloadGit();
       setOpen(false);
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Pull failed");
+      setOpen(false);
+      setPullProblems(pullFailureProblems(err));
     } finally {
       setPulling(false);
     }
@@ -304,6 +350,46 @@ export function WorkspaceStatusBar({ workspaceId }: { workspaceId: string }) {
     }
   }
 
+  function defaultCodeSessionMessage(files: Array<{ path: string }>) {
+    if (files.length === 1) return `Update ${files[0]!.path}`;
+    return `Commit ${files.length} files from a code session`;
+  }
+
+  async function onCodeSessionCommit(e?: React.FormEvent) {
+    e?.preventDefault();
+    if (!codeSession || codeCommitting) return;
+    setCodeCommitting(true);
+    setError(null);
+    try {
+      const result = await commitCodeSessionEdits(
+        codeWorkspaceId,
+        codeSession.sessionId,
+        codeMessage,
+      );
+      setCodeMessage("");
+      setCodeFoldErrors(result.foldErrors);
+      if (result.foldErrors.length === 0) setCodeCommitOpen(false);
+      codeSession.refresh();
+      const list = await fetchCodeSessionEdits(codeWorkspaceId, codeSession.sessionId);
+      setCodeFiles(list.files);
+      setFoldPending(list.foldPending);
+      notifyHeadChanged();
+      await reloadGit();
+    } catch (err) {
+      const apiErr = err as ApiError;
+      if (apiErr.code === "branch_moved") {
+        setError("The branch changed while committing. Try again.");
+      } else if (apiErr.code === "working_tree") {
+        const paths = apiErr.details?.length ? apiErr.details.join(", ") : "";
+        setError(paths ? `Uncommitted Studio changes: ${paths}` : "Uncommitted Studio changes block this commit.");
+      } else {
+        setError(err instanceof Error ? err.message : "Commit failed");
+      }
+    } finally {
+      setCodeCommitting(false);
+    }
+  }
+
   async function onCommit(e?: React.FormEvent) {
     e?.preventDefault();
     if (committing || conflictCount > 0 || changeCount === 0) return;
@@ -338,9 +424,26 @@ export function WorkspaceStatusBar({ workspaceId }: { workspaceId: string }) {
     ? "Committing…"
     : conflictCount > 0
       ? `Resolve ${conflictCount} ${conflictCount === 1 ? "conflict" : "conflicts"}`
-      : `Deploy ${changeCount} changes`;
+      : changeCount === 0
+        ? "Deploy"
+        : `Deploy ${changeCount} changes`;
+
+  const codeEditCount =
+    codeFiles.length > 0 ? codeFiles.length : (codeSession?.editCount ?? 0);
+  const codeCommitReady =
+    Boolean(codeSession) &&
+    (codeEditCount > 0 || codeFoldErrors.length > 0 || foldPending);
+  const codeCommitLabel = codeCommitting
+    ? "Committing…"
+    : codeEditCount > 0
+      ? `Commit ${codeEditCount} ${codeEditCount === 1 ? "file" : "files"}`
+      : "Commit";
 
   return (
+    <>
+    {pullProblems ? (
+      <Toast title="Pull failed" problems={pullProblems} onDismiss={() => setPullProblems(null)} />
+    ) : null}
     <StatusBar>
       <div {...stylex.props(styles.identity)}>
         {workspaceNav ? (
@@ -478,27 +581,21 @@ export function WorkspaceStatusBar({ workspaceId }: { workspaceId: string }) {
             </Combobox.Positioner>
           </Combobox.Portal>
         </Combobox.Root>
-        {workspaceNav?.workspaceId ? (
+        {workspaceNav?.workspaceId &&
+        replica.sessionUserId &&
+        showsOpenSite() &&
+        openableSites(workspaceNav.siteUrls).length > 0 ? (
           <>
             <span {...stylex.props(styles.divider)} aria-hidden />
-            <ContentApiPopover
+            <OpenSiteButton
               workspaceId={workspaceNav.workspaceId}
-              branch={git?.currentBranch}
-              defaultBranch={git?.defaultBranch}
-              pathname={location.pathname}
-              search={location.search}
+              userId={replica.sessionUserId}
+              siteUrls={workspaceNav.siteUrls}
             />
-            {replica.sessionUserId ? (
-              <OpenSiteButton
-                workspaceId={workspaceNav.workspaceId}
-                userId={replica.sessionUserId}
-                siteUrls={workspaceNav.siteUrls}
-              />
-            ) : null}
           </>
         ) : null}
       </div>
-      {changeCount > 0 ? (
+      {!onCodePage && changeCount > 0 ? (
         <StatusItem tone={conflictCount > 0 ? "danger" : "muted"}>
           {changeCount} uncommitted
         </StatusItem>
@@ -506,7 +603,7 @@ export function WorkspaceStatusBar({ workspaceId }: { workspaceId: string }) {
       {error ? (
         <StatusItem tone="danger">{error}</StatusItem>
       ) : commitFailure ? (
-        <StatusItem tone="danger">{commitErrorSummary(commitFailure)}</StatusItem>
+        <StatusItem tone="danger">Can't commit</StatusItem>
       ) : refreshError ? (
         <StatusItem tone="danger">{refreshError}</StatusItem>
       ) : null}
@@ -514,24 +611,117 @@ export function WorkspaceStatusBar({ workspaceId }: { workspaceId: string }) {
       {inEditor && editor.saveLabel ? (
         <StatusItem tone={editor.saveTone}>{editor.saveLabel}</StatusItem>
       ) : null}
-      {changeCount > 0 ? (
+      {onCodePage ? (
+        <Popover.Root
+          open={codeCommitOpen}
+          onOpenChange={(next) => {
+            if (!codeCommitReady) return;
+            setCodeCommitOpen(next);
+          }}
+        >
+          <Popover.Trigger
+            disabled={!codeCommitReady || codeCommitting}
+            aria-label={codeCommitLabel}
+            className={cx(styles.commit)}
+          >
+            {codeCommitLabel}
+          </Popover.Trigger>
+          <Popover.Portal>
+            <Popover.Positioner
+              side="bottom"
+              align="end"
+              sideOffset={6}
+              className={cx(popup.positioner)}
+            >
+              <Popover.Popup
+                aria-label="Commit code session"
+                className={(state) => popupClassName(state, styles.commitPopup)}
+              >
+                <form
+                  onSubmit={(e) => void onCodeSessionCommit(e)}
+                  {...stylex.props(styles.commitForm)}
+                >
+                  <p {...stylex.props(popup.groupLabel)}>
+                    {codeEditCount} {codeEditCount === 1 ? "file" : "files"} →{" "}
+                    {git?.currentBranch}
+                  </p>
+                  <ul {...stylex.props(styles.commitFiles)}>
+                    {codeFiles.map((file) => (
+                      <li key={file.path}>
+                        <div {...stylex.props(styles.changeItem)}>
+                          <span {...stylex.props(styles.changeName)}>{file.path}</span>
+                          <span {...stylex.props(popup.itemMeta)}>
+                            {file.deleted ? "deleted" : "modified"}
+                          </span>
+                        </div>
+                      </li>
+                    ))}
+                  </ul>
+                  {codeFoldErrors.length > 0 ? (
+                    <ul {...stylex.props(styles.commitFiles)}>
+                      {codeFoldErrors.map((foldError) => (
+                        <li key={foldError}>
+                          <p {...stylex.props(styles.conflictError)}>{foldError}</p>
+                        </li>
+                      ))}
+                    </ul>
+                  ) : null}
+                  <div {...stylex.props(popup.separator)} />
+                  <div {...stylex.props(styles.commitFooter)}>
+                    <input
+                      value={codeMessage}
+                      onChange={(e) => setCodeMessage(e.target.value)}
+                      placeholder={defaultCodeSessionMessage(codeFiles)}
+                      aria-label="Commit message"
+                      autoComplete="off"
+                      spellCheck={false}
+                      data-no-ring
+                      data-1p-ignore
+                      data-lpignore
+                      autoFocus
+                      disabled={codeCommitting}
+                      {...stylex.props(styles.commitField)}
+                    />
+                    <div {...stylex.props(styles.commitSubmit)}>
+                      <button
+                        type="submit"
+                        disabled={codeCommitting}
+                        {...stylex.props(styles.commitSubmitBtn)}
+                      >
+                        {codeCommitting ? "Committing…" : "Commit"}
+                      </button>
+                    </div>
+                  </div>
+                </form>
+              </Popover.Popup>
+            </Popover.Positioner>
+          </Popover.Portal>
+        </Popover.Root>
+      ) : null}
+      {!onCodePage ? (
         <Popover.Root
           open={commitOpen}
           onOpenChange={(next) => {
-            if (action === "blocked") return;
+            if (changeCount === 0 || action === "blocked") return;
             setCommitOpen(next);
           }}
         >
           <Popover.Trigger
-            disabled={commitTriggerDisabled(action, { committing, syncing })}
+            disabled={
+              changeCount === 0 || commitTriggerDisabled(action, { committing, syncing })
+            }
             aria-label={
-              action === "blocked"
-                ? "Writers cannot publish"
-                : action === "resolve"
-                  ? commitLabel
-                  : `Commit ${changeCount} ${changeCount === 1 ? "file" : "files"}`
+              changeCount === 0
+                ? "Deploy"
+                : action === "blocked"
+                  ? "Writers cannot publish"
+                  : action === "resolve"
+                    ? commitLabel
+                    : `Commit ${changeCount} ${changeCount === 1 ? "file" : "files"}`
+            }
+            title={
+              changeCount > 0 && action === "blocked" ? "Writers cannot publish" : undefined
             }
-            title={action === "blocked" ? "Writers cannot publish" : undefined}
             className={cx(styles.commit, action === "resolve" && styles.commitBlocked)}
           >
             {commitLabel}
@@ -628,6 +818,7 @@ export function WorkspaceStatusBar({ workspaceId }: { workspaceId: string }) {
         </Popover.Root>
       ) : null}
     </StatusBar>
+    </>
   );
 }
 

package/src/chrome/commit-error.ts

@@ -27,6 +27,9 @@ export function explainCommitError(err: unknown): CommitErrorView {
   if (apiErr.code === "github_not_bound") {
     return { kind: "message", text: "Connect GitHub first" };
   }
+  if (apiErr.code === "unknown_type") {
+    return { kind: "message", text: unknownTypeMessage(apiErr.details ?? []) };
+  }
   if (apiErr.code === "validation") {
     return { kind: "validation", files: groupValidation(validationLines(apiErr)) };
   }
@@ -52,6 +55,16 @@ export function problemsForRef(
   return view.files.find((file) => file.ref === ref)?.problems ?? [];
 }
 
+function unknownTypeMessage(types: string[]): string {
+  if (types.length === 0) {
+    return "A file uses a model this workspace doesn't have, so it can't be committed.";
+  }
+  if (types.length === 1) {
+    return `${types[0]} isn't a model in this workspace. Pull couldn't load that model file, so this draft can't be committed.`;
+  }
+  return `${types.join(", ")} aren't models in this workspace. Pull couldn't load those model files, so these drafts can't be committed.`;
+}
+
 function validationLines(err: ApiError): string[] {
   if (err.details && err.details.length > 0) return err.details;
   const body = err.message.replace(/^validation:\s*/, "");

package/src/chrome/content-api-url.ts

@@ -1,48 +1,6 @@
 // packages/studio/src/chrome/content-api-url.ts
 // Public content GET the host reads — same URLs as @backmatter/core api-loader.
 
-export type ContentApiDoc = { type: string; slug: string };
-
-export type ContentApiContext = {
-  doc: ContentApiDoc | null;
-  type: string | null;
-};
-
-export function contentApiContextFromPath(
-  pathname: string,
-  _search = "",
-): ContentApiContext {
-  const doc = pathname.match(/\/content\/([^/]+)\/([^/]+)\/?$/);
-  if (doc) {
-    return {
-      doc: {
-        type: decodeURIComponent(doc[1]!),
-        slug: decodeURIComponent(doc[2]!),
-      },
-      type: null,
-    };
-  }
-  const type = pathname.match(/\/content\/([^/]+)\/?$/);
-  if (type) {
-    return { doc: null, type: decodeURIComponent(type[1]!) };
-  }
-  const legacyDoc = pathname.match(/\/docs\/([^/]+)\/([^/]+)\/([^/]+)\/?$/);
-  if (legacyDoc) {
-    return {
-      doc: {
-        type: decodeURIComponent(legacyDoc[2]!),
-        slug: decodeURIComponent(legacyDoc[3]!),
-      },
-      type: null,
-    };
-  }
-  const legacyType = pathname.match(/\/types\/([^/]+)\/?$/);
-  if (legacyType) {
-    return { doc: null, type: decodeURIComponent(legacyType[1]!) };
-  }
-  return { doc: null, type: null };
-}
-
 export function publicContentApiUrl(input: {
   apiUrl: string;
   workspaceId: string;
@@ -64,39 +22,3 @@ export function publicContentApiUrl(input: {
   if (!input.slug && input.type) url.searchParams.set("type", input.type);
   return url.toString();
 }
-
-export function contentApiLinks(input: {
-  apiUrl: string;
-  workspaceId: string;
-  branch?: string | null;
-  defaultBranch?: string | null;
-  pathname: string;
-  search?: string;
-}): Array<{ label: string; href: string }> {
-  const ctx = contentApiContextFromPath(input.pathname, input.search);
-  const base = {
-    apiUrl: input.apiUrl,
-    workspaceId: input.workspaceId,
-    branch: input.branch,
-    defaultBranch: input.defaultBranch,
-  };
-  const links: Array<{ label: string; href: string }> = [];
-  if (ctx.doc) {
-    links.push({
-      label: "This document",
-      href: publicContentApiUrl({
-        ...base,
-        type: ctx.doc.type,
-        slug: ctx.doc.slug,
-      }),
-    });
-  }
-  links.push({
-    label: ctx.type ? `${ctx.type} docs` : "All docs",
-    href: publicContentApiUrl({
-      ...base,
-      type: ctx.type ?? undefined,
-    }),
-  });
-  return links;
-}

package/src/chrome/content-tree-visibility.ts

@@ -1,21 +1,31 @@
 // packages/studio/src/chrome/content-tree-visibility.ts
 import { useEffect, useState } from "react";
 import type { KeyValueStore } from "../last-workspace";
-import { isWorkspaceContentPath, isWorkspaceEditorPath } from "../workspace-path";
+import {
+  isWorkspaceContentPath,
+  isWorkspaceEditorPath,
+  isWorkspaceHomePath,
+} from "../workspace-path";
 
 export const CONTENT_TREE_OPEN_KEY = "backmatter-content-tree-open";
 const CONTENT_TREE_EVENT = "backmatter-content-tree";
 
 /**
- * The type index is the file tree, so it stays open.
- * A document follows the editor toggle. Other routes have no tree.
+ * The content index and a type index keep the file tree open.
+ * A document follows the editor toggle. Home, settings, and media have no tree.
  */
 export function contentTreeVisible(pathname: string, open: boolean) {
+  if (isWorkspaceHomePath(pathname)) return false;
   if (!isWorkspaceContentPath(pathname)) return false;
   if (isWorkspaceEditorPath(pathname)) return open;
   return true;
 }
 
+/** Content rail is current wherever the file tree is open. */
+export function contentRailCurrent(pathname: string, treeOpen: boolean) {
+  return contentTreeVisible(pathname, treeOpen);
+}
+
 export function readContentTreeOpen(storage: KeyValueStore = localStorage) {
   try {
     return storage.getItem(CONTENT_TREE_OPEN_KEY) !== "0";

package/src/chrome/explorer-icons.tsx

@@ -7,6 +7,7 @@ import {
   IconChevronRightSmall,
   IconBrackets2,
   IconFileText,
+  IconCode,
   IconFiles,
   IconFolder1,
   IconGit,
@@ -70,6 +71,10 @@ export function ExplorerRailMediaIcon() {
   return <Central icon={IconImages1} size={RAIL} />;
 }
 
+export function ExplorerRailCodeIcon() {
+  return <Central icon={IconCode} size={RAIL} />;
+}
+
 export function ExplorerRailSettingsIcon() {
   return <Central icon={IconSettingsGear2} size={RAIL} />;
 }

package/src/chrome/pull-failure.ts

@@ -0,0 +1,61 @@
+// packages/studio/src/chrome/pull-failure.ts
+import type { ApiError } from "../api";
+
+export type PullProblem = {
+  /** Repo path, when the failure names a file. */
+  file: string;
+  text: string;
+};
+
+/** What the pull-failed notice says. One problem per file, in words. */
+export function pullFailureProblems(err: unknown): PullProblem[] {
+  const lines = rawLines(err);
+  if (lines.length === 0) return [{ file: "", text: "Pull failed." }];
+  return lines.map(explainPullLine);
+}
+
+function rawLines(err: unknown): string[] {
+  const details = (err as ApiError).details;
+  if (Array.isArray(details) && details.length > 0 && details.every((line) => typeof line === "string")) {
+    return details;
+  }
+  if (err instanceof Error) {
+    const message = err.message.replace(/^github_import_failed:\s*/, "");
+    if (message && message !== "github_import_failed") return [message];
+  }
+  return [];
+}
+
+function explainPullLine(line: string): PullProblem {
+  const split = line.indexOf(": ");
+  const file = split === -1 ? "" : line.slice(0, split);
+  const rest = split === -1 ? line : line.slice(split + 2);
+
+  const renamed = rest.match(/defines name "([^"]+)" but the file is named "([^"]+)"/);
+  if (renamed) {
+    return {
+      file,
+      text: `The name is ${renamed[1]}, but the file is ${renamed[2]}. Rename one so they match.`,
+    };
+  }
+  if (/field\.locale/.test(rest)) {
+    return {
+      file,
+      text: "This file calls field.locale(), which was removed, so it didn't load.",
+    };
+  }
+  if (/import is not allowed/.test(rest)) {
+    return {
+      file,
+      text: "This file imports something other than defineModel, field, or an object, so it didn't load.",
+    };
+  }
+
+  const cleaned = rest
+    .replace(/^model "[^"]+" failed to evaluate:\s*/i, "")
+    .replace(/^object "[^"]+" failed to evaluate:\s*/i, "")
+    .replace(/TypeError:\s*/g, "")
+    .replace(/\s*\([^)]*\)/g, "")
+    .trim();
+  return { file, text: cleaned || "This file didn't load." };
+}

package/src/code-session-entry.ts

@@ -0,0 +1,9 @@
+// packages/studio/src/code-session-entry.ts
+import { canDevelop } from "./workspace/permissions";
+import { codeSessionPath } from "./workspace-path";
+
+/** Where a developer opens a code session. Writers and editors get nothing. */
+export function codeSessionEntry(role: string, slug: string): string | null {
+  if (!canDevelop(role)) return null;
+  return codeSessionPath(slug);
+}

package/src/components/WorkspaceSwitcher.tsx

@@ -47,9 +47,9 @@ export function WorkspaceSwitcher({
     (id: string) => {
       setOpen(false);
       const next = workspaces.find((workspace) => workspace.id === id);
-      if (next && id !== workspaceId) navigate(workspaceHomePath(next.slug));
+      if (next) navigate(workspaceHomePath(next.slug));
     },
-    [navigate, workspaceId, workspaces],
+    [navigate, workspaces],
   );
 
   // Number keys 1–9 jump straight to a workspace while the menu is open.