@backmatter/studio 0.0.16 → 0.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backmatter/studio",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "The Backmatter editing surface: document editor, AI chat, publish. Mounted on your site or hosted on the dashboard.",
   "type": "module",
   "publishConfig": {
@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@ai-sdk/react": "^4.0.100",
-    "@backmatter/core": "^0.0.33",
+    "@backmatter/core": "^0.0.35",
     "@base-ui/react": "^1.6.0",
     "@central-icons-react/round-outlined-radius-2-stroke-1.5": "1.2.15",
     "@dnd-kit/abstract": "^0.5.0",

package/src/api.ts

@@ -350,12 +350,20 @@ export function unbindGithub(workspaceId: string) {
 
 export type SchemaField = {
   kind: string;
+  multiple?: boolean;
   required?: boolean;
   relationTo?: string;
+  to?: "internal" | "external";
+  models?: string[];
   object?: string;
   fields?: Record<string, SchemaField>;
   /** Studio input name from `field.text({ input })`; see `defineStudio`. */
   input?: string;
+  options?: string[];
+  min?: number;
+  max?: number;
+  step?: number;
+  where?: Record<string, string | number | boolean>;
 };
 
 export type BlockSnapshot = {
@@ -496,6 +504,20 @@ export function fetchCodeSessionEdits(workspaceId: string, sessionId: string) {
   );
 }
 
+export function updateCodeSessionBranch(workspaceId: string, sessionId: string) {
+  return api<{ ok: true; baseSha: string }>(
+    `/workspaces/${workspaceId}/code-sessions/${sessionId}/update`,
+    { method: "POST" },
+  );
+}
+
+export function clearCodeSessionEdits(workspaceId: string, sessionId: string) {
+  return api<{ ok: true; baseSha: string }>(
+    `/workspaces/${workspaceId}/code-sessions/${sessionId}/clear-edits`,
+    { method: "POST" },
+  );
+}
+
 export function commitCodeSessionEdits(
   workspaceId: string,
   sessionId: string,

package/src/chat/ChatProvider.tsx

@@ -163,6 +163,12 @@ export function useChatSession(): ChatSessionValue {
   return ctx;
 }
 
+/** False outside a chat provider. True while a turn is submitted or streaming. */
+export function useChatBusy(): boolean {
+  const ctx = useContext(ChatSessionContext);
+  return ctx?.status === "streaming" || ctx?.status === "submitted";
+}
+
 // ---------------------------------------------------------------------------
 
 const modelStorageKey = (ws: string) => `backmatter-chat-model:${ws}`;

package/src/chat/Composer.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react
 import * as stylex from "@stylexjs/stylex";
 import { docKey, type DocRef } from "../chrome/EditorFocusContext";
 import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { useCodeSessionContext } from "../pages/code-session-context";
 import { Tooltip } from "../ui/Tooltip";
 import { useChatSession, useChatUI } from "./ChatProvider";
 import { MentionPopover, type MentionKey } from "./MentionPopover";
@@ -64,7 +65,8 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
   const ref = useRef<HTMLTextAreaElement>(null);
   const boxRef = useRef<HTMLDivElement>(null);
   const mentionKeys = useRef<((key: MentionKey) => void) | null>(null);
-  const busy = session.status === "streaming" || session.status === "submitted";
+  const updating = useCodeSessionContext()?.updating === true;
+  const busy = session.status === "streaming" || session.status === "submitted" || updating;
   const canSend = text.trim().length > 0 && !busy && ui.aiAvailable === true;
 
   // Auto-grow. Measuring must not leave a 1px swing: that resizes the thread

package/src/chrome/Toast.tsx

@@ -0,0 +1,115 @@
+// packages/studio/src/chrome/Toast.tsx
+import * as stylex from "@stylexjs/stylex";
+import { colors, radius, space, type, z } from "../styles/tokens.stylex";
+
+const hover = "@media (hover: hover)";
+
+export type ToastProblem = {
+  file: string;
+  text: string;
+};
+
+/** A dismissible notice that sits over the page, not in the status bar. */
+export function Toast({
+  title,
+  problems,
+  onDismiss,
+}: {
+  title: string;
+  problems: ToastProblem[];
+  onDismiss: () => void;
+}) {
+  return (
+    <div role="alert" {...stylex.props(styles.toast)}>
+      <div {...stylex.props(styles.head)}>
+        <p {...stylex.props(styles.title)}>{title}</p>
+        <button type="button" onClick={onDismiss} {...stylex.props(styles.dismiss)}>
+          Dismiss
+        </button>
+      </div>
+      <ul {...stylex.props(styles.list)}>
+        {problems.map((problem, index) => (
+          <li key={`${problem.file}-${index}`} {...stylex.props(styles.item)}>
+            {problem.file ? <span {...stylex.props(styles.file)}>{problem.file}</span> : null}
+            <span {...stylex.props(styles.text)}>{problem.text}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+const styles = stylex.create({
+  toast: {
+    position: "fixed",
+    zIndex: z.tooltip,
+    top: "44px",
+    right: space.xl,
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    gap: space.md,
+    width: "min(380px, calc(100vw - 32px))",
+    maxHeight: "min(420px, calc(100vh - 64px))",
+    padding: space.lg,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgSurface,
+    boxShadow: "0 8px 24px rgba(24, 24, 27, 0.12)",
+    color: colors.text,
+  },
+  head: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: space.lg,
+  },
+  title: {
+    margin: 0,
+    fontSize: type.sm,
+    fontWeight: 600,
+    color: colors.danger,
+  },
+  list: {
+    margin: 0,
+    padding: 0,
+    overflow: "auto",
+    listStyle: "none",
+    display: "flex",
+    flexDirection: "column",
+    gap: space.md,
+  },
+  item: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    minWidth: 0,
+  },
+  file: {
+    fontFamily: type.mono,
+    fontSize: type.xs,
+    color: colors.text,
+  },
+  text: {
+    fontSize: type.sm,
+    lineHeight: 1.45,
+    color: colors.textMuted,
+  },
+  dismiss: {
+    flexShrink: 0,
+    margin: 0,
+    padding: 0,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
+    fontSize: type.xs,
+    cursor: "pointer",
+    [hover]: {
+      ":hover": {
+        color: colors.text,
+      },
+    },
+  },
+});

package/src/chrome/WorkspaceStatusBar.tsx

@@ -26,7 +26,6 @@ import {
 import { contentDocPath, isWorkspaceCodePath } from "../workspace-path";
 import { useCodeSessionContext } from "../pages/code-session-context";
 import {
-  commitErrorSummary,
   explainCommitError,
   problemsForRef,
   type CommitErrorView,
@@ -40,7 +39,9 @@ import { useEditorStatus } from "./EditorStatusContext";
 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";
@@ -172,6 +173,7 @@ 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();
@@ -306,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);
     }
@@ -436,6 +440,10 @@ export function WorkspaceStatusBar({ workspaceId }: { workspaceId: string }) {
       : "Commit";
 
   return (
+    <>
+    {pullProblems ? (
+      <Toast title="Pull failed" problems={pullProblems} onDismiss={() => setPullProblems(null)} />
+    ) : null}
     <StatusBar>
       <div {...stylex.props(styles.identity)}>
         {workspaceNav ? (
@@ -595,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}
@@ -810,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/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/{pages/code-session-routes.ts → content-routes.ts}

@@ -1,4 +1,4 @@
-// packages/studio/src/pages/code-session-routes.ts
+// packages/studio/src/content-routes.ts
 import {
   isRoutable,
   isTemplateSlug,
@@ -7,15 +7,15 @@ import {
   type RouteModel,
 } from "@backmatter/core";
 
-export type ContentRouteModel = RouteModel & {
+type ContentFileModel = RouteModel & {
   path: string;
   external?: boolean;
   template?: string;
 };
 
-/** Public routes for the content files in a code session checkout. */
-export function contentRoutes(
-  models: readonly ContentRouteModel[],
+/** Public routes for content files. A file that is not a routable document is skipped. */
+export function routesForContentFiles(
+  models: readonly ContentFileModel[],
   files: readonly string[],
 ): string[] {
   const routes = new Set<string>();
@@ -35,7 +35,7 @@ export function contentRoutes(
 }
 
 /** Routes whose path contains the address query. A blank query keeps the full list. */
-export function matchingRoutes(routes: readonly string[], query: string): string[] {
+export function routesMatching(routes: readonly string[], query: string): string[] {
   const needle = query.trim().toLowerCase();
   if (!needle) return [...routes];
   return routes.filter((route) => route.toLowerCase().includes(needle));