@backmatter/studio 0.0.1

package/src/chat/DocListCard.tsx

@@ -0,0 +1,322 @@
+// packages/studio/src/chat/DocListCard.tsx
+//
+// Renders listDocs / searchDocs tool results as a card of documents that link
+// into the editor. Content models are user-defined, so rows lean on the
+// server-derived `title` and fall back to the slug.
+import { useState } from "react";
+import { Link } from "react-router";
+import * as stylex from "@stylexjs/stylex";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { contentDocPath } from "../workspace-path";
+import { useWorkspaceNav } from "../chrome/WorkspaceNavContext";
+import { ChevronDownIcon, FileIcon } from "./icons";
+
+const hover = "@media (hover: hover)";
+
+export type DocCardItem = {
+  locale: string;
+  type: string;
+  slug: string;
+  title?: string | null;
+  path?: string | null;
+  /** Working tree status against HEAD (listDocs). */
+  status?: "clean" | "modified" | "added" | "conflict";
+  /** Which copy a search matched: `head` or `tree` (searchDocs). */
+  source?: string;
+  excerpt?: string;
+};
+
+/** Badge text for a card row; clean/committed docs get none. */
+export function docCardBadge(
+  doc: Pick<DocCardItem, "status" | "source">,
+): "new" | "modified" | "conflict" | null {
+  if (doc.status === "added") return "new";
+  if (doc.status === "modified" || doc.status === "conflict") return doc.status;
+  if (doc.source === "tree") return "modified";
+  return null;
+}
+
+const COLLAPSED_ROWS = 6;
+
+export function DocListCard({
+  items,
+  total,
+  workspaceId,
+  emptyLabel = "No documents",
+}: {
+  items: DocCardItem[];
+  /** Total available when the tool truncated its result. */
+  total?: number;
+  workspaceId: string;
+  emptyLabel?: string;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  if (items.length === 0) {
+    return <div {...stylex.props(styles.card, styles.empty)}>{emptyLabel}</div>;
+  }
+
+  const groups = groupByType(items);
+  const multiType = groups.length > 1;
+  const multiLocale = new Set(items.map((d) => d.locale)).size > 1;
+  const hidden = expanded ? 0 : Math.max(0, items.length - COLLAPSED_ROWS);
+  const truncated = total !== undefined && total > items.length ? total - items.length : 0;
+
+  let budget = expanded ? Infinity : COLLAPSED_ROWS;
+  return (
+    <div {...stylex.props(styles.card)}>
+      {groups.map(([groupType, docs]) => {
+        if (budget <= 0) return null;
+        const shown = docs.slice(0, budget);
+        budget -= shown.length;
+        return (
+          <div key={groupType}>
+            {multiType ? (
+              <div {...stylex.props(styles.groupLabel)}>
+                {groupType}
+                <span {...stylex.props(styles.groupCount)}>{docs.length}</span>
+              </div>
+            ) : null}
+            {shown.map((doc) => (
+              <DocRow
+                key={`${doc.locale}/${doc.type}/${doc.slug}`}
+                doc={doc}
+                workspaceId={workspaceId}
+                showLocale={multiLocale}
+              />
+            ))}
+          </div>
+        );
+      })}
+      {hidden > 0 || expanded ? (
+        <button
+          type="button"
+          onClick={() => setExpanded((v) => !v)}
+          {...stylex.props(styles.more)}
+        >
+          <span {...stylex.props(styles.moreIcon, expanded && styles.moreIconOpen)}>
+            <ChevronDownIcon size={11} />
+          </span>
+          {expanded ? "Show fewer" : `Show all ${items.length}`}
+        </button>
+      ) : null}
+      {truncated > 0 ? (
+        <div {...stylex.props(styles.footnote)}>{truncated} more not shown</div>
+      ) : null}
+    </div>
+  );
+}
+
+function DocRow({
+  doc,
+  workspaceId,
+  showLocale,
+}: {
+  doc: DocCardItem;
+  workspaceId: string;
+  showLocale: boolean;
+}) {
+  const nav = useWorkspaceNav();
+  const to = nav
+    ? contentDocPath(
+        nav.workspaceSlug,
+        doc.type,
+        doc.slug,
+        doc.locale,
+        nav.defaultLocale,
+      )
+    : "#";
+  const title = doc.title?.trim() || doc.slug;
+  const status = docCardBadge(doc);
+  const secondary = doc.path ?? `${doc.type}/${doc.slug}`;
+
+  return (
+    <Link to={to} {...stylex.props(styles.row)}>
+      <span {...stylex.props(styles.line)}>
+        <span {...stylex.props(styles.icon)}>
+          <FileIcon size={13} />
+        </span>
+        <span {...stylex.props(styles.title)}>{title}</span>
+        {showLocale ? <span {...stylex.props(styles.locale)}>{doc.locale}</span> : null}
+        {status ? (
+          <span
+            {...stylex.props(
+              styles.badge,
+              status === "new" && styles.badgeNew,
+              status === "conflict" && styles.badgeConflict,
+            )}
+          >
+            {status}
+          </span>
+        ) : null}
+        <span {...stylex.props(styles.path)} title={secondary}>
+          {secondary}
+        </span>
+      </span>
+      {doc.excerpt ? <span {...stylex.props(styles.excerpt)}>{doc.excerpt}</span> : null}
+    </Link>
+  );
+}
+
+function groupByType(items: DocCardItem[]): Array<[string, DocCardItem[]]> {
+  const map = new Map<string, DocCardItem[]>();
+  for (const item of items) {
+    const list = map.get(item.type) ?? [];
+    list.push(item);
+    map.set(item.type, list);
+  }
+  return [...map.entries()];
+}
+
+const styles = stylex.create({
+  card: {
+    display: "flex",
+    flexDirection: "column",
+    paddingBlock: 2,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgSurface,
+    overflow: "hidden",
+  },
+  empty: {
+    paddingInline: space.md,
+    paddingBlock: space.sm,
+    fontSize: type.sm,
+    color: colors.textMuted,
+  },
+  groupLabel: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.sm,
+    paddingInline: space.md,
+    paddingTop: 6,
+    paddingBottom: 2,
+    fontSize: type.xs,
+    fontWeight: 500,
+    textTransform: "capitalize",
+    color: colors.textMuted,
+  },
+  groupCount: {
+    fontWeight: 400,
+    opacity: 0.8,
+  },
+  row: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 2,
+    paddingInline: space.md,
+    paddingBlock: 6,
+    color: colors.text,
+    textDecoration: "none",
+    [hover]: {
+      ":hover": { backgroundColor: colors.bgHover },
+    },
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: -2,
+    },
+  },
+  line: {
+    display: "flex",
+    minWidth: 0,
+    alignItems: "center",
+    gap: space.sm,
+  },
+  icon: {
+    display: "inline-flex",
+    flexShrink: 0,
+    color: colors.textMuted,
+  },
+  title: {
+    minWidth: 0,
+    flexShrink: 1,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontSize: type.sm,
+    fontWeight: 500,
+  },
+  locale: {
+    flexShrink: 0,
+    fontSize: type.xs,
+    textTransform: "uppercase",
+    color: colors.textMuted,
+  },
+  badge: {
+    flexShrink: 0,
+    paddingInline: space.xs,
+    borderRadius: radius.sm,
+    backgroundColor: colors.bgActive,
+    fontSize: type.xs,
+    color: colors.textMuted,
+  },
+  badgeNew: {
+    backgroundColor: colors.accentMuted,
+    color: colors.accent,
+  },
+  badgeConflict: {
+    color: colors.danger,
+    borderColor: colors.danger,
+  },
+  // Right-aligned; yields to the title but keeps at least a readable tail.
+  path: {
+    marginLeft: "auto",
+    minWidth: 0,
+    maxWidth: "60%",
+    flexShrink: 2,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    direction: "rtl",
+    textAlign: "right",
+    fontFamily: type.mono,
+    fontSize: type.xs,
+    color: colors.textMuted,
+  },
+  excerpt: {
+    paddingLeft: 21, // icon (13) + gap
+    fontSize: type.xs,
+    lineHeight: 1.45,
+    color: colors.textMuted,
+    display: "-webkit-box",
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden",
+  },
+  more: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: space.xs,
+    alignSelf: "flex-start",
+    marginTop: space.xs,
+    marginInline: space.sm,
+    paddingInline: space.sm,
+    height: 24,
+    borderWidth: 0,
+    borderRadius: radius.sm,
+    backgroundColor: "transparent",
+    fontSize: type.xs,
+    color: colors.textMuted,
+    cursor: "pointer",
+    [hover]: {
+      ":hover": { backgroundColor: colors.bgHover, color: colors.text },
+    },
+  },
+  moreIcon: {
+    display: "inline-flex",
+    transitionProperty: "transform",
+    transitionDuration: "120ms",
+  },
+  moreIconOpen: {
+    transform: "rotate(180deg)",
+  },
+  footnote: {
+    paddingInline: space.md,
+    paddingTop: space.xs,
+    fontSize: type.xs,
+    color: colors.textMuted,
+  },
+});

