@backmatter/studio 0.0.5 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backmatter/studio",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "The Backmatter editing surface: document editor, AI chat, publish. Mounted on your site or hosted on the dashboard.",
   "type": "module",
   "publishConfig": {
@@ -52,8 +52,9 @@
   },
   "dependencies": {
     "@ai-sdk/react": "^4.0.100",
-    "@backmatter/core": "^0.0.21",
+    "@backmatter/core": "^0.0.24",
     "@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",
     "@dnd-kit/react": "^0.5.0",
     "@fontsource/geist-mono": "^5.3.0",

package/src/App.tsx

@@ -19,6 +19,7 @@ import { NewWorkspacePage } from "./pages/NewWorkspacePage";
 import { AcceptInvitePage } from "./pages/AcceptInvitePage";
 import { LegacyWorkspaceRedirect } from "./pages/LegacyWorkspaceRedirect";
 import { UserSettingsPage } from "./pages/UserSettingsPage";
+import { CliAuthorizePage } from "./pages/CliAuthorizePage";
 import { BootstrapSplash } from "./replica/BootstrapSplash";
 import { ReplicaGate, ReplicaProvider } from "./replica/ReplicaProvider";
 import { replicaStore } from "./replica/instance";
@@ -137,6 +138,7 @@ function AppInner() {
             <Route path="/workspaces/new" element={<NewWorkspacePage />} />
             <Route path="/invite" element={<AcceptInvitePage />} />
             <Route path="/account" element={<UserSettingsPage />} />
+            <Route path="/cli/authorize" element={<CliAuthorizePage />} />
             <Route
               path="/workspaces/:workspaceId/*"
               element={<LegacyWorkspaceRedirect />}

package/src/WorkspaceRoutes.tsx

@@ -6,6 +6,7 @@ import { WorkspaceLayout } from "./pages/WorkspaceLayout";
 import { WorkspaceHomeRedirect } from "./pages/WorkspaceHomeRedirect";
 import { TypeDocsPage } from "./pages/TypeDocsPage";
 import { SettingsGeneralPage } from "./pages/SettingsGeneralPage";
+import { SettingsUsagePage } from "./pages/SettingsUsagePage";
 import { SettingsGithubPage } from "./pages/SettingsGithubPage";
 import { SettingsIndexRedirect, SettingsLayout } from "./pages/SettingsLayout";
 import { SettingsSchemaPage } from "./pages/SettingsSchemaPage";
@@ -13,6 +14,7 @@ import { SettingsMcpPage } from "./pages/SettingsMcpPage";
 import { SettingsUsersPage } from "./pages/SettingsUsersPage";
 import { GithubConnectPage } from "./pages/GithubConnectPage";
 import { DocEditorPage } from "./pages/DocEditorPage";
+import { MediaGalleryPage } from "./pages/MediaGalleryPage";
 
 /**
  * Returns `<Route>` elements. Spread the result inside a `<Routes>`; react-router
@@ -26,6 +28,7 @@ export function workspaceRoutes() {
       <Route element={<SettingsLayout />}>
         <Route path="settings" element={<SettingsIndexRedirect />} />
         <Route path="settings/general" element={<SettingsGeneralPage />} />
+        <Route path="settings/usage" element={<SettingsUsagePage />} />
         <Route path="settings/github" element={<SettingsGithubPage />} />
         <Route path="settings/schema" element={<SettingsSchemaPage />} />
         <Route path="settings/mcp" element={<SettingsMcpPage />} />
@@ -33,6 +36,7 @@ export function workspaceRoutes() {
         <Route path="github" element={<GithubConnectPage />} />
       </Route>
       <Route path="content/:type/:docSlug" element={<DocEditorPage />} />
+      <Route path="media" element={<MediaGalleryPage />} />
     </Route>
   );
 }

package/src/api.ts

@@ -169,10 +169,49 @@ export type WorkspaceDetail = {
   hasHostToken: boolean;
 };
 
+export type WorkspaceUsage = {
+  period: string;
+  dataRequests: {
+    public: number;
+    studio: number;
+    replica: number;
+    preview: number;
+    ai: number;
+  };
+  work: {
+    commits: number;
+    commitFiles: number;
+    imports: number;
+    importFiles: number;
+    saves: number;
+    mediaTransforms: number;
+  };
+  ai: { inputTokens: number; outputTokens: number };
+  members: number;
+  mediaBytes: number;
+};
+
+export type CatalogMedia = {
+  id: string;
+  filename: string;
+  contentType: string;
+  byteSize: number;
+  width: number;
+  height: number;
+  url: string;
+  thumbUrl: string;
+  variants: Record<string, string>;
+  createdAt: string;
+};
+
 export function fetchWorkspace(workspaceId: string) {
   return api<{ workspace: WorkspaceDetail }>(`/workspaces/${workspaceId}`);
 }
 
+export function fetchWorkspaceUsage(workspaceId: string) {
+  return api<WorkspaceUsage>(`/workspaces/${workspaceId}/usage`);
+}
+
 export function fetchReplica(workspaceId: string, cache?: ReplicaCache) {
   const query = cache ? `?${replicaQuery(cache)}` : "";
   return api<ReplicaBody>(`/workspaces/${workspaceId}/replica${query}`);
@@ -829,6 +868,71 @@ export function deleteWorkspaceMcp(workspaceId: string, id: string) {
   });
 }
 
+export function fetchMedia(
+  workspaceId: string,
+  input: { query?: string; cursor?: string } = {},
+) {
+  const params = new URLSearchParams();
+  if (input.query) params.set("q", input.query);
+  if (input.cursor) params.set("cursor", input.cursor);
+  const query = params.size ? `?${params}` : "";
+  return api<{ total: number; media: CatalogMedia[]; nextCursor: string | null }>(
+    `/workspaces/${workspaceId}/media${query}`,
+  );
+}
+
+export function uploadMedia(
+  workspaceId: string,
+  file: File,
+  onProgress?: (fraction: number) => void,
+) {
+  return new Promise<{ media: CatalogMedia }>((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", apiUrl(`/workspaces/${workspaceId}/media`));
+    xhr.withCredentials = apiCredentials() === "include";
+    for (const [name, value] of Object.entries(apiHeaders())) {
+      xhr.setRequestHeader(name, value);
+    }
+    xhr.upload.onprogress = (event) => {
+      if (!onProgress || !event.lengthComputable || event.total <= 0) return;
+      onProgress(event.loaded / event.total);
+    };
+    xhr.onerror = () => reject(new Error("Upload failed"));
+    xhr.onload = () => {
+      const payload = (() => {
+        try {
+          return JSON.parse(xhr.responseText) as { media?: CatalogMedia; error?: string };
+        } catch {
+          return {};
+        }
+      })();
+      if (xhr.status === 401 || xhr.status === 426) {
+        reportUnauthorized(xhr.status, payload.error);
+      }
+      if (xhr.status < 200 || xhr.status >= 300 || !payload.media) {
+        const err = new Error(payload.error ?? `upload failed: ${xhr.status}`) as ApiError;
+        err.status = xhr.status;
+        err.code = payload.error;
+        reject(err);
+        return;
+      }
+      onProgress?.(1);
+      resolve({ media: payload.media });
+    };
+    const body = new FormData();
+    body.set("file", file);
+    xhr.send(body);
+  });
+}
+
+export function deleteMedia(workspaceId: string, mediaId: string) {
+  return api<{ ok: true }>(`/workspaces/${workspaceId}/media/${mediaId}`, { method: "DELETE" });
+}
+
+export function approveCliLogin(id: string) {
+  return api<{ ok: true }>(`/cli/login/${id}/approve`, { method: "POST" });
+}
+
 export function testWorkspaceMcp(workspaceId: string, id: string) {
   return api<{ connector: McpConnector }>(
     `/workspaces/${workspaceId}/mcp/${id}/test`,

package/src/chat/ChatMessage.tsx

@@ -12,8 +12,10 @@ import {
   bindDocsPlaceholders,
   isCommitTool,
   isWriteTool,
+  presentedChangeStatus,
   replaceEchoedDocList,
   splitDocsPlaceholders,
+  stackChanges,
   toolLabel,
   trimPartialPlaceholder,
   type WriteToolOutput,
@@ -137,9 +139,13 @@ export function ChatMessage({
   }
 
   const changeIds = session.changeIdsForMessage(message);
+  const stack = stackChanges(session.messages, session.changes);
   const applied = changeIds
     .map((id) => session.changes[id])
-    .filter((c): c is ChatChangeSummary => Boolean(c) && c!.status === "applied");
+    .filter(
+      (c): c is ChatChangeSummary =>
+        Boolean(c) && presentedChangeStatus(c, stack) === "applied",
+    );
   const streaming = isLast && live;
 
   async function act(id: string, fn: () => Promise<void>) {
@@ -242,6 +248,7 @@ export function ChatMessage({
             tp.state === "output-available" && !inlined.has(i) && !streaming
               ? docListFromTool(name, tp.output)
               : null;
+          const viewStatus = change ? presentedChangeStatus(change, stack) : null;
           return (
             <div key={tp.toolCallId} {...stylex.props(styles.toolBlock)}>
               <div {...stylex.props(styles.toolRow, failed && styles.toolFailed)}>
@@ -263,9 +270,9 @@ export function ChatMessage({
                   emptyLabel={name === "searchDocs" ? "No matches" : "No documents"}
                 />
               ) : null}
-              {change ? (
+              {change && viewStatus ? (
                 <ChangeCard
-                  change={change}
+                  change={{ ...change, status: viewStatus }}
                   workspaceId={workspaceId}
                   busy={busyId === change.id}
                   canAct={canAct && !streaming}

package/src/chat/ChatPanel.tsx

@@ -252,7 +252,7 @@ const styles = stylex.create({
   },
   panelSite: {
     right: 16,
-    bottom: 64,
+    bottom: "calc(48px + env(safe-area-inset-bottom, 0px))",
     zIndex: 2147483001,
   },
   panelFill: {

package/src/chat/Composer.tsx

@@ -257,6 +257,24 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
             </button>
           </Tooltip>
           <span {...stylex.props(styles.spacer)} />
+          {ui.pointer ? (
+            <Tooltip label={pointing ? "Stop pointing" : "Point at an element on the page"}>
+              <button
+                type="button"
+                aria-label="Point at an element on the page"
+                aria-pressed={pointing}
+                disabled={ui.aiAvailable !== true}
+                onClick={() => {
+                  const next = !pointing;
+                  setPointing(next);
+                  postPointer(next);
+                }}
+                {...stylex.props(styles.iconBtn, pointing && styles.iconBtnActive)}
+              >
+                <PointerIcon />
+              </button>
+            </Tooltip>
+          ) : null}
           {ui.focus ? (
             <Tooltip
               label={
@@ -277,24 +295,6 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
               </button>
             </Tooltip>
           ) : null}
-          {ui.pointer ? (
-            <Tooltip label={pointing ? "Stop pointing" : "Point at an element on the page"}>
-              <button
-                type="button"
-                aria-label="Point at an element on the page"
-                aria-pressed={pointing}
-                disabled={ui.aiAvailable !== true}
-                onClick={() => {
-                  const next = !pointing;
-                  setPointing(next);
-                  postPointer(next);
-                }}
-                {...stylex.props(styles.iconBtn, pointing && styles.iconBtnActive)}
-              >
-                <PointerIcon />
-              </button>
-            </Tooltip>
-          ) : null}
           <ModelPicker />
           {busy ? (
             <Tooltip label="Stop generating">

package/src/chat/chat-helpers.ts

@@ -3,7 +3,7 @@
 // Pure helpers used by chat components. Kept free of StyleX/React so they can
 // be unit tested with `bun test`.
 import { getToolName, isToolUIPart, type UIMessage } from "ai";
-import type { ChatChangeSummary, ChatThread, DocStatus } from "../api";
+import type { ChatChangeSummary, ChatThread, DocStatus, ChatChangeStatus } from "../api";
 import type { DocRef } from "../chrome/EditorFocusContext";
 
 export type WriteToolOutput =
@@ -186,6 +186,63 @@ export function changeIdsInMessage(message: UIMessage): string[] {
   return ids;
 }
 
+export type ChangeStackItem = Pick<
+  ChatChangeSummary,
+  "id" | "locale" | "type" | "slug" | "status" | "createdAt"
+>;
+
+function isLaterChange(a: ChangeStackItem, b: ChangeStackItem) {
+  if (a.createdAt !== b.createdAt) return a.createdAt > b.createdAt;
+  return a.id > b.id;
+}
+
+/**
+ * Status to show on a change card. Edits are already in the working copy, so
+ * only the latest applied-or-kept edit of a document offers Keep and Undo.
+ * An earlier applied edit reads as kept until that later edit is undone.
+ */
+export function presentedChangeStatus(
+  change: ChangeStackItem,
+  all: ChangeStackItem[],
+): ChatChangeStatus {
+  if (change.status !== "applied") return change.status;
+  const key = `${change.locale}/${change.type}/${change.slug}`;
+  const covered = all.some((other) => {
+    if (other.id === change.id) return false;
+    if (`${other.locale}/${other.type}/${other.slug}` !== key) return false;
+    if (other.status !== "applied" && other.status !== "kept") return false;
+    return isLaterChange(other, change);
+  });
+  return covered ? "kept" : "applied";
+}
+
+/** Write-tool changes in the thread, with session status winning over the tool output. */
+export function stackChanges(
+  messages: UIMessage[],
+  overrides: Record<string, ChatChangeSummary>,
+): ChatChangeSummary[] {
+  const byId = new Map<string, ChatChangeSummary>();
+  for (const message of messages) {
+    for (const part of message.parts) {
+      if (!isToolUIPart(part) || part.state !== "output-available") continue;
+      if (!isWriteTool(getToolName(part))) continue;
+      const out = part.output as WriteToolOutput | undefined;
+      if (!out?.ok) continue;
+      byId.set(out.change.id, out.change);
+    }
+  }
+  for (const change of Object.values(overrides)) {
+    const existing = byId.get(change.id);
+    byId.set(
+      change.id,
+      existing
+        ? { ...existing, ...change, summary: change.summary ?? existing.summary }
+        : change,
+    );
+  }
+  return [...byId.values()];
+}
+
 /** Find an active `@query` token ending at the caret. */
 export function mentionQueryAt(
   text: string,

package/src/chrome/AppSidebar.tsx

@@ -4,38 +4,27 @@ import * as stylex from "@stylexjs/stylex";
 import { useReplicaState } from "../replica/useReplica";
 import { colors, space, type } from "../styles/tokens.stylex";
 import { useWorkspaceNav } from "./WorkspaceNavContext";
-import { NavAnchor, NavItem } from "./NavItem";
-import { useStudioDefinition } from "../define-studio";
+import { NavItem } from "./NavItem";
 import { UserMenu } from "./UserMenu";
-import { IMPLICIT_SINGLETON_SLUG } from "@backmatter/core";
-import {
-  cmsWorkspaceSlug,
-  contentDocPath,
-  contentTypePath,
-  isWorkspaceSettingsPath,
-  settingsPath,
-  workspaceHomePath,
-} from "../workspace-path";
-import { DocIcon, ExternalIcon, GearIcon } from "./icons";
-import {
-  groupContentTypes,
-  modelHasLocale,
-  type ContentTypeNav,
-} from "./content-type-groups";
-
+import { cmsWorkspaceSlug, isWorkspaceMediaPath, workspaceHomePath } from "../workspace-path";
+import { DocIcon } from "./icons";
+import { ContentExplorerSidebar } from "./ContentExplorerSidebar";
 export function AppSidebar() {
   const location = useLocation();
   const workspaceNav = useWorkspaceNav();
   const inWorkspace = Boolean(cmsWorkspaceSlug(location.pathname));
+  const railOnly = inWorkspace && isWorkspaceMediaPath(location.pathname);
 
   return (
-    <aside {...stylex.props(styles.aside)}>
+    <aside {...stylex.props(styles.aside, railOnly && styles.asideRail)}>
       {inWorkspace && workspaceNav ? (
-        <WorkspaceNav workspace={workspaceNav} />
+        <div {...stylex.props(styles.workspaceNav)}>
+          <ContentExplorerSidebar workspace={workspaceNav} />
+        </div>
       ) : (
         <WorkspaceListNav />
       )}
-      <SidebarFooter />
+      <SidebarFooter compact={railOnly} />
     </aside>
   );
 }
@@ -75,157 +64,40 @@ function WorkspaceListNav() {
   );
 }
 
-function typeHref(
-  workspaceSlug: string,
-  defaultLocale: string,
-  model: ContentTypeNav,
-) {
-  if (model.singleton && !modelHasLocale(model.path)) {
-    return contentDocPath(
-      workspaceSlug,
-      model.type,
-      IMPLICIT_SINGLETON_SLUG,
-      "",
-      defaultLocale,
-    );
-  }
-  return contentTypePath(workspaceSlug, model.type);
-}
-
-function TypeList({
-  models,
-  workspaceSlug,
-  defaultLocale,
-}: {
-  models: ContentTypeNav[];
-  workspaceSlug: string;
-  defaultLocale: string;
-}) {
-  return (
-    <ul {...stylex.props(styles.list)}>
-      {models.map((model) => (
-        <li key={model.type}>
-          <NavItem to={typeHref(workspaceSlug, defaultLocale, model)}>
-            <DocIcon />
-            <span {...stylex.props(styles.truncate, styles.capitalize)}>
-              {model.type}
-            </span>
-          </NavItem>
-        </li>
-      ))}
-    </ul>
-  );
-}
-
-function WorkspaceNav({
-  workspace,
-}: {
-  workspace: {
-    workspaceSlug: string;
-    defaultLocale: string;
-    contentTypes: string[];
-    contentModels: ContentTypeNav[];
-  };
-}) {
-  const location = useLocation();
-  const grouped = groupContentTypes(workspace.contentModels);
-  const empty = workspace.contentTypes.length === 0;
-  const menu = useStudioDefinition().menu ?? [];
-
-  return (
-    <>
-      <nav aria-label="Content" {...stylex.props(styles.nav)}>
-        {empty ? (
-          <div>
-            <SectionLabel>Content</SectionLabel>
-            <p {...stylex.props(styles.muted)}>
-              No content types yet. Pull from GitHub to load models.
-            </p>
-          </div>
-        ) : (
-          <>
-            {grouped.pages.length > 0 ? (
-              <div>
-                <SectionLabel>Pages</SectionLabel>
-                <TypeList
-                  models={grouped.pages}
-                  workspaceSlug={workspace.workspaceSlug}
-                  defaultLocale={workspace.defaultLocale}
-                />
-              </div>
-            ) : null}
-            {grouped.data.length > 0 ? (
-              <div>
-                <SectionLabel>Data</SectionLabel>
-                <TypeList
-                  models={grouped.data}
-                  workspaceSlug={workspace.workspaceSlug}
-                  defaultLocale={workspace.defaultLocale}
-                />
-              </div>
-            ) : null}
-            {grouped.globals.length > 0 ? (
-              <div>
-                <SectionLabel>Globals</SectionLabel>
-                <TypeList
-                  models={grouped.globals}
-                  workspaceSlug={workspace.workspaceSlug}
-                  defaultLocale={workspace.defaultLocale}
-                />
-              </div>
-            ) : null}
-          </>
-        )}
-      </nav>
-      <nav aria-label="Settings" {...stylex.props(styles.settings)}>
-        <SectionLabel>Settings</SectionLabel>
-        <ul {...stylex.props(styles.list)}>
-          <li>
-            <NavItem
-              to={settingsPath(workspace.workspaceSlug, "general")}
-              active={isWorkspaceSettingsPath(location.pathname)}
-            >
-              <GearIcon />
-              Settings
-            </NavItem>
-          </li>
-          {menu.map((item) => (
-            <li key={`${item.label}:${item.href}`}>
-              <NavAnchor href={item.href}>
-                <ExternalIcon />
-                {item.label}
-              </NavAnchor>
-            </li>
-          ))}
-        </ul>
-      </nav>
-    </>
-  );
+function SectionLabel({ children }: { children: React.ReactNode }) {
+  return <p {...stylex.props(styles.section)}>{children}</p>;
 }
 
-function SidebarFooter() {
+function SidebarFooter({ compact = false }: { compact?: boolean }) {
   return (
-    <div {...stylex.props(styles.footer)}>
-      <UserMenu />
+    <div {...stylex.props(styles.footer, compact && styles.footerCompact)}>
+      <UserMenu compact={compact} />
     </div>
   );
 }
 
-function SectionLabel({ children }: { children: React.ReactNode }) {
-  return <p {...stylex.props(styles.section)}>{children}</p>;
-}
-
 const styles = stylex.create({
+  workspaceNav: {
+    display: "flex",
+    minHeight: 0,
+    flex: 1,
+    flexDirection: "column",
+  },
   aside: {
     display: "flex",
     height: "100%",
-    width: "220px",
+    width: "min(360px, 38vw)",
+    minWidth: "300px",
     flexShrink: 0,
     flexDirection: "column",
     borderRightWidth: 1,
     borderRightStyle: "solid",
     borderRightColor: colors.border,
-    backgroundColor: colors.bgSidebar,
+    backgroundColor: colors.bgSurface,
+  },
+  asideRail: {
+    width: "48px",
+    minWidth: "48px",
   },
   brand: {
     flexShrink: 0,
@@ -302,4 +174,7 @@ const styles = stylex.create({
     borderTopColor: colors.border,
     padding: space.md,
   },
+  footerCompact: {
+    padding: space.sm,
+  },
 });