@backmatter/studio 0.0.16 → 0.0.17

package/src/pages/CodeSessionPage.tsx

@@ -14,7 +14,7 @@ import {
   IconGlobe,
 } from "@central-icons-react/round-outlined-radius-2-stroke-1.5";
 import { ChatPanel } from "../chat/ChatPanel";
-import { ChatProvider, ChatSessionScope } from "../chat/ChatProvider";
+import { ChatProvider, ChatSessionScope, useChatBusy } from "../chat/ChatProvider";
 import { useReplicaState } from "../replica/useReplica";
 import { colors, radius, space, type } from "../styles/tokens.stylex";
 import { apiCredentials, apiHeaders, apiUrl } from "../studio-config";
@@ -35,7 +35,8 @@ import { CodeSessionFiles, type FilesView } from "./CodeSessionFiles";
 import { PreviewSizeSwitch, PreviewViewport } from "./PreviewSize";
 import { persistPreviewSize, readPreviewSize, type PreviewSize } from "./preview-size";
 import type { WorkspaceFile } from "./code-session-files";
-import { fetchCodeSessionEdits } from "../api";
+import { clearCodeSessionEdits, fetchCodeSessionEdits, updateCodeSessionBranch } from "../api";
+import { branchNoticeKind, type BranchNoticeKind } from "./branch-notice";
 import { usePublishCodeSession } from "./code-session-context";
 import { sessionDocument } from "./session-preview";
 import { useSessionPreview } from "./use-session-preview";
