@backmatter/studio 0.0.15 → 0.0.17

package/src/pages/WorkspaceHomePage.tsx

@@ -0,0 +1,313 @@
+// packages/studio/src/pages/WorkspaceHomePage.tsx
+import { Link, useOutletContext } from "react-router";
+import * as stylex from "@stylexjs/stylex";
+import { useReplicaState } from "../replica/useReplica";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { PageHeader } from "../ui/Page";
+import { Text } from "../ui/Text";
+import { codeSessionEntry } from "../code-session-entry";
+import type { WorkspaceOutletContext } from "../workspace/types";
+import { homeSummary, commitAge, type HomeRow, type HomeSummary } from "./home-rows";
+import type { RecentCommit } from "../api";
+
+const hover = "@media (hover: hover)";
+
+export function UncommittedHome({
+  summary,
+  codeHref = null,
+}: {
+  summary: HomeSummary;
+  codeHref?: string | null;
+}) {
+  const branchDetail =
+    summary.branch === summary.defaultBranch
+      ? "Default branch"
+      : `Default is ${summary.defaultBranch}`;
+  return (
+    <>
+      <PageHeader title={summary.name} description={`On ${summary.branch}`} />
+      <div {...stylex.props(styles.grid)}>
+        <UncommittedCard summary={summary} />
+        <CommitsCard summary={summary} />
+        <FactCard
+          kicker="Models"
+          value={summary.modelCount === 0 ? "None yet" : String(summary.modelCount)}
+          detail={
+            summary.modelCount === 0
+              ? "Pull from GitHub to load models."
+              : "Loaded from the repository."
+          }
+          href={summary.schemaHref}
+        />
+        <FactCard
+          kicker="Branch"
+          value={summary.branch}
+          detail={branchDetail}
+          href={summary.githubHref}
+        />
+        <FactCard
+          kicker="Repository"
+          value={summary.repository ?? "Not connected"}
+          detail={summary.repository ? "GitHub" : "Connect a repository."}
+          href={summary.githubHref}
+        />
+        <FactCard
+          kicker="Site"
+          value={summary.siteUrl ?? "No site URL"}
+          detail={summary.siteUrl ? "Public origin" : "Add the site origin."}
+          href={summary.generalHref}
+        />
+        {codeHref ? (
+          <FactCard
+            kicker="Code"
+            value="Session"
+            detail="Host on the left, chat on the right."
+            href={codeHref}
+          />
+        ) : null}
+      </div>
+    </>
+  );
+}
+
+function UncommittedCard({ summary }: { summary: HomeSummary }) {
+  const detail =
+    summary.uncommitted === 0
+      ? "Your working tree is clean."
+      : summary.conflicts === 0
+        ? "No conflicts."
+        : summary.conflicts === 1
+          ? "1 conflict"
+          : `${summary.conflicts} conflicts`;
+  return (
+    <section {...stylex.props(styles.card, styles.span)}>
+      <Text size="sm" tone="muted" weight="medium">
+        Uncommitted
+      </Text>
+      <p {...stylex.props(styles.value)}>{summary.uncommitted}</p>
+      <Text size="sm" tone={summary.conflicts > 0 ? "danger" : "muted"}>
+        {detail}
+      </Text>
+      {summary.recent.length > 0 ? (
+        <>
+          <Text size="sm" tone="muted">
+            Recently changed
+          </Text>
+          <ul {...stylex.props(styles.recent)}>
+            {summary.recent.map((row) => (
+              <li key={row.key}>
+                <RecentRow row={row} />
+              </li>
+            ))}
+          </ul>
+        </>
+      ) : null}
+    </section>
+  );
+}
+
+function CommitsCard({ summary }: { summary: HomeSummary }) {
+  if (!summary.commits) return null;
+  return (
+    <section {...stylex.props(styles.card, styles.span)}>
+      <Text size="sm" tone="muted" weight="medium">
+        Lately
+      </Text>
+      {summary.commits.length === 0 ? (
+        <Text size="sm" tone="muted">
+          No commits on this branch yet.
+        </Text>
+      ) : (
+        <ul {...stylex.props(styles.recent)}>
+          {summary.commits.map((commit) => (
+            <li key={commit.sha}>
+              <CommitRow commit={commit} repository={summary.repository} />
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}
+
+function CommitRow({
+  commit,
+  repository,
+}: {
+  commit: RecentCommit;
+  repository: string | null;
+}) {
+  const when = commitAge(commit.committedAt, Date.now());
+  const who = [commit.author, when, commit.cms ? "CMS" : ""].filter(Boolean).join(" · ");
+  const body = (
+    <>
+      <span {...stylex.props(styles.recentName)}>{commit.message}</span>
+      <span {...stylex.props(styles.recentStatus)}>{who}</span>
+    </>
+  );
+  if (!repository) return <div {...stylex.props(styles.recentRow)}>{body}</div>;
+  return (
+    <a
+      href={`https://github.com/${repository}/commit/${commit.sha}`}
+      target="_blank"
+      rel="noreferrer"
+      {...stylex.props(styles.recentRow, styles.recentLink)}
+    >
+      {body}
+    </a>
+  );
+}
+
+function RecentRow({ row }: { row: HomeRow }) {
+  const body = (
+    <>
+      <span {...stylex.props(styles.recentName, row.route ? styles.recentRoute : null)}>
+        {row.route ?? row.label}
+      </span>
+      <span {...stylex.props(styles.recentStatus)}>
+        {row.route ? row.status : `data · ${row.status}`}
+      </span>
+    </>
+  );
+  if (!row.href) return <div {...stylex.props(styles.recentRow)}>{body}</div>;
+  return (
+    <Link to={row.href} {...stylex.props(styles.recentRow, styles.recentLink)}>
+      {body}
+    </Link>
+  );
+}
+
+function FactCard({
+  kicker,
+  value,
+  detail,
+  href,
+}: {
+  kicker: string;
+  value: string;
+  detail: string;
+  href: string;
+}) {
+  return (
+    <Link to={href} {...stylex.props(styles.card, styles.cardLink)}>
+      <Text size="sm" tone="muted" weight="medium">
+        {kicker}
+      </Text>
+      <p {...stylex.props(styles.factValue)}>{value}</p>
+      <Text size="sm" tone="muted">
+        {detail}
+      </Text>
+    </Link>
+  );
+}
+
+export function WorkspaceHomePage() {
+  const { workspace, models } = useOutletContext<WorkspaceOutletContext>();
+  const git = useReplicaState().git(workspace.id);
+  const summary = homeSummary({
+    name: workspace.name,
+    slug: workspace.slug,
+    branch: git?.currentBranch ?? "main",
+    defaultBranch: git?.defaultBranch ?? git?.currentBranch ?? "main",
+    repository: workspace.githubRepoFullName,
+    siteUrl: workspace.siteUrls[0] ?? null,
+    modelCount: models.length,
+    changes: git?.fetchedChanges ?? git?.changes ?? [],
+    models,
+    commits: git?.recentCommits ?? null,
+  });
+  return (
+    <UncommittedHome
+      summary={summary}
+      codeHref={codeSessionEntry(workspace.role, workspace.slug)}
+    />
+  );
+}
+
+const styles = stylex.create({
+  grid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+    gap: space.lg,
+  },
+  span: {
+    gridColumn: "1 / -1",
+  },
+  card: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.sm,
+    minWidth: 0,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgSurface,
+    padding: space.xl,
+    textDecoration: "none",
+    color: colors.text,
+  },
+  cardLink: {
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+      },
+    },
+  },
+  value: {
+    margin: 0,
+    fontSize: "32px",
+    fontWeight: 600,
+    letterSpacing: "-0.03em",
+    lineHeight: 1,
+  },
+  factValue: {
+    margin: 0,
+    overflow: "hidden",
+    fontSize: type.lg,
+    fontWeight: 600,
+    letterSpacing: "-0.02em",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  recent: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.xs,
+    margin: 0,
+    marginTop: space.md,
+    padding: 0,
+    listStyle: "none",
+  },
+  recentRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: space.lg,
+    minHeight: "28px",
+    color: colors.text,
+    textDecoration: "none",
+  },
+  recentLink: {
+    [hover]: {
+      ":hover": {
+        color: colors.textMuted,
+      },
+    },
+  },
+  recentName: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontSize: type.md,
+  },
+  recentRoute: {
+    fontFamily: type.mono,
+    fontSize: type.sm,
+  },
+  recentStatus: {
+    flexShrink: 0,
+    fontSize: type.sm,
+    color: colors.textMuted,
+  },
+});

