@backmatter/studio 0.0.1

package/src/chat/Shimmer.tsx

@@ -0,0 +1,39 @@
+// packages/studio/src/chat/Shimmer.tsx
+//
+// Text with a soft highlight sweeping across it. Used for transient status
+// copy ("Thinking…", running tool calls) instead of a pulsing opacity.
+import type { ReactNode } from "react";
+import * as stylex from "@stylexjs/stylex";
+import { colors } from "../styles/tokens.stylex";
+
+const sweep = stylex.keyframes({
+  "0%": { backgroundPosition: "200% 0" },
+  "100%": { backgroundPosition: "-200% 0" },
+});
+
+export function Shimmer({ children }: { children: ReactNode }) {
+  return <span {...stylex.props(styles.text)}>{children}</span>;
+}
+
+const styles = stylex.create({
+  text: {
+    color: {
+      default: "transparent",
+      "@media (prefers-reduced-motion: reduce)": colors.textMuted,
+    },
+    backgroundImage: {
+      default: `linear-gradient(90deg, ${colors.textMuted} 0%, ${colors.textMuted} 35%, ${colors.text} 50%, ${colors.textMuted} 65%, ${colors.textMuted} 100%)`,
+      "@media (prefers-reduced-motion: reduce)": "none",
+    },
+    backgroundSize: "200% 100%",
+    backgroundClip: "text",
+    WebkitBackgroundClip: "text",
+    animationName: {
+      default: sweep,
+      "@media (prefers-reduced-motion: reduce)": "none",
+    },
+    animationDuration: "1.8s",
+    animationTimingFunction: "linear",
+    animationIterationCount: "infinite",
+  },
+});

package/src/chat/ThreadHistory.tsx

