@backmatter/studio 0.0.16 → 0.0.18

package/src/pages/CodeSessionPage.tsx

@@ -1,27 +1,23 @@
 // packages/studio/src/pages/CodeSessionPage.tsx
-import { useCallback, useEffect, useRef, useState, type FormEvent } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { RouteModel } from "@backmatter/core";
 import { useOutletContext } from "react-router";
 import * as stylex from "@stylexjs/stylex";
-import { Combobox } from "@base-ui/react/combobox";
 import {
-  IconArrowRotateClockwise,
-  IconArrowUpRight,
   IconCheckmark1Small,
   IconCrossSmall,
   IconEyeOpen,
   IconFiles,
-  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 { routesForContentFiles } from "../content-routes";
 import { colors, radius, space, type } from "../styles/tokens.stylex";
 import { apiCredentials, apiHeaders, apiUrl } from "../studio-config";
 import { Text } from "../ui/Text";
-import { cx, popup, popupClassName } from "../ui/popup";
 import type { WorkspaceOutletContext } from "../workspace/types";
-import { bootSteps, hostPath, type BootStep, type HostPhase } from "./code-session-boot";
+import { bootSteps, type BootStep, type HostPhase } from "./code-session-boot";
 import {
   frameAddress,
   framedLocation,
@@ -30,12 +26,13 @@ import {
   previewUrl,
   type HostPreview,
 } from "./code-session-frame";
-import { contentRoutes, matchingRoutes } from "./code-session-routes";
+import { PreviewAddress } from "./PreviewAddress";
 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 +77,10 @@ export function CodeSessionScreen({
   models = [],
   files,
   chat,
+  notice = null,
+  noticeBusy = false,
+  onUpdateBranch = () => {},
+  onClearEdits = () => {},
 }: {
   state: OpenState;
   host: HostView;
@@ -108,9 +109,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);
@@ -182,7 +190,7 @@ export function CodeSessionScreen({
             </TabButton>
           </div>
 
-          <AddressBar
+          <PreviewAddress
             path={location}
             enabled={frameSrc !== null && tab === "preview"}
             routes={routes}
@@ -201,6 +209,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} />
@@ -280,170 +320,6 @@ function TabButton({
   );
 }
 
-function AddressBar({
-  path,
-  enabled,
-  routes,
-  routesPending,
-  onOpenRoutes,
-  onPath,
-  onReload,
-  onOpen,
-}: {
-  path: string;
-  enabled: boolean;
-  routes: readonly string[];
-  routesPending: boolean;
-  onOpenRoutes?: () => void;
-  onPath: (path: string) => void;
-  onReload: () => void;
-  onOpen: () => void;
-}) {
-  const [query, setQuery] = useState<string | null>(null);
-  const [open, setOpen] = useState(false);
-  const picked = useRef(false);
-  const fieldRef = useRef<HTMLButtonElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const shown = query ? matchingRoutes(routes, query) : [...routes];
-
-  useEffect(() => {
-    if (!open) return;
-    const input = inputRef.current;
-    input?.focus();
-    input?.select();
-  }, [open]);
-
-  return (
-    <div {...stylex.props(styles.address)}>
-      <button
-        type="button"
-        aria-label="Reload preview"
-        disabled={!enabled}
-        onClick={onReload}
-        {...stylex.props(styles.iconButton)}
-      >
-        <IconArrowRotateClockwise size={14} ariaHidden />
-      </button>
-      <Combobox.Root
-        items={shown}
-        filteredItems={shown}
-        inputValue={query ?? ""}
-        disabled={!enabled}
-        open={open}
-        value={routes.includes(path) ? path : null}
-        onOpenChange={(next) => {
-          if (!enabled && next) return;
-          setOpen(next);
-          if (next) onOpenRoutes?.();
-          else setQuery(null);
-        }}
-        onInputValueChange={(value, details) => {
-          if (details.reason === "input-change" || details.reason === "input-clear") {
-            setQuery(value);
-          }
-        }}
-        onValueChange={(value) => {
-          if (typeof value !== "string") return;
-          picked.current = true;
-          setQuery(null);
-          onPath(hostPath(value));
-          queueMicrotask(() => {
-            picked.current = false;
-          });
-        }}
-      >
-        <Combobox.Trigger
-          ref={fieldRef}
-          aria-label="Preview path"
-          disabled={!enabled}
-          data-no-ring
-          className={cx(styles.addressTrigger)}
-        >
-          <IconGlobe size={13} ariaHidden />
-          <span {...stylex.props(styles.addressPath)}>{path}</span>
-        </Combobox.Trigger>
-        <Combobox.Portal>
-          <Combobox.Positioner
-            anchor={fieldRef}
-            side="bottom"
-            align="start"
-            sideOffset={6}
-            className={cx(popup.positioner)}
-          >
-            <Combobox.Popup
-              aria-label="Pages"
-              className={(state) => popupClassName(state, styles.routePopup)}
-            >
-              <form
-                onSubmit={(event: FormEvent<HTMLFormElement>) => {
-                  event.preventDefault();
-                  const fromList = picked.current;
-                  picked.current = false;
-                  if (fromList) return;
-                  const typed = event.currentTarget.querySelector("input")?.value;
-                  if (typed?.trim()) onPath(hostPath(typed));
-                  setOpen(false);
-                  setQuery(null);
-                }}
-              >
-                <Combobox.Input
-                  ref={inputRef}
-                  placeholder="Find a page"
-                  aria-label="Find a page"
-                  spellCheck={false}
-                  autoComplete="off"
-                  data-no-ring
-                  className={cx(popup.quietInput, styles.routeSearch)}
-                  onKeyDown={(event) => {
-                    if (event.key !== "Enter") return;
-                    // A highlighted row is chosen by the combobox. A bare Enter goes to the typed path.
-                    if (event.currentTarget.getAttribute("aria-activedescendant")) return;
-                    const typed = event.currentTarget.value.trim();
-                    if (!typed) return;
-                    picked.current = true;
-                    onPath(hostPath(typed));
-                  }}
-                />
-              </form>
-              <div {...stylex.props(popup.separator)} />
-              <Combobox.Empty className={cx(popup.empty)}>
-                {routesPending ? "Loading pages" : "No pages"}
-              </Combobox.Empty>
-              <Combobox.List className={cx(styles.routeList)}>
-                {(route: string) => (
-                  <Combobox.Item
-                    key={route}
-                    value={route}
-                    className={(state) =>
-                      cx(
-                        popup.item,
-                        styles.routeItem,
-                        state.highlighted && popup.itemHighlighted,
-                        state.selected && popup.itemSelected,
-                      )
-                    }
-                  >
-                    {route}
-                  </Combobox.Item>
-                )}
-              </Combobox.List>
-            </Combobox.Popup>
-          </Combobox.Positioner>
-        </Combobox.Portal>
-      </Combobox.Root>
-      <button
-        type="button"
-        aria-label="Open preview in a new tab"
-        disabled={!enabled}
-        onClick={onOpen}
-        {...stylex.props(styles.iconButton)}
-      >
-        <IconArrowUpRight size={14} ariaHidden />
-      </button>
-    </div>
-  );
-}
-
 function BootCard({
   title,
   steps,
@@ -556,16 +432,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 +477,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 +552,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 +594,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 +640,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.
@@ -792,7 +752,7 @@ export default function CodeSessionPage() {
       live={live}
       onReload={() => navigate(location)}
       onOpen={() => void openInNewTab()}
-      routes={contentRoutes(models, fileList ?? [])}
+      routes={routesForContentFiles(models, fileList ?? [])}
       routesPending={routesPending}
       onOpenRoutes={openRoutes}
       files={{
@@ -803,6 +763,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 +913,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,
@@ -988,76 +993,9 @@ const styles = stylex.create({
     backgroundColor: colors.bgSurface,
     boxShadow: "0 1px 2px rgba(0, 0, 0, 0.08)",
   },
-  address: {
-    display: "flex",
-    alignItems: "center",
-    gap: space.xs,
-    minWidth: 0,
-  },
   sizeSwitch: {
     justifySelf: "end",
   },
-  addressTrigger: {
-    display: "flex",
-    flex: 1,
-    alignItems: "center",
-    gap: space.xs,
-    minWidth: 0,
-    height: "28px",
-    paddingInline: space.sm,
-    borderWidth: 0,
-    borderRadius: "999px",
-    font: "inherit",
-    textAlign: "left",
-    cursor: { default: "pointer", ":disabled": "default" },
-    color: { default: colors.textMuted, ":disabled": colors.textMuted },
-    backgroundColor: colors.bgPanelInset,
-  },
-  addressPath: {
-    flex: 1,
-    minWidth: 0,
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    fontFamily: type.mono,
-    fontSize: type.xs,
-    color: colors.text,
-  },
-  routeSearch: {
-    fontFamily: type.mono,
-    fontSize: type.xs,
-  },
-  routePopup: {
-    width: "var(--anchor-width)",
-    minWidth: "220px",
-    maxHeight: "min(320px, var(--available-height))",
-    display: "flex",
-    flexDirection: "column",
-    overflowY: "hidden",
-  },
-  routeList: {
-    minHeight: 0,
-    overflowY: "auto",
-  },
-  routeItem: {
-    fontFamily: type.mono,
-  },
-  iconButton: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0,
-    width: "28px",
-    height: "28px",
-    borderWidth: 0,
-    borderRadius: radius.sm,
-    cursor: { default: "pointer", ":disabled": "default" },
-    color: { default: colors.textMuted, ":disabled": colors.border },
-    backgroundColor: {
-      default: "transparent",
-      [hover]: { default: null, ":hover:not(:disabled)": colors.bgHover },
-    },
-  },
   canvas: {
     position: "relative",
     display: "flex",