package/src/pages/WorkspaceLayout.tsx

@@ -12,7 +12,10 @@ import { PageFrame } from "../ui/Page";
 import { Text } from "../ui/Text";
 import type { WorkspaceOutletContext } from "../workspace/types";
 import {
+  isWorkspaceContentIndexPath,
   isWorkspaceEditorPath,
+  isWorkspaceHomePath,
+  isWorkspaceCodePath,
   isWorkspaceMediaPath,
   isWorkspaceSettingsPath,
   isWorkspaceTypeIndexPath,
@@ -26,9 +29,12 @@ export function WorkspaceLayout() {
   const { workspaceSlug = "" } = useParams();
   const location = useLocation();
   const isEditor = isWorkspaceEditorPath(location.pathname);
+  const isContentIndex = isWorkspaceContentIndexPath(location.pathname);
   const isTypeIndex = isWorkspaceTypeIndexPath(location.pathname);
   const isSettings = isWorkspaceSettingsPath(location.pathname);
   const isMedia = isWorkspaceMediaPath(location.pathname);
+  const isCode = isWorkspaceCodePath(location.pathname);
+  const isHome = isWorkspaceHomePath(location.pathname);
   const { userId } = useAppChrome();
   const setNav = useSetWorkspaceNav();
   const replica = useReplicaState();
@@ -96,7 +102,10 @@ export function WorkspaceLayout() {
   }
 
   return (
-    <PageFrame flush={isEditor || isTypeIndex || isSettings || isMedia}>
+    <PageFrame
+      wide={isHome}
+      flush={isEditor || isContentIndex || isTypeIndex || isSettings || isMedia || isCode}
+    >
       <Outlet context={outletContext} />
     </PageFrame>
   );

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-boot.ts

@@ -0,0 +1,43 @@
+// packages/studio/src/pages/code-session-boot.ts
+export type HostPhase = "stopped" | "installing" | "starting" | "ready" | "failed";
+
+export type BootStepState = "pending" | "active" | "done" | "failed";
+
+export type BootStep = { label: string; state: BootStepState };
+
+const LABELS = ["Start the container", "Install dependencies", "Start the dev server"] as const;
+
+/**
+ * The three steps a developer watches before the host shows. `furthest` is the
+ * latest phase seen, so a failure lands on the step that was running.
+ */
+export function bootSteps(input: {
+  opening: boolean;
+  phase: HostPhase | null;
+  furthest: "installing" | "starting" | null;
+}): BootStep[] {
+  const at = (index: number, state: BootStepState): BootStep[] =>
+    LABELS.map((label, i) => ({
+      label,
+      state: i < index ? "done" : i === index ? state : "pending",
+    }));
+
+  if (input.opening || input.phase === null) return at(0, "active");
+  if (input.phase === "installing") return at(1, "active");
+  if (input.phase === "starting") return at(2, "active");
+  if (input.phase === "ready") return LABELS.map((label) => ({ label, state: "done" }));
+  if (input.phase === "stopped") return at(0, "failed");
+  return at(input.furthest === "starting" ? 2 : input.furthest === "installing" ? 1 : 0, "failed");
+}
+
+/** Normalizes what someone types in the address bar to a path inside the host. */
+export function hostPath(input: string): string {
+  const trimmed = input.trim();
+  if (!trimmed) return "/";
+  try {
+    const url = new URL(trimmed);
+    return `${url.pathname}${url.search}${url.hash}` || "/";
+  } catch {
+    return trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
+  }
+}

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

@@ -0,0 +1,53 @@
+// packages/studio/src/pages/code-session-context.ts
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from "react";
+
+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);
+const CodeSessionPublishContext = createContext<
+  Dispatch<SetStateAction<CodeSessionContextValue | null>> | null
+>(null);
+
+export function CodeSessionProvider({
+  children,
+  initial = null,
+}: {
+  children: React.ReactNode;
+  initial?: CodeSessionContextValue | null;
+}) {
+  const [published, setPublished] = useState<CodeSessionContextValue | null>(initial);
+  const value = useMemo(() => published, [published]);
+  return (
+    <CodeSessionContext.Provider value={value}>
+      <CodeSessionPublishContext.Provider value={setPublished}>
+        {children}
+      </CodeSessionPublishContext.Provider>
+    </CodeSessionContext.Provider>
+  );
+}
+
+export function useCodeSessionContext(): CodeSessionContextValue | null {
+  return useContext(CodeSessionContext);
+}
+
+export function usePublishCodeSession(): Dispatch<SetStateAction<CodeSessionContextValue | null>> {
+  const publish = useContext(CodeSessionPublishContext);
+  if (!publish) {
+    throw new Error("usePublishCodeSession requires CodeSessionProvider");
+  }
+  return publish;
+}

package/src/pages/code-session-files.ts

@@ -0,0 +1,42 @@
+// packages/studio/src/pages/code-session-files.ts
+export type FileNode =
+  | { kind: "file"; name: string; path: string }
+  | { kind: "dir"; name: string; path: string; children: FileNode[] };
+
+/** One checkout file as the session's container has it now. */
+export type WorkspaceFile =
+  | { path: string; content: string }
+  | { path: string; binary: true; size: number }
+  | { path: string; tooLarge: true; size: number };
+
+export function fileTree(paths: readonly string[]): FileNode[] {
+  const root: FileNode & { kind: "dir" } = { kind: "dir", name: "", path: "", children: [] };
+  for (const path of paths) {
+    const parts = path.split("/");
+    let dir = root;
+    parts.forEach((name, index) => {
+      const at = parts.slice(0, index + 1).join("/");
+      if (index === parts.length - 1) {
+        dir.children.push({ kind: "file", name, path: at });
+        return;
+      }
+      let next = dir.children.find(
+        (child): child is FileNode & { kind: "dir" } => child.kind === "dir" && child.name === name,
+      );
+      if (!next) {
+        next = { kind: "dir", name, path: at, children: [] };
+        dir.children.push(next);
+      }
+      dir = next;
+    });
+  }
+  return sortLevel(root.children);
+}
+
+function sortLevel(nodes: FileNode[]): FileNode[] {
+  return nodes
+    .map((node) => (node.kind === "dir" ? { ...node, children: sortLevel(node.children) } : node))
+    .sort((a, b) =>
+      a.kind !== b.kind ? (a.kind === "dir" ? -1 : 1) : a.name.localeCompare(b.name),
+    );
+}

package/src/pages/code-session-frame.ts

@@ -0,0 +1,52 @@
+// packages/studio/src/pages/code-session-frame.ts
+
+/** The host's own origin, and an entry URL carrying the ticket that admits this browser to it. */
+export type HostPreview = { origin: string; entry: string };
+
+/** The frame's address. The first load carries the ticket. A reload is that same path. */
+export function frameAddress(preview: HostPreview, path: string, reloads: number): string {
+  if (reloads === 0) return previewUrl(preview.entry, path);
+  return previewUrl(preview.origin, path);
+}
+
+export function previewUrl(base: string, path: string): string {
+  const from = new URL(base);
+  const url = new URL(path, from.origin);
+  from.searchParams.forEach((value, key) => url.searchParams.set(key, value));
+  return url.toString();
+}
+
+export type PathMemory = {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+};
+
+function pathKey(workspaceId: string): string {
+  return `backmatter:code-session-path:${workspaceId}`;
+}
+
+function isRoute(path: string | null): path is string {
+  return typeof path === "string" && path.startsWith("/") && !path.startsWith("//");
+}
+
+/** The route this workspace's preview was last on, kept across a reload of Studio. */
+export function rememberedPath(storage: PathMemory, workspaceId: string): string {
+  const raw = storage.getItem(pathKey(workspaceId));
+  return isRoute(raw) ? raw : "/";
+}
+
+export function rememberPath(storage: PathMemory, workspaceId: string, path: string): void {
+  if (!isRoute(path)) return;
+  storage.setItem(pathKey(workspaceId), path);
+}
+
+/** The route a framed host page reports through `postMessage`, if `message` is that report. */
+export function framedLocation(
+  message: { origin: string; data: unknown },
+  hostOrigin: string,
+): string | null {
+  if (message.origin !== new URL(hostOrigin).origin) return null;
+  const data = message.data as { type?: unknown; path?: unknown } | null;
+  if (data?.type !== "backmatter:preview-location" || typeof data.path !== "string") return null;
+  return data.path.startsWith("/") && !data.path.startsWith("//") ? data.path : null;
+}

package/src/pages/code-session-routes.ts

@@ -0,0 +1,42 @@
+// packages/studio/src/pages/code-session-routes.ts
+import {
+  isRoutable,
+  isTemplateSlug,
+  matchModelPath,
+  routeFor,
+  type RouteModel,
+} from "@backmatter/core";
+
+export type ContentRouteModel = RouteModel & {
+  path: string;
+  external?: boolean;
+  template?: string;
+};
+
+/** Public routes for the content files in a code session checkout. */
+export function contentRoutes(
+  models: readonly ContentRouteModel[],
+  files: readonly string[],
+): string[] {
+  const routes = new Set<string>();
+  for (const file of files) {
+    const repoPath = file.replace(/^\.\//, "").replace(/^\/+/, "");
+    for (const model of models) {
+      const hit = matchModelPath(model, repoPath);
+      if (!hit) continue;
+      if (isRoutable(model) && !isTemplateSlug(model, hit.slug)) {
+        const route = routeFor(model, hit.slug);
+        if (route) routes.add(route);
+      }
+      break;
+    }
+  }
+  return [...routes].sort((a, b) => (a === "/" ? -1 : b === "/" ? 1 : a.localeCompare(b)));
+}
+
+/** Routes whose path contains the address query. A blank query keeps the full list. */
+export function matchingRoutes(routes: readonly string[], query: string): string[] {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return [...routes];
+  return routes.filter((route) => route.toLowerCase().includes(needle));
+}