@@ -0,0 +1,268 @@
+// packages/studio/src/chat/ThreadHistory.tsx
+import { useEffect, useMemo, useState } from "react";
+import * as stylex from "@stylexjs/stylex";
+import { deleteThread, fetchThreads, type ChatThread } from "../api";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { ConfirmDialog } from "../ui/ConfirmDialog";
+import { Tooltip } from "../ui/Tooltip";
+import { useChatUI } from "./ChatProvider";
+import { PlusIcon, SearchIcon, TrashIcon } from "./icons";
+import { groupThreadsByDay } from "./chat-helpers";
+
+const hover = "@media (hover: hover)";
+
+export function ThreadHistory() {
+  const ui = useChatUI();
+  const [threads, setThreads] = useState<ChatThread[] | null>(null);
+  const [query, setQuery] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [pendingDelete, setPendingDelete] = useState<ChatThread | null>(null);
+  const [deleting, setDeleting] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetchThreads(ui.workspaceId)
+      .then((res) => {
+        if (!cancelled) setThreads(res.threads);
+      })
+      .catch((err: Error) => {
+        if (!cancelled) setError(err.message);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [ui.workspaceId, ui.threadsVersion]);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    const list = (threads ?? []).filter((t) => !q || t.title.toLowerCase().includes(q));
+    return groupThreadsByDay(list);
+  }, [threads, query]);
+
+  async function remove(thread: ChatThread) {
+    setDeleting(true);
+    try {
+      await deleteThread(ui.workspaceId, thread.id);
+      setThreads((prev) => (prev ?? []).filter((t) => t.id !== thread.id));
+      if (ui.threadId === thread.id) ui.newThread();
+      ui.bumpThreads();
+      setPendingDelete(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Delete failed");
+      setPendingDelete(null);
+    } finally {
+      setDeleting(false);
+    }
+  }
+
+  return (
+    <div {...stylex.props(styles.wrap)}>
+      <ConfirmDialog
+        open={pendingDelete !== null}
+        onOpenChange={(open) => {
+          if (!open && !deleting) setPendingDelete(null);
+        }}
+        title="Delete this chat?"
+        description={
+          <>
+            “{pendingDelete?.title || "New chat"}” and its messages will be removed. Content
+            changes already kept in your working tree are not affected.
+          </>
+        }
+        confirmLabel={deleting ? "Deleting…" : "Delete"}
+        destructive
+        busy={deleting}
+        onConfirm={() => (pendingDelete ? remove(pendingDelete) : undefined)}
+      />
+      <div {...stylex.props(styles.toolbar)}>
+        <div {...stylex.props(styles.search)}>
+          <SearchIcon size={12} />
+          <input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search chats…"
+            aria-label="Search chats"
+            {...stylex.props(styles.searchInput)}
+          />
+        </div>
+        <button type="button" onClick={() => ui.newThread()} {...stylex.props(styles.newBtn)}>
+          <PlusIcon size={12} />
+          New chat
+        </button>
+      </div>
+      <div {...stylex.props(styles.list)}>
+        {error ? (
+          <p {...stylex.props(styles.empty)}>{error}</p>
+        ) : threads === null ? (
+          <p {...stylex.props(styles.empty)}>Loading…</p>
+        ) : filtered.length === 0 ? (
+          <p {...stylex.props(styles.empty)}>
+            {threads.length === 0 ? "No chats yet." : "No matches."}
+          </p>
+        ) : (
+          filtered.map((group) => (
+            <div key={group.label}>
+              <p {...stylex.props(styles.group)}>{group.label}</p>
+              {group.threads.map((t) => (
+                <div
+                  key={t.id}
+                  {...stylex.props(styles.row, t.id === ui.threadId && styles.rowActive)}
+                >
+                  <button
+                    type="button"
+                    onClick={() => ui.openThread(t.id)}
+                    {...stylex.props(styles.rowBtn)}
+                  >
+                    <span {...stylex.props(styles.title)}>{t.title || "New chat"}</span>
+                    <span {...stylex.props(styles.meta)}>{t.branch}</span>
+                  </button>
+                  <Tooltip label="Delete chat">
+                    <button
+                      type="button"
+                      aria-label={`Delete chat ${t.title || "New chat"}`}
+                      onClick={() => setPendingDelete(t)}
+                      {...stylex.props(styles.delete)}
+                    >
+                      <TrashIcon size={12} />
+                    </button>
+                  </Tooltip>
+                </div>
+              ))}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+const styles = stylex.create({
+  wrap: {
+    display: "flex",
+    flex: 1,
+    minHeight: 0,
+    flexDirection: "column",
+  },
+  toolbar: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.sm,
+    padding: space.md,
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: colors.border,
+  },
+  search: {
+    display: "flex",
+    flex: 1,
+    alignItems: "center",
+    gap: space.sm,
+    height: 28,
+    paddingInline: space.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgInput,
+    color: colors.textMuted,
+    ":focus-within": { borderColor: colors.focus },
+  },
+  searchInput: {
+    flex: 1,
+    minWidth: 0,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    color: colors.text,
+    fontSize: type.sm,
+    outline: "none",
+  },
+  newBtn: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+    height: 28,
+    paddingInline: space.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgSurface,
+    color: colors.text,
+    fontSize: type.sm,
+    fontWeight: 500,
+    cursor: "pointer",
+    [hover]: { ":hover": { backgroundColor: colors.bgHover } },
+  },
+  list: {
+    flex: 1,
+    minHeight: 0,
+    overflowY: "auto",
+    paddingBlock: space.sm,
+  },
+  group: {
+    margin: 0,
+    paddingInline: space.lg,
+    paddingBlock: space.sm,
+    fontSize: type.xs,
+    fontWeight: 600,
+    letterSpacing: "0.08em",
+    textTransform: "uppercase",
+    color: colors.textMuted,
+  },
+  row: {
+    display: "flex",
+    alignItems: "center",
+    paddingInline: space.sm,
+    [hover]: { ":hover": { backgroundColor: colors.bgHover } },
+  },
+  rowActive: {
+    backgroundColor: colors.bgActive,
+  },
+  rowBtn: {
+    display: "flex",
+    flex: 1,
+    minWidth: 0,
+    alignItems: "center",
+    gap: space.md,
+    paddingInline: space.sm,
+    paddingBlock: space.md,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    color: colors.text,
+    fontSize: type.sm,
+    textAlign: "left",
+    cursor: "pointer",
+  },
+  title: {
+    flex: 1,
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  meta: {
+    flexShrink: 0,
+    fontFamily: type.mono,
+    fontSize: type.xs,
+    color: colors.textMuted,
+  },
+  delete: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 24,
+    height: 24,
+    borderWidth: 0,
+    borderRadius: radius.sm,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
+    cursor: "pointer",
+    [hover]: { ":hover": { color: colors.danger, backgroundColor: colors.bgHover } },
+  },
+  empty: {
+    margin: 0,
+    padding: space.xl,
+    fontSize: type.sm,
+    color: colors.textMuted,
+  },
+});

package/src/chat/chat-context.ts

@@ -0,0 +1,41 @@
+// packages/studio/src/chat/chat-context.ts
+import {
+  sameDocRef,
+  type DocRef,
+  type EditorFocus,
+} from "../chrome/EditorFocusContext";
+
+/** Request context sent with every chat message (mirrors the server's ChatRequestContext). */
+export type ChatRequestContext = {
+  focusDoc: DocRef | null;
+  selection: { start: number; end: number } | null;
+  mentions: DocRef[];
+};
+
+export function buildChatContext(input: {
+  focus: EditorFocus | null;
+  includeFocus: boolean;
+  mentions: DocRef[];
+}): ChatRequestContext {
+  const focusDoc = input.includeFocus && input.focus ? input.focus.docRef : null;
+  const selection =
+    focusDoc && input.focus?.selection && input.focus.selection.end > input.focus.selection.start
+      ? input.focus.selection
+      : null;
+  const mentions: DocRef[] = [];
+  for (const m of input.mentions) {
+    if (sameDocRef(m, focusDoc)) continue;
+    if (mentions.some((x) => sameDocRef(x, m))) continue;
+    mentions.push({ locale: m.locale, type: m.type, slug: m.slug });
+  }
+  return { focusDoc, selection, mentions };
+}
+
+export function addMention(list: DocRef[], ref: DocRef): DocRef[] {
+  if (list.some((x) => sameDocRef(x, ref))) return list;
+  return [...list, ref];
+}
+
+export function removeMention(list: DocRef[], ref: DocRef): DocRef[] {
+  return list.filter((x) => !sameDocRef(x, ref));
+}