package/src/chat/LiveStatus.tsx

@@ -0,0 +1,83 @@
+// packages/studio/src/chat/LiveStatus.tsx
+//
+// One-line live status for a chat turn: shimmering label that tracks the
+// current thought or tool, plus an elapsed timer. Stays a single row so
+// thinking / acting doesn't stack into a transcript of its own.
+import { useEffect, useRef, useState } from "react";
+import * as stylex from "@stylexjs/stylex";
+import type { UIMessage } from "ai";
+import { colors, space, type } from "../styles/tokens.stylex";
+import { formatElapsed, liveActivity, type LiveActivity } from "./chat-helpers";
+import { SparkIcon } from "./icons";
+import { Shimmer } from "./Shimmer";
+
+export function LiveStatus({
+  parts,
+  status,
+}: {
+  parts: UIMessage["parts"] | undefined;
+  status: "submitted" | "streaming" | "ready" | "error";
+}) {
+  const activity = liveActivity(parts, status);
+  if (!activity) return null;
+  return <LiveStatusLine activity={activity} />;
+}
+
+function activityKey(activity: LiveActivity) {
+  return activity.kind === "tool" ? `tool:${activity.label}` : activity.kind;
+}
+
+function LiveStatusLine({ activity }: { activity: LiveActivity }) {
+  const key = activityKey(activity);
+  const started = useRef({ key, at: Date.now() });
+  if (started.current.key !== key) {
+    started.current = { key, at: Date.now() };
+  }
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const id = window.setInterval(() => setNow(Date.now()), 100);
+    return () => window.clearInterval(id);
+  }, []);
+
+  return (
+    <p {...stylex.props(styles.row)} aria-live="polite" aria-atomic="true">
+      <span {...stylex.props(styles.icon)}>
+        <SparkIcon size={12} />
+      </span>
+      <span {...stylex.props(styles.label)}>
+        <Shimmer>{activity.label}</Shimmer>
+      </span>
+      <span {...stylex.props(styles.time)}>{formatElapsed(now - started.current.at)}</span>
+    </p>
+  );
+}
+
+const styles = stylex.create({
+  row: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.sm,
+    minHeight: 20,
+    margin: 0,
+    fontSize: type.sm,
+    color: colors.textMuted,
+  },
+  icon: {
+    display: "inline-flex",
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  label: {
+    minWidth: 0,
+    flex: 1,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  time: {
+    flexShrink: 0,
+    fontVariantNumeric: "tabular-nums",
+    color: colors.textMuted,
+  },
+});

package/src/chat/MentionPopover.tsx

@@ -0,0 +1,164 @@
+// packages/studio/src/chat/MentionPopover.tsx
+import { useEffect, useMemo, useState, type RefObject } from "react";
+import { Popover } from "@base-ui/react/popover";
+import * as stylex from "@stylexjs/stylex";
+import { fetchDocs } from "../api";
+import type { DocRef } from "../chrome/EditorFocusContext";
+import { colors, type } from "../styles/tokens.stylex";
+import { cx, popup, popupClassName } from "../ui/popup";
+import { FileIcon } from "./icons";
+import { filterDocs, type MentionDocItem as DocItem } from "./chat-helpers";
+
+/** Keys the composer forwards while the popover is open. */
+export type MentionKey = "ArrowDown" | "ArrowUp" | "Enter" | "Tab" | "Escape";
+
+/**
+ * Inline document picker anchored to the composer while the user types an
+ * `@query`. The textarea keeps focus, so the composer forwards navigation keys
+ * through `keyHandlerRef` instead of the popover owning the keyboard.
+ */
+export function MentionPopover({
+  workspaceId,
+  anchor,
+  query,
+  exclude,
+  keyHandlerRef,
+  onSelect,
+  onClose,
+}: {
+  workspaceId: string;
+  anchor: RefObject<HTMLElement | null>;
+  query: string;
+  exclude: DocRef[];
+  keyHandlerRef: RefObject<((key: MentionKey) => void) | null>;
+  onSelect: (ref: DocRef) => void;
+  onClose: () => void;
+}) {
+  const [docs, setDocs] = useState<DocItem[]>([]);
+  const [active, setActive] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetchDocs(workspaceId)
+      .then((res) => {
+        if (!cancelled) setDocs(res.docs);
+      })
+      .catch(() => {
+        if (!cancelled) setDocs([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [workspaceId]);
+
+  const items = useMemo(() => {
+    const excluded = new Set(exclude.map((r) => `${r.locale}/${r.type}/${r.slug}`));
+    return filterDocs(
+      docs.filter((d) => !excluded.has(`${d.locale}/${d.type}/${d.slug}`)),
+      query,
+    );
+  }, [docs, query, exclude]);
+
+  useEffect(() => {
+    setActive(0);
+  }, [query]);
+
+  useEffect(() => {
+    keyHandlerRef.current = (key) => {
+      if (key === "ArrowDown") setActive((i) => Math.min(i + 1, Math.max(items.length - 1, 0)));
+      else if (key === "ArrowUp") setActive((i) => Math.max(i - 1, 0));
+      else if (key === "Enter" || key === "Tab") {
+        const item = items[active];
+        if (item) onSelect({ locale: item.locale, type: item.type, slug: item.slug });
+        else onClose();
+      } else if (key === "Escape") onClose();
+    };
+    return () => {
+      keyHandlerRef.current = null;
+    };
+  }, [items, active, onSelect, onClose, keyHandlerRef]);
+
+  const activeId = items[active]
+    ? `mention-${items[active].locale}-${items[active].type}-${items[active].slug}`
+    : undefined;
+
+  return (
+    <Popover.Root
+      open
+      modal={false}
+      onOpenChange={(next) => {
+        if (!next) onClose();
+      }}
+    >
+      <Popover.Portal>
+        <Popover.Positioner
+          anchor={anchor}
+          side="top"
+          align="start"
+          sideOffset={6}
+          className={cx(popup.positioner)}
+        >
+          <Popover.Popup
+            initialFocus={false}
+            finalFocus={false}
+            role="listbox"
+            aria-label="Mention a document"
+            aria-activedescendant={activeId}
+            className={(state) => popupClassName(state, styles.popup)}
+          >
+            {items.length === 0 ? (
+              <p {...stylex.props(popup.empty)}>
+                {docs.length === 0 ? "No documents yet" : "No matches"}
+              </p>
+            ) : (
+              items.map((item, i) => (
+                <div
+                  key={`${item.locale}/${item.type}/${item.slug}`}
+                  id={`mention-${item.locale}-${item.type}-${item.slug}`}
+                  role="option"
+                  aria-selected={i === active}
+                  onMouseEnter={() => setActive(i)}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onClick={() => onSelect({ locale: item.locale, type: item.type, slug: item.slug })}
+                  {...stylex.props(popup.item, styles.item, i === active && popup.itemHighlighted)}
+                >
+                  <FileIcon size={12} />
+                  <span {...stylex.props(styles.label)}>
+                    {item.type}/{item.slug}
+                  </span>
+                  <span {...stylex.props(popup.itemMeta)}>
+                    {item.locale}
+                    {item.status === "added"
+                      ? " · new"
+                      : item.status !== "clean"
+                        ? ` · ${item.status}`
+                        : ""}
+                  </span>
+                </div>
+              ))
+            )}
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
+
+const styles = stylex.create({
+  popup: {
+    width: "var(--anchor-width)",
+    maxHeight: "min(var(--available-height), 240px)",
+  },
+  item: {
+    cursor: "pointer",
+    color: colors.text,
+  },
+  label: {
+    fontFamily: type.mono,
+    fontSize: type.xs,
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+});

package/src/chat/ModelPicker.tsx

@@ -0,0 +1,113 @@
+// packages/studio/src/chat/ModelPicker.tsx
+import { Select } from "@base-ui/react/select";
+import * as stylex from "@stylexjs/stylex";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { cx, popup, popupClassName } from "../ui/popup";
+import { useChatUI } from "./ChatProvider";
+import { CheckIcon, ChevronDownIcon } from "./icons";
+
+const hover = "@media (hover: hover)";
+
+export function ModelPicker() {
+  const ui = useChatUI();
+  if (ui.models.length === 0) return null;
+
+  const current = ui.models.find((m) => m.id === ui.model) ?? ui.models[0]!;
+  const single = ui.models.length < 2;
+
+  return (
+    <Select.Root
+      value={current.id}
+      onValueChange={(next) => {
+        if (typeof next === "string") ui.setModel(next);
+      }}
+      items={ui.models.map((m) => ({ value: m.id, label: m.label }))}
+      disabled={single}
+    >
+      <Select.Trigger aria-label="Model" className={cx(styles.trigger)}>
+        <Select.Value className={cx(styles.label)} />
+        {single ? null : (
+          <Select.Icon className={cx(styles.icon)}>
+            <ChevronDownIcon size={11} />
+          </Select.Icon>
+        )}
+      </Select.Trigger>
+      <Select.Portal>
+        <Select.Positioner
+          side="top"
+          align="end"
+          sideOffset={6}
+          alignItemWithTrigger={false}
+          className={cx(popup.positioner)}
+        >
+          <Select.Popup className={(state) => popupClassName(state, styles.popup)}>
+            <Select.List>
+              {ui.models.map((m) => (
+                <Select.Item
+                  key={m.id}
+                  value={m.id}
+                  label={m.label}
+                  className={(state) =>
+                    cx(
+                      popup.item,
+                      state.highlighted && popup.itemHighlighted,
+                      state.selected && popup.itemSelected,
+                    )
+                  }
+                >
+                  <span {...stylex.props(popup.itemIndicator)}>
+                    <Select.ItemIndicator>
+                      <CheckIcon size={12} />
+                    </Select.ItemIndicator>
+                  </span>
+                  <Select.ItemText>{m.label}</Select.ItemText>
+                  <span {...stylex.props(popup.itemMeta)}>{m.provider}</span>
+                </Select.Item>
+              ))}
+            </Select.List>
+          </Select.Popup>
+        </Select.Positioner>
+      </Select.Portal>
+    </Select.Root>
+  );
+}
+
+const styles = stylex.create({
+  trigger: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    height: 28,
+    paddingInline: space.sm,
+    borderWidth: 0,
+    borderRadius: radius.md,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
+    fontFamily: type.sans,
+    fontSize: type.sm,
+    cursor: "pointer",
+    outline: "none",
+    [hover]: {
+      ":hover": { backgroundColor: colors.bgHover, color: colors.text },
+    },
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: -1,
+    },
+    ":disabled": { cursor: "default" },
+  },
+  label: {
+    maxWidth: 140,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  icon: {
+    display: "inline-flex",
+  },
+  popup: {
+    minWidth: 200,
+  },
+});