@backmatter/studio 0.0.14 → 0.0.16

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,10 +19,12 @@ 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,
@@ -33,8 +37,8 @@ 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 { StatusBar, StatusItem, StatusSpacer } from "./StatusBar";
 import { replicaStore } from "../replica/instance";
@@ -56,12 +60,11 @@ export const STATUS_LABEL: Record<ChangeStatus, string> = {
 };
 
 function changeKey(doc: GitChange) {
-  return `${doc.locale}/${doc.type}/${doc.slug}`;
+  return `${doc.type}/${doc.slug}`;
 }
 
 function ConflictResolvePanel({
   workspaceSlug,
-  defaultLocale,
   conflicts,
   resolvingKey,
   error,
@@ -69,7 +72,6 @@ function ConflictResolvePanel({
   onResolve,
 }: {
   workspaceSlug: string | null;
-  defaultLocale: string;
   conflicts: GitChange[];
   resolvingKey: string | null;
   error: string | null;
@@ -88,13 +90,7 @@ function ConflictResolvePanel({
         {conflicts.map((doc) => {
           const key = changeKey(doc);
           const href = workspaceSlug
-            ? contentDocPath(
-                workspaceSlug,
-                doc.type,
-                doc.slug,
-                doc.locale,
-                defaultLocale,
-              )
+            ? contentDocPath(workspaceSlug, doc.type, doc.slug)
             : null;
           return (
             <li key={key} {...stylex.props(styles.conflictRow)}>
@@ -107,7 +103,6 @@ function ConflictResolvePanel({
                   <span {...stylex.props(styles.changeName)}>
                     {doc.type}/{doc.slug}
                   </span>
-                  <span {...stylex.props(popup.itemMeta)}>{doc.locale}</span>
                 </Link>
               ) : (
                 <span {...stylex.props(styles.changeName)}>
@@ -178,6 +173,15 @@ export function WorkspaceStatusBar({ workspaceId }: { workspaceId: string }) {
   const [message, setMessage] = useState("");
   const [error, setError] = useState<string | 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);
@@ -201,6 +205,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();
@@ -293,10 +326,9 @@ export function WorkspaceStatusBar({ workspaceId }: { workspaceId: string }) {
     setResolvingKey(key);
     setError(null);
     try {
-      await resolveDoc(workspaceId, doc.locale, doc.type, doc.slug, strategy);
+      await resolveDoc(workspaceId, doc.type, doc.slug, strategy);
       notifyTreeChanged({
         workspaceId,
-        locale: doc.locale,
         type: doc.type,
         slug: doc.slug,
         status: strategy === "theirs" ? "clean" : "modified",
@@ -314,6 +346,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;
@@ -341,20 +413,27 @@ export function WorkspaceStatusBar({ workspaceId }: { workspaceId: string }) {
     const slug = ref.slice(slash + 1);
     const doc = changes.find((change) => change.type === type && change.slug === slug);
     if (!doc) return null;
-    return contentDocPath(
-      workspaceNav.workspaceSlug,
-      doc.type,
-      doc.slug,
-      doc.locale,
-      workspaceNav.defaultLocale,
-    );
+    return contentDocPath(workspaceNav.workspaceSlug, doc.type, doc.slug);
   }
 
   const commitLabel = committing
     ? "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 (
     <StatusBar>
@@ -444,7 +523,7 @@ export function WorkspaceStatusBar({ workspaceId }: { workspaceId: string }) {
                     <div {...stylex.props(styles.changes)}>
                       <p {...stylex.props(popup.groupLabel)}>Uncommitted</p>
                       {changes.map((doc) => (
-                        <ChangeRow key={`${doc.locale}/${doc.type}/${doc.slug}`} doc={doc} />
+                        <ChangeRow key={changeKey(doc)} doc={doc} />
                       ))}
                     </div>
                   </>
@@ -494,27 +573,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>
@@ -530,24 +603,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}
@@ -566,7 +732,6 @@ export function WorkspaceStatusBar({ workspaceId }: { workspaceId: string }) {
                 {action === "resolve" ? (
                   <ConflictResolvePanel
                     workspaceSlug={workspaceNav?.workspaceSlug ?? null}
-                    defaultLocale={workspaceNav?.defaultLocale ?? "en"}
                     conflicts={conflicts}
                     resolvingKey={resolvingKey}
                     error={error}
@@ -598,7 +763,7 @@ export function WorkspaceStatusBar({ workspaceId }: { workspaceId: string }) {
                   ) : null}
                   <ul {...stylex.props(styles.commitFiles)}>
                     {changes.map((doc) => (
-                      <li key={`${doc.locale}/${doc.type}/${doc.slug}`}>
+                      <li key={changeKey(doc)}>
                         <ChangeRow
                           doc={doc}
                           invalid={

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/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.