@@ -80,6 +81,10 @@ export function CodeSessionScreen({
   models = [],
   files,
   chat,
+  notice = null,
+  noticeBusy = false,
+  onUpdateBranch = () => {},
+  onClearEdits = () => {},
 }: {
   state: OpenState;
   host: HostView;
@@ -108,9 +113,16 @@ export function CodeSessionScreen({
   /** Models whose routes name the document under a pointed block. */
   models?: readonly RouteModel[];
   chat: React.ReactNode;
+  notice?: BranchNoticeKind | null;
+  /** Chat is writing, or the checkout is already being replaced. */
+  noticeBusy?: boolean;
+  onUpdateBranch?: () => void;
+  onClearEdits?: () => void;
 }) {
   // The entry's ticket sets the host's cookie on first load; later loads ride that cookie.
   // A reload uses the route the frame is on, which can differ from the last address typed.
+  const chatBusy = useChatBusy();
+  const actionBusy = noticeBusy || chatBusy;
   const frameSrc = preview ? frameAddress(preview, reloads > 0 ? location : path, reloads) : null;
   const frameRef = useRef<HTMLIFrameElement>(null);
   const heldFrameRef = useRef<HTMLIFrameElement | null>(null);
@@ -201,6 +213,38 @@ export function CodeSessionScreen({
           </div>
         </div>
 
+        {notice ? (
+          <div {...stylex.props(styles.notice)} role="status">
+            <span {...stylex.props(styles.noticeText)}>
+              {notice === "edits"
+                ? "This branch has new commits. Commit them, or clear the edit set, before updating."
+                : notice === "fold"
+                  ? "This branch has new commits. The last commit is still folding."
+                  : "This branch has new commits."}
+            </span>
+            {notice === "update" ? (
+              <button
+                type="button"
+                {...stylex.props(styles.noticeButton)}
+                disabled={actionBusy}
+                onClick={onUpdateBranch}
+              >
+                Update branch
+              </button>
+            ) : null}
+            {notice === "edits" ? (
+              <button
+                type="button"
+                {...stylex.props(styles.noticeButton)}
+                disabled={actionBusy}
+                onClick={onClearEdits}
+              >
+                Clear edit set
+              </button>
+            ) : null}
+          </div>
+        ) : null}
+
         <div {...stylex.props(styles.canvas)}>
           {tab === "files" ? (
             <CodeSessionFiles {...files} />
@@ -556,16 +600,26 @@ export default function CodeSessionPage() {
 
   const sessionId = state.kind === "ready" ? state.sessionId : null;
   const [editCount, setEditCount] = useState(0);
+  const [foldPending, setFoldPending] = useState(false);
+  const [baseSha, setBaseSha] = useState<string | null>(null);
+  const [updating, setUpdating] = useState(false);
   const publishCodeSession = usePublishCodeSession();
 
   const refreshEdits = useCallback(() => {
     if (!sessionId) {
       setEditCount(0);
+      setFoldPending(false);
       return;
     }
     void fetchCodeSessionEdits(workspace.id, sessionId)
-      .then((list) => setEditCount(list.files.length))
-      .catch(() => setEditCount(0));
+      .then((list) => {
+        setEditCount(list.files.length);
+        setFoldPending(list.foldPending);
+      })
+      .catch(() => {
+        setEditCount(0);
+        setFoldPending(false);
+      });
   }, [sessionId, workspace.id]);
 
   // The host's dev server does not push a reload through the preview proxy.
@@ -591,9 +645,9 @@ export default function CodeSessionPage() {
       publishCodeSession(null);
       return;
     }
-    publishCodeSession({ sessionId, editCount, refresh: refreshEdits });
+    publishCodeSession({ sessionId, editCount, refresh: refreshEdits, updating });
     return () => publishCodeSession(null);
-  }, [sessionId, editCount, refreshEdits, publishCodeSession]);
+  }, [sessionId, editCount, refreshEdits, publishCodeSession, updating]);
 
   // The agent and the dev server change the checkout, so read it fresh when the list is opened.
   const loadCheckout = useCallback(async () => {
@@ -666,6 +720,7 @@ export default function CodeSessionPage() {
   useEffect(() => {
     let cancelled = false;
     setState({ kind: "loading" });
+    setBaseSha(null);
     setHost({ phase: null, furthest: null, log: "", timedOut: false });
     setPreview(null);
     const stored = storedPreviewPath(workspace.id);
@@ -707,8 +762,9 @@ export default function CodeSessionPage() {
         setState({ kind: "fail", error: text || `request failed: ${res.status}` });
         return;
       }
-      const body = (await res.json()) as { session?: { id?: string } };
+      const body = (await res.json()) as { session?: { id?: string; baseSha?: string } };
       const sessionId = body.session?.id;
+      setBaseSha(typeof body.session?.baseSha === "string" ? body.session.baseSha : null);
       if (!sessionId) {
         setState({ kind: "fail", error: "invalid response" });
         return;
@@ -752,6 +808,78 @@ export default function CodeSessionPage() {
     };
   }, [workspace.id, branch]);
 
+  async function bootAgain(id: string, openPath: string) {
+    setPath(openPath);
+    setLocation(openPath);
+    setReloads(0);
+    setPreview(null);
+    setHost({ phase: null, furthest: null, log: "", timedOut: false });
+    const statusUrl = apiUrl(`/workspaces/${workspace.id}/code-sessions/${id}/status`);
+    const deadline = Date.now() + HOST_WAIT_MS;
+    while (Date.now() < deadline) {
+      const polled = await fetch(statusUrl, {
+        credentials: apiCredentials(),
+        headers: apiHeaders(),
+      }).catch(() => null);
+      if (polled?.ok) {
+        const status = (await polled.json()) as { phase: HostPhase; log: string };
+        setHost((current) => ({
+          phase: status.phase,
+          furthest:
+            status.phase === "installing" || status.phase === "starting"
+              ? status.phase
+              : current.furthest,
+          log: status.log,
+          timedOut: false,
+        }));
+        if (status.phase === "ready") {
+          const entry = await requestPreview(workspace.id, id);
+          if (entry) setPreview(entry);
+          else setState({ kind: "fail", error: "The preview could not be opened." });
+          return;
+        }
+        if (status.phase === "failed" || status.phase === "stopped") return;
+      }
+      await new Promise((resolve) => setTimeout(resolve, STATUS_POLL_MS));
+    }
+    setHost((current) => ({ ...current, timedOut: true }));
+  }
+
+  async function onUpdateBranch() {
+    if (!sessionId || updating) return;
+    setUpdating(true);
+    try {
+      const result = await updateCodeSessionBranch(workspace.id, sessionId);
+      setBaseSha(result.baseSha);
+      await bootAgain(sessionId, location);
+    } catch {
+      // The checkout stayed on its commit, and the preview that is up stays up.
+    } finally {
+      setUpdating(false);
+      refreshEdits();
+    }
+  }
+
+  function onClearEdits() {
+    if (!sessionId || updating) return;
+    const confirmed = window.confirm(
+      "Clear the edit set? The files go back to this session's commit. The chat stays.",
+    );
+    if (!confirmed) return;
+    setUpdating(true);
+    void (async () => {
+      try {
+        await clearCodeSessionEdits(workspace.id, sessionId);
+        await bootAgain(sessionId, location);
+      } catch {
+        // The edit set is still there.
+      } finally {
+        setUpdating(false);
+        refreshEdits();
+      }
+    })();
+  }
+
   async function openInNewTab() {
     if (state.kind !== "ready") return;
     // The iframe's cookie is partitioned under Studio, so a new tab needs its own ticket.
@@ -803,6 +931,19 @@ export default function CodeSessionPage() {
         onSelect: (path) => void selectFile(path),
       }}
       chat={chatColumn}
+      notice={
+        updating
+          ? null
+          : branchNoticeKind({
+              baseSha,
+              headSha: git?.head?.sha ?? null,
+              editCount,
+              foldPending,
+            })
+      }
+      noticeBusy={updating}
+      onUpdateBranch={() => void onUpdateBranch()}
+      onClearEdits={onClearEdits}
       previewSize={previewSize}
       onPreviewSize={(size) => {
         setPreviewSize(size);
@@ -940,6 +1081,38 @@ const styles = stylex.create({
     backgroundColor: colors.text,
     opacity: { default: 1, ":disabled": 0.3 },
   },
+  notice: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: space.md,
+    paddingInline: space.md,
+    paddingBlock: space.sm,
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: colors.border,
+    backgroundColor: colors.bgSurface,
+  },
+  noticeText: {
+    fontSize: type.sm,
+    color: colors.text,
+  },
+  noticeButton: {
+    flexShrink: 0,
+    font: "inherit",
+    fontSize: type.xs,
+    fontWeight: 500,
+    cursor: { default: "pointer", ":disabled": "default" },
+    paddingBlock: "4px",
+    paddingInline: space.sm,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.sm,
+    color: colors.text,
+    backgroundColor: colors.bgPanelInset,
+    opacity: { default: 1, ":disabled": 0.4 },
+  },
   stage: {
     display: "flex",
     flex: 1,

package/src/pages/DocEditorPage.tsx

@@ -5,6 +5,7 @@ import { useOutletContext, useParams, useSearchParams, Link, useNavigate } from
 import * as stylex from "@stylexjs/stylex";
 import {
   fetchDoc,
+  fetchDocs,
   notifyTreeChanged,
   type TreeChangeDetail,
   createPreviewTicket,
@@ -17,8 +18,11 @@ import {
   type SchemaPayload,
   type SchemaField,
 } from "../api";
-import { resolveFieldInput, useStudioDefinition } from "../define-studio";
-import { MediaFieldInput } from "./MediaFieldInput";
+import { FieldControl } from "../fields/FieldControl";
+import { loadRelationDocuments } from "../fields/load-relation-documents";
+import { omitField } from "../fields/omit-field";
+import { relationTargets } from "../fields/relation-targets";
+import { useReplicaState } from "../replica/useReplica";
 import { useSetEditorActions } from "../chrome/EditorActionsContext";
 import {
   DOC_CHANGED_EVENT,
@@ -130,48 +134,6 @@ function emptyFrontmatter(model: SchemaPayload["models"][number] | undefined) {
   return out;
 }
 
-function JsonField({
-  value,
-  kind,
-  readOnly,
-  onValidChange,
-}: {
-  value: unknown;
-  kind: "object" | "array";
-  readOnly?: boolean;
-  onValidChange: (next: unknown) => void;
-}) {
-  const serialized = JSON.stringify(value ?? (kind === "array" ? [] : {}), null, 2);
-  const [draft, setDraft] = useState(serialized);
-  const [focused, setFocused] = useState(false);
-  const [invalid, setInvalid] = useState(false);
-  useEffect(() => {
-    if (!focused) {
-      setDraft(serialized);
-      setInvalid(false);
-    }
-  }, [serialized, focused]);
-  return (
-    <Textarea
-      value={draft}
-      readOnly={readOnly}
-      aria-invalid={invalid || undefined}
-      onFocus={() => setFocused(true)}
-      onBlur={() => setFocused(false)}
-      onChange={(e) => {
-        const next = e.target.value;
-        setDraft(next);
-        try {
-          onValidChange(JSON.parse(next || (kind === "array" ? "[]" : "{}")));
-          setInvalid(false);
-        } catch {
-          setInvalid(true);
-        }
-      }}
-    />
-  );
-}
-
 /** Status-bar label for the doc's state against the branch HEAD. */
 export function docStatusLabel(status: DocStatus | null): string | null {
   if (status === null) return null;
@@ -202,7 +164,31 @@ export function DocEditorPage() {
   const [docFormat, setDocFormat] = useState<"mdx" | "page">("mdx");
   const [fieldKinds, setFieldKinds] = useState<Record<string, string>>({});
   const [fieldDefs, setFieldDefs] = useState<Record<string, SchemaField>>({});
-  const studio = useStudioDefinition();
+  const replica = useReplicaState();
+  const objects = useMemo(
+    () => replica.checkout(workspace.id)?.schema?.payload.objects ?? [],
+    [replica, workspace.id],
+  );
+  const relationTargetTypes = useMemo(() => {
+    const targets = new Set<string>();
+    const groups: Record<string, SchemaField>[] = [];
+    if (model?.fields) groups.push(model.fields);
+    for (const block of blocks) {
+      if (block.fields) groups.push(block.fields);
+    }
+    for (const block of richtext) {
+      if (block.fields) groups.push(block.fields);
+    }
+    for (const fields of groups) {
+      for (const type of relationTargets(fields, models, objects)) {
+        targets.add(type);
+      }
+    }
+    return [...targets].sort();
+  }, [model, blocks, richtext, models, objects]);
+  const [documentLists, setDocumentLists] = useState<
+    Record<string, Array<{ slug: string; frontmatter: Record<string, unknown> }>> | undefined
+  >(undefined);
   const [parseFailed, setParseFailed] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [status, setStatus] = useState<string | null>(null);
@@ -305,6 +291,31 @@ export function DocEditorPage() {
     };
   }, [frameIdentity, previewPath, workspaceId, siteUrl, branch, tree]);
 
+  useEffect(() => {
+    if (relationTargetTypes.length === 0) {
+      setDocumentLists({});
+      return;
+    }
+    let cancelled = false;
+    setDocumentLists(undefined);
+    void loadRelationDocuments(
+      relationTargetTypes,
+      async () => (await fetchDocs(workspaceId)).docs,
+      async (relationType, relationSlug) => ({
+        frontmatter: (await fetchDoc(workspaceId, relationType, relationSlug)).doc.frontmatter,
+      }),
+    )
+      .then((loaded) => {
+        if (!cancelled) setDocumentLists(loaded);
+      })
+      .catch(() => {
+        if (!cancelled) setDocumentLists({});
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [workspaceId, type, slug, relationTargetTypes.join("\0")]);
+
   useEffect(() => {
     setPreviewLoading(true);
   }, [previewUrl]);
@@ -1103,55 +1114,33 @@ export function DocEditorPage() {
                 </Text>
               ) : (
                 detailNames.map((name) => {
-                  const kind = fieldKinds[name];
-                  const composite = kind === "object" || kind === "array";
-                  const CustomInput = resolveFieldInput(studio, fieldDefs[name]);
+                  const field = fieldDefs[name]!;
                   return (
                     <Field key={name} label={fieldLabel(name)}>
-                      {CustomInput ? (
-                        <CustomInput
-                          name={name}
-                          field={fieldDefs[name]!}
-                          value={frontmatter[name]}
-                          readOnly={aiEditing || parseFailed}
-                          onChange={(next) => {
-                            markEdited();
-                            setFrontmatter((prev) => ({ ...prev, [name]: next }));
-                          }}
-                        />
-                      ) : kind === "media" ? (
-                        <MediaFieldInput
-                          name={name}
-                          value={frontmatter[name]}
-                          readOnly={aiEditing || parseFailed}
-                          onChange={(next) => {
-                            markEdited();
-                            setFrontmatter((prev) => ({ ...prev, [name]: next }));
-                          }}
-                        />
-                      ) : composite ? (
-                        <JsonField
-                          kind={kind === "array" ? "array" : "object"}
-                          value={frontmatter[name]}
-                          readOnly={aiEditing || parseFailed}
-                          onValidChange={(next) => {
-                            markEdited();
-                            setFrontmatter((prev) => ({ ...prev, [name]: next }));
-                          }}
-                        />
-                      ) : (
-                        <Input
-                          value={String(frontmatter[name] ?? "")}
-                          readOnly={aiEditing || parseFailed}
-                          onChange={(e) => {
-                            markEdited();
-                            setFrontmatter((prev) => ({
-                              ...prev,
-                              [name]: e.target.value,
-                            }));
-                          }}
-                        />
-                      )}
+                      <FieldControl
+                        name={name}
+                        field={field}
+                        value={frontmatter[name]}
+                        models={models}
+                        objects={objects}
+                        documentLists={documentLists}
+                        readOnly={aiEditing || parseFailed}
+                        blocksEditor={({ value, readOnly: blocksReadOnly, onChange: onBlocksChange }) => (
+                          <BlocksList
+                            blocks={blocksFromFrontmatter(value)}
+                            catalog={blocks}
+                            models={models}
+                            objects={objects}
+                            documentLists={documentLists}
+                            readOnly={blocksReadOnly}
+                            onChange={onBlocksChange}
+                          />
+                        )}
+                        onChange={(next) => {
+                          markEdited();
+                          setFrontmatter((prev) => omitField(prev, name, next));
+                        }}
+                      />
                     </Field>
                   );
                 })
@@ -1160,6 +1149,9 @@ export function DocEditorPage() {
                 <BlocksList
                   blocks={blocksFromFrontmatter(frontmatter[blocksField])}
                   catalog={blocks}
+                  models={models}
+                  objects={objects}
+                  documentLists={documentLists}
                   readOnly={aiEditing || parseFailed}
                   focusBlock={blockFocus}
                   onChange={(next) => {
@@ -1171,6 +1163,9 @@ export function DocEditorPage() {
                 <BodyField
                   value={body}
                   catalog={richtext}
+                  models={models}
+                  objects={objects}
+                  documentLists={documentLists}
                   readOnly={aiEditing || parseFailed}
                   onChange={(value) => {
                     markEdited();

package/src/pages/RenderedBody.tsx

@@ -9,7 +9,7 @@ import {
   type ReactNode,
 } from "react";
 import * as stylex from "@stylexjs/stylex";
-import type { BlockSnapshot } from "../api";
+import type { BlockSnapshot, SchemaField } from "../api";
 import { contentBlockFields, contentBlockLabel, contentBlockProps } from "../content-blocks";
 import { colors, radius, space } from "../styles/tokens.stylex";
 import {
@@ -40,16 +40,28 @@ export type RenderedBodyHandle = {
 
 const BODY_HOST = "body";
 
+type ModelRef = { type: string; external?: boolean; fields?: Record<string, SchemaField> };
+type RelationDocumentLists = Record<
+  string,
+  Array<{ slug: string; frontmatter: Record<string, unknown> }>
+>;
+
 export const RenderedBody = forwardRef<
   RenderedBodyHandle,
   {
     value: string;
     catalog?: Array<BlockSnapshot & { label?: string }>;
+    models: ModelRef[];
+    objects?: Array<{ name: string; fields: Record<string, SchemaField> }>;
+    documentLists?: RelationDocumentLists;
     readOnly?: boolean;
     labelledBy: string;
     onChange: (value: string) => void;
   }
->(function RenderedBody({ value, catalog = [], readOnly, labelledBy, onChange }, ref) {
+>(function RenderedBody(
+  { value, catalog = [], models, objects = [], documentLists, readOnly, labelledBy, onChange },
+  ref,
+) {
   const local = useRef(value);
   const hosts = useRef(new Map<string, HTMLElement>());
   const linking = useRef(false);
@@ -218,6 +230,9 @@ export const RenderedBody = forwardRef<
           title={contentBlockLabel(settings.def.name)}
           fields={contentBlockFields(settings.def)}
           value={contentBlockProps(settings.block.markdown, settings.def.name)}
+          models={models}
+          objects={objects}
+          documentLists={documentLists}
           readOnly={readOnly}
           onOpenChange={(open) => {
             if (!open) setSettingsId(null);

package/src/pages/branch-notice.ts

@@ -0,0 +1,16 @@
+// packages/studio/src/pages/branch-notice.ts
+
+export type BranchNoticeKind = "update" | "edits" | "fold";
+
+/** What to show when this session's commit is behind the branch tip. */
+export function branchNoticeKind(input: {
+  baseSha: string | null;
+  headSha: string | null;
+  editCount: number;
+  foldPending: boolean;
+}): BranchNoticeKind | null {
+  if (!input.baseSha || !input.headSha || input.baseSha === input.headSha) return null;
+  if (input.editCount > 0) return "edits";
+  if (input.foldPending) return "fold";
+  return "update";
+}

package/src/pages/code-session-context.tsx

@@ -13,6 +13,8 @@ export type CodeSessionContextValue = {
   sessionId: string;
   editCount: number;
   refresh: () => void;
+  /** The checkout is being replaced. Chat waits until the host boots. */
+  updating?: boolean;
 };
 
 const CodeSessionContext = createContext<CodeSessionContextValue | null>(null);

package/src/shell-resets.css

@@ -150,10 +150,20 @@ html[data-theme="dark"]:has(.backmatter-studio)
   outline-color: #fafafa;
 }
 
+[data-no-ring]:focus,
 [data-no-ring]:focus-visible {
   outline: none;
+  outline-offset: 0;
+  box-shadow: none;
 }
 
+:is(
+    .backmatter-studio,
+    [data-backmatter-panel],
+    [data-base-ui-portal],
+    [data-selection-bar]
+  )
+  [data-no-ring]:focus,
 :is(
     .backmatter-studio,
     [data-backmatter-panel],
@@ -161,8 +171,13 @@ html[data-theme="dark"]:has(.backmatter-studio)
     [data-selection-bar]
   )
   [data-no-ring]:focus-visible,
+html[data-theme="dark"]:has(.backmatter-studio)
+  :is(.backmatter-studio, [data-base-ui-portal], [data-selection-bar])
+  [data-no-ring]:focus,
 html[data-theme="dark"]:has(.backmatter-studio)
   :is(.backmatter-studio, [data-base-ui-portal], [data-selection-bar])
   [data-no-ring]:focus-visible {
   outline: none;
+  outline-offset: 0;
+  box-shadow: none;
 }