@backmatter/studio 0.0.4 → 0.0.6

package/dist/studio.css

@@ -1455,14 +1455,14 @@
     bottom: 44px;
   }
 
-  .xy75b87 {
-    bottom: 64px;
-  }
-
   .x1bs4c7o {
     bottom: calc(100% - 12px);
   }
 
+  .xpfn2fm {
+    bottom: calc(48px + env(safe-area-inset-bottom, 0px));
+  }
+
   .x1sf7pbd {
     bottom: var(--xvc7yhn);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backmatter/studio",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "The Backmatter editing surface: document editor, AI chat, publish. Mounted on your site or hosted on the dashboard.",
   "type": "module",
   "publishConfig": {
@@ -52,7 +52,7 @@
   },
   "dependencies": {
     "@ai-sdk/react": "^4.0.100",
-    "@backmatter/core": "^0.0.21",
+    "@backmatter/core": "^0.0.22",
     "@base-ui/react": "^1.6.0",
     "@dnd-kit/abstract": "^0.5.0",
     "@dnd-kit/react": "^0.5.0",

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";
@@ -26,6 +27,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 />} />

package/src/api.ts

@@ -169,10 +169,34 @@ 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;
+  };
+  ai: { inputTokens: number; outputTokens: number };
+  members: number;
+};
+
 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}`);

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/chrome/icons.tsx

@@ -20,6 +20,19 @@ export function DocIcon() {
   );
 }
 
+export function UsageIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d="M3 12.5V8.5M8 12.5V3.5M13 12.5V6"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
 export function GearIcon() {
   return (
     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>

package/src/pages/SettingsLayout.tsx

@@ -2,7 +2,7 @@
 import { Navigate, Outlet, useLocation, useOutletContext } from "react-router";
 import * as stylex from "@stylexjs/stylex";
 import { NavItem } from "../chrome/NavItem";
-import { GearIcon, GithubIcon, PlugIcon, SchemaIcon, UsersIcon } from "../chrome/icons";
+import { GearIcon, GithubIcon, PlugIcon, SchemaIcon, UsageIcon, UsersIcon } from "../chrome/icons";
 import { colors, space, type } from "../styles/tokens.stylex";
 import type { WorkspaceOutletContext } from "../workspace/types";
 import { isGithubSettingsPath, settingsPath } from "../workspace-path";
@@ -33,6 +33,12 @@ export function SettingsLayout() {
                   General
                 </NavItem>
               </li>
+              <li>
+                <NavItem to={settingsPath(slug, "usage")}>
+                  <UsageIcon />
+                  Usage
+                </NavItem>
+              </li>
               {develop ? (
                 <li>
                   <NavItem

package/src/pages/SettingsUsagePage.tsx

@@ -0,0 +1,168 @@
+// packages/studio/src/pages/SettingsUsagePage.tsx
+import { useEffect, useState } from "react";
+import { useOutletContext } from "react-router";
+import { fetchWorkspaceUsage, type WorkspaceUsage } from "../api";
+import { PageHeader, Panel, Stack } from "../ui/Page";
+import { Text } from "../ui/Text";
+import * as stylex from "@stylexjs/stylex";
+import { colors, space, type } from "../styles/tokens.stylex";
+import type { WorkspaceOutletContext } from "../workspace/types";
+
+const SURFACES: { key: keyof WorkspaceUsage["dataRequests"]; label: string }[] = [
+  { key: "public", label: "Public" },
+  { key: "studio", label: "Studio" },
+  { key: "replica", label: "Replica" },
+  { key: "preview", label: "Preview" },
+  { key: "ai", label: "Assistant" },
+];
+
+const WORK: { key: keyof WorkspaceUsage["work"]; label: string }[] = [
+  { key: "commits", label: "Commits" },
+  { key: "commitFiles", label: "Files committed" },
+  { key: "imports", label: "Imports" },
+  { key: "importFiles", label: "Files imported" },
+  { key: "saves", label: "Saves" },
+];
+
+function formatCount(value: number): string {
+  return new Intl.NumberFormat("en-US").format(value);
+}
+
+function monthLabel(period: string): string {
+  const [year, month] = period.split("-").map(Number);
+  if (!year || !month) return period;
+  return new Intl.DateTimeFormat("en-US", {
+    month: "long",
+    year: "numeric",
+    timeZone: "UTC",
+  }).format(new Date(Date.UTC(year, month - 1, 1)));
+}
+
+export function SettingsUsagePage() {
+  const { workspace } = useOutletContext<WorkspaceOutletContext>();
+  const [usage, setUsage] = useState<WorkspaceUsage | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setUsage(null);
+    setError(null);
+    fetchWorkspaceUsage(workspace.id)
+      .then((body) => {
+        if (!cancelled) setUsage(body);
+      })
+      .catch((err: unknown) => {
+        if (!cancelled) setError(err instanceof Error ? err.message : "Could not load usage");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [workspace.id]);
+
+  const total = usage
+    ? SURFACES.reduce((sum, surface) => sum + usage.dataRequests[surface.key], 0)
+    : 0;
+
+  return (
+    <Stack gap="lg">
+      <PageHeader
+        title="Usage"
+        description={
+          usage
+            ? `${monthLabel(usage.period)}, UTC. Counts update within about a minute.`
+            : "Content reads and AI tokens for this workspace."
+        }
+      />
+      {error ? <Text tone="danger">{error}</Text> : null}
+      {!usage && !error ? <Text tone="muted">Loading…</Text> : null}
+      {usage ? (
+        <>
+          <Panel>
+            <Text as="h2" size="lg" weight="medium">
+              Data requests
+            </Text>
+            <dl {...stylex.props(styles.list)}>
+              <div {...stylex.props(styles.row)}>
+                <dt {...stylex.props(styles.label)}>Total</dt>
+                <dd {...stylex.props(styles.value)}>{formatCount(total)}</dd>
+              </div>
+              {SURFACES.map((surface) => (
+                <div key={surface.key} {...stylex.props(styles.row)}>
+                  <dt {...stylex.props(styles.label)}>{surface.label}</dt>
+                  <dd {...stylex.props(styles.value)}>
+                    {formatCount(usage.dataRequests[surface.key])}
+                  </dd>
+                </div>
+              ))}
+            </dl>
+          </Panel>
+          <Panel>
+            <Text as="h2" size="lg" weight="medium">
+              Work
+            </Text>
+            <dl {...stylex.props(styles.list)}>
+              {WORK.map((item) => (
+                <div key={item.key} {...stylex.props(styles.row)}>
+                  <dt {...stylex.props(styles.label)}>{item.label}</dt>
+                  <dd {...stylex.props(styles.value)}>{formatCount(usage.work[item.key])}</dd>
+                </div>
+              ))}
+            </dl>
+          </Panel>
+          <Panel>
+            <Text as="h2" size="lg" weight="medium">
+              AI
+            </Text>
+            <dl {...stylex.props(styles.list)}>
+              <div {...stylex.props(styles.row)}>
+                <dt {...stylex.props(styles.label)}>Input tokens</dt>
+                <dd {...stylex.props(styles.value)}>{formatCount(usage.ai.inputTokens)}</dd>
+              </div>
+              <div {...stylex.props(styles.row)}>
+                <dt {...stylex.props(styles.label)}>Output tokens</dt>
+                <dd {...stylex.props(styles.value)}>{formatCount(usage.ai.outputTokens)}</dd>
+              </div>
+            </dl>
+          </Panel>
+          <Panel>
+            <div {...stylex.props(styles.row)}>
+              <Text as="h2" size="lg" weight="medium">
+                Members
+              </Text>
+              <Text size="lg" weight="medium">
+                {formatCount(usage.members)}
+              </Text>
+            </div>
+          </Panel>
+        </>
+      ) : null}
+    </Stack>
+  );
+}
+
+const styles = stylex.create({
+  list: {
+    margin: 0,
+    marginTop: space.lg,
+    display: "flex",
+    flexDirection: "column",
+    gap: space.sm,
+  },
+  row: {
+    display: "flex",
+    alignItems: "baseline",
+    justifyContent: "space-between",
+    gap: space.lg,
+  },
+  label: {
+    margin: 0,
+    fontSize: type.sm,
+    color: colors.textMuted,
+  },
+  value: {
+    margin: 0,
+    fontSize: type.sm,
+    fontVariantNumeric: "tabular-nums",
+    color: colors.text,
+  },
+});

package/src/preview-frame.tsx

@@ -0,0 +1,78 @@
+// packages/studio/src/preview-frame.tsx
+// Full-viewport ring and a top-right preview label while the site session is active.
+export const PREVIEW_FRAME_CLASS = "backmatter-preview-frame";
+
+/** Shared with the on-site dev bar while preview is active. */
+export const PREVIEW_CHROME_BORDER = "#d97706";
+
+function EyeIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d="M1.5 8s2.5-4.5 6.5-4.5S14.5 8 14.5 8s-2.5 4.5-6.5 4.5S1.5 8 1.5 8Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinejoin="round"
+      />
+      <circle cx="8" cy="8" r="1.75" stroke="currentColor" strokeWidth="1.25" />
+    </svg>
+  );
+}
+
+export function PreviewFrame() {
+  return (
+    <>
+      <style>{FRAME_CSS}</style>
+      <div
+        className={PREVIEW_FRAME_CLASS}
+        data-backmatter-preview-frame=""
+        aria-hidden
+      >
+        <div className={`${PREVIEW_FRAME_CLASS}-badge`}>
+          <EyeIcon />
+          <span>Preview</span>
+        </div>
+      </div>
+    </>
+  );
+}
+
+const FRAME_CSS = `
+.${PREVIEW_FRAME_CLASS} {
+  position: fixed;
+  inset: 0;
+  z-index: 2147482999;
+  pointer-events: none;
+  box-shadow: inset 0 0 0 2px ${PREVIEW_CHROME_BORDER};
+  overflow: visible;
+}
+.${PREVIEW_FRAME_CLASS}-badge {
+  position: absolute;
+  top: env(safe-area-inset-top, 0px);
+  right: env(safe-area-inset-right, 0px);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 2px solid ${PREVIEW_CHROME_BORDER};
+  border-top: 0;
+  border-radius: 0 0 14px 14px;
+  background: #fff7ed;
+  color: #9a3412;
+  font: 500 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  white-space: nowrap;
+  -webkit-font-smoothing: antialiased;
+}
+@keyframes backmatter-preview-frame-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .${PREVIEW_FRAME_CLASS} {
+    animation: backmatter-preview-frame-in 240ms cubic-bezier(0.23, 1, 0.32, 1) both;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .${PREVIEW_FRAME_CLASS} { animation: none; }
+}
+`;