@cueloop/client 0.1.0-alpha.71 → 0.1.0-alpha.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.71",
+  "version": "0.1.0-alpha.72",
   "description": "The cueloop review UI: projection renderer, keyboard grammar, review rail",
   "homepage": "https://github.com/mmurakaru/cueloop#readme",
   "bugs": {
@@ -27,10 +27,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@cueloop/daemon": "0.1.0-alpha.71",
-    "@cueloop/extension-api": "0.1.0-alpha.71",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.71",
-    "@cueloop/schema": "0.1.0-alpha.71",
+    "@cueloop/daemon": "0.1.0-alpha.72",
+    "@cueloop/extension-api": "0.1.0-alpha.72",
+    "@cueloop/integration-obsidian": "0.1.0-alpha.72",
+    "@cueloop/schema": "0.1.0-alpha.72",
     "@opentui/core": "^0.5.8",
     "@opentui/keymap": "0.5.8",
     "@opentui/react": "^0.5.8",

package/src/App.tsx

@@ -21,8 +21,8 @@ import {
   type DiffViewMode,
   type QuickAction,
 } from "./config";
-import { loadSkills, SlashSkillsContext } from "./skills";
-import type { SlashItem } from "./slash-palette";
+import { loadSkills, PaletteNamesContext, SlashSkillsContext } from "./skills";
+import { mergeSlashItems, slashItemsFrom, type SlashItem } from "./slash-palette";
 import {
   composeTheme,
   DEFAULT_THEME_NAME,
@@ -490,6 +490,10 @@ export function App({
   const [authorNames, setAuthorNames] = useState<Record<string, string>>({});
   const [quickActions, setQuickActions] = useState<QuickAction[]>(DEFAULT_QUICK_ACTIONS);
   const [skills, setSkills] = useState<SlashItem[]>([]);
+  const paletteNames = useMemo(
+    () => new Set(mergeSlashItems(slashItemsFrom(quickActions), skills).map((item) => item.name)),
+    [quickActions, skills],
+  );
   // opt-in: render a prototype as a kitty pixel mockup instead of the markdown doc
   const [prototypePixels, setPrototypePixels] = useState(false);
 
@@ -792,23 +796,25 @@ export function App({
   if (!session)
     return inbox ? (
       <SlashSkillsContext.Provider value={skills}>
-        <NoThreadShell
-          rows={grouped.rows}
-          inboxCursor={inboxCursor}
-          mode={mode}
-          theme={theme}
-          controller={controller}
-          setMode={setMode}
-          menuChrome={menuChrome}
-          onOpenMenu={() => setMenuDialog("settings")}
-          sidebarOpen={sidebarOpen}
-          onToggleSidebar={() => setSidebarOpen((open) => !open)}
-          pinnedIds={pinnedIds}
-          onPin={togglePin}
-          onRename={(id, title) => setMode({ type: "renameThread", sessionId: id, text: title })}
-          quickActions={quickActions}
-          onWelcomeComposingChange={setWelcomeComposing}
-        />
+        <PaletteNamesContext.Provider value={paletteNames}>
+          <NoThreadShell
+            rows={grouped.rows}
+            inboxCursor={inboxCursor}
+            mode={mode}
+            theme={theme}
+            controller={controller}
+            setMode={setMode}
+            menuChrome={menuChrome}
+            onOpenMenu={() => setMenuDialog("settings")}
+            sidebarOpen={sidebarOpen}
+            onToggleSidebar={() => setSidebarOpen((open) => !open)}
+            pinnedIds={pinnedIds}
+            onPin={togglePin}
+            onRename={(id, title) => setMode({ type: "renameThread", sessionId: id, text: title })}
+            quickActions={quickActions}
+            onWelcomeComposingChange={setWelcomeComposing}
+          />
+        </PaletteNamesContext.Provider>
       </SlashSkillsContext.Provider>
     ) : (
       <ConnectingScreen theme={theme} />
@@ -890,221 +896,225 @@ export function App({
 
   return (
     <SlashSkillsContext.Provider value={skills}>
-      <ThemeProvider theme={theme}>
-        <AppShell
-          sidebarOpen={sidebarOpen}
-          onToggleSidebar={() => setSidebarOpen((open) => !open)}
-          onOpenMenu={() => setMenuDialog("settings")}
-          threadsPanel={
-            <scrollbox style={{ flexGrow: 1 }} focused={false}>
-              <ThreadTree
-                rows={grouped.rows}
-                cursor={inboxCursor}
-                activeId={activeSession.id}
-                pinnedIds={pinnedIds}
-                width={30}
-                onSelect={(id) => controller.open(id)}
-                onPin={togglePin}
-                onRename={(id, title) =>
-                  setMode({ type: "renameThread", sessionId: id, text: title })
-                }
-                theme={theme}
-              />
-            </scrollbox>
-          }
-          threadTitle={threadTitle(activeSession)}
-          threadActions={
-            showOwnerActions ? (
-              <Toolbar>
-                <Button onPress={onEditRequest} theme={theme}>
-                  {" edit "}
-                </Button>
-                <Button onPress={onShareRequest} theme={theme}>
-                  {" share "}
-                </Button>
-              </Toolbar>
-            ) : undefined
-          }
-          threadPanel={
-            <box style={{ flexGrow: 1, flexDirection: "column" }}>
-              <box style={{ flexGrow: 1, flexDirection: "row" }}>
-                {isPixelPrototype ? (
-                  <PrototypePixels
-                    prototypePath={prototypePath}
-                    canComment={prototypeCanComment}
-                    onCommentElement={onCommentPrototype}
-                    onComposingChange={setPrototypeComposing}
-                    hidden={chromeHidden}
-                  />
-                ) : isDiff ? (
-                  <box style={{ flexGrow: 1, paddingLeft: 2, paddingTop: 1 }}>
-                    <text fg={theme.textDim}>review the changes on the right</text>
-                  </box>
-                ) : (
-                  <ThreadView
-                    session={activeSession}
-                    suspended={threadViewSuspended}
-                    editOrphanCount={editOrphanCount}
-                    onComposingChange={setThreadComposing}
-                    resolved={resolved}
-                    onObserverBlocked={(reason) =>
-                      controller.setStatus(
-                        reason === "observer"
-                          ? "observer - read-only"
-                          : "review submitted - read-only",
-                      )
-                    }
-                    onCursorChange={setCursor}
-                    focusedAnnotationId={focusedAnnotationId}
-                    onFocusAnnotation={setFocusedAnnotationId}
-                    display={display}
-                    marks={marks}
-                    quickActions={quickActions}
-                    observer={observer}
-                    onAnnotate={(span, body) =>
-                      void controller.annotate(
-                        "comment",
-                        span.start.blockIndex,
-                        span.start.char,
-                        span.end.char,
+      <PaletteNamesContext.Provider value={paletteNames}>
+        <ThemeProvider theme={theme}>
+          <AppShell
+            sidebarOpen={sidebarOpen}
+            onToggleSidebar={() => setSidebarOpen((open) => !open)}
+            onOpenMenu={() => setMenuDialog("settings")}
+            threadsPanel={
+              <scrollbox style={{ flexGrow: 1 }} focused={false}>
+                <ThreadTree
+                  rows={grouped.rows}
+                  cursor={inboxCursor}
+                  activeId={activeSession.id}
+                  pinnedIds={pinnedIds}
+                  width={30}
+                  onSelect={(id) => controller.open(id)}
+                  onPin={togglePin}
+                  onRename={(id, title) =>
+                    setMode({ type: "renameThread", sessionId: id, text: title })
+                  }
+                  theme={theme}
+                />
+              </scrollbox>
+            }
+            threadTitle={threadTitle(activeSession)}
+            threadActions={
+              showOwnerActions ? (
+                <Toolbar>
+                  <Button onPress={onEditRequest} theme={theme}>
+                    {" edit "}
+                  </Button>
+                  <Button onPress={onShareRequest} theme={theme}>
+                    {" share "}
+                  </Button>
+                </Toolbar>
+              ) : undefined
+            }
+            threadPanel={
+              <box style={{ flexGrow: 1, flexDirection: "column" }}>
+                <box style={{ flexGrow: 1, flexDirection: "row" }}>
+                  {isPixelPrototype ? (
+                    <PrototypePixels
+                      prototypePath={prototypePath}
+                      canComment={prototypeCanComment}
+                      onCommentElement={onCommentPrototype}
+                      onComposingChange={setPrototypeComposing}
+                      hidden={chromeHidden}
+                    />
+                  ) : isDiff ? (
+                    <box style={{ flexGrow: 1, paddingLeft: 2, paddingTop: 1 }}>
+                      <text fg={theme.textDim}>review the changes on the right</text>
+                    </box>
+                  ) : (
+                    <ThreadView
+                      session={activeSession}
+                      suspended={threadViewSuspended}
+                      editOrphanCount={editOrphanCount}
+                      onComposingChange={setThreadComposing}
+                      resolved={resolved}
+                      onObserverBlocked={(reason) =>
+                        controller.setStatus(
+                          reason === "observer"
+                            ? "observer - read-only"
+                            : "review submitted - read-only",
+                        )
+                      }
+                      onCursorChange={setCursor}
+                      focusedAnnotationId={focusedAnnotationId}
+                      onFocusAnnotation={setFocusedAnnotationId}
+                      display={display}
+                      marks={marks}
+                      quickActions={quickActions}
+                      observer={observer}
+                      onAnnotate={(span, body) =>
+                        void controller.annotate(
+                          "comment",
+                          span.start.blockIndex,
+                          span.start.char,
+                          span.end.char,
+                          body,
+                          span.end.blockIndex,
+                        )
+                      }
+                      onReply={(rootAnnotationId, body) =>
+                        void controller.reply(rootAnnotationId, body)
+                      }
+                      onUpdateAnnotation={(id, body) => controller.updateAnnotation(id, body)}
+                      onExit={() => onExit?.(0)}
+                    />
+                  )}
+                </box>
+                {threadFooter}
+              </box>
+            }
+            changesOpen={workbench.changesOpen}
+            projectOpen={workbench.projectOpen}
+            onToggleChanges={workbench.toggleChanges}
+            onToggleProject={workbench.toggleProject}
+            onToggleRight={workbench.toggleRight}
+            projectMode={workbench.projectMode}
+            zoomHideThread={workbench.zoomed}
+            changesFooter={threadFooter}
+            changesPanel={
+              <EditorGrid
+                tree={workbench.grid}
+                focusedGroupId={workbench.activeGroup}
+                commentCounts={diffCommentCounts}
+                onFocusGroup={workbench.focusGroup}
+                onActivateTab={workbench.activate}
+                onCloseTab={workbench.close}
+                onSplit={workbench.split}
+                onZoom={workbench.toggleZoom}
+                zoomed={workbench.zoomed}
+                renderTab={(tab, groupFocused) => (
+                  <GridTabContent
+                    tab={tab}
+                    rows={rows}
+                    surface={{
+                      session: activeSession,
+                      quickActions,
+                      observer,
+                      commentsEnabled: true,
+                      resolved,
+                      suspended: threadViewSuspended || !groupFocused,
+                      onComposingChange: setThreadComposing,
+                      onObserverBlocked: (reason) =>
+                        controller.setStatus(
+                          reason === "observer"
+                            ? "observer - read-only"
+                            : "review submitted - read-only",
+                        ),
+                      onCursorChange: setCursor,
+                      focusedAnnotationId,
+                      onFocusAnnotation: setFocusedAnnotationId,
+                      // a diff thread's Changes view is the artifact itself; any other thread's is the
+                      // live working-tree diff, so its notes carry a file target and anchor there
+                      onAnnotate: (span, body) =>
+                        void controller.annotate(
+                          "comment",
+                          span.start.blockIndex,
+                          span.start.char,
+                          span.end.char,
+                          body,
+                          span.end.blockIndex,
+                          isDiff
+                            ? { kind: "artifact" }
+                            : { kind: "file", path: "", rev: "worktree" },
+                        ),
+                      onReply: (rootAnnotationId, body) =>
+                        void controller.reply(rootAnnotationId, body),
+                      onUpdateAnnotation: (id, body) => controller.updateAnnotation(id, body),
+                      onExit: () => onExit?.(0),
+                    }}
+                    rejectedRows={rejectedRows}
+                    fold={diffFold}
+                    fileStats={controller.fileStats()}
+                    split={diffView === "split" && workbench.zoomed}
+                    dimmed={walking}
+                    readFile={(path) => controller.repoReadFile(path)}
+                    onAddFileComment={(path, anchor, body) =>
+                      void controller.addComment(
+                        anchor,
+                        { kind: "file", path, rev: "worktree" },
                         body,
-                        span.end.blockIndex,
                       )
                     }
-                    onReply={(rootAnnotationId, body) =>
-                      void controller.reply(rootAnnotationId, body)
-                    }
-                    onUpdateAnnotation={(id, body) => controller.updateAnnotation(id, body)}
-                    onExit={() => onExit?.(0)}
+                    theme={theme}
                   />
                 )}
-              </box>
-              {threadFooter}
-            </box>
-          }
-          changesOpen={workbench.changesOpen}
-          projectOpen={workbench.projectOpen}
-          onToggleChanges={workbench.toggleChanges}
-          onToggleProject={workbench.toggleProject}
-          onToggleRight={workbench.toggleRight}
-          projectMode={workbench.projectMode}
-          zoomHideThread={workbench.zoomed}
-          changesFooter={threadFooter}
-          changesPanel={
-            <EditorGrid
-              tree={workbench.grid}
-              focusedGroupId={workbench.activeGroup}
-              commentCounts={diffCommentCounts}
-              onFocusGroup={workbench.focusGroup}
-              onActivateTab={workbench.activate}
-              onCloseTab={workbench.close}
-              onSplit={workbench.split}
-              onZoom={workbench.toggleZoom}
-              zoomed={workbench.zoomed}
-              renderTab={(tab, groupFocused) => (
-                <GridTabContent
-                  tab={tab}
-                  rows={rows}
-                  surface={{
-                    session: activeSession,
-                    quickActions,
-                    observer,
-                    commentsEnabled: true,
-                    resolved,
-                    suspended: threadViewSuspended || !groupFocused,
-                    onComposingChange: setThreadComposing,
-                    onObserverBlocked: (reason) =>
-                      controller.setStatus(
-                        reason === "observer"
-                          ? "observer - read-only"
-                          : "review submitted - read-only",
-                      ),
-                    onCursorChange: setCursor,
-                    focusedAnnotationId,
-                    onFocusAnnotation: setFocusedAnnotationId,
-                    // a diff thread's Changes view is the artifact itself; any other thread's is the
-                    // live working-tree diff, so its notes carry a file target and anchor there
-                    onAnnotate: (span, body) =>
-                      void controller.annotate(
-                        "comment",
-                        span.start.blockIndex,
-                        span.start.char,
-                        span.end.char,
-                        body,
-                        span.end.blockIndex,
-                        isDiff ? { kind: "artifact" } : { kind: "file", path: "", rev: "worktree" },
-                      ),
-                    onReply: (rootAnnotationId, body) =>
-                      void controller.reply(rootAnnotationId, body),
-                    onUpdateAnnotation: (id, body) => controller.updateAnnotation(id, body),
-                    onExit: () => onExit?.(0),
-                  }}
-                  rejectedRows={rejectedRows}
-                  fold={diffFold}
-                  fileStats={controller.fileStats()}
-                  split={diffView === "split" && workbench.zoomed}
-                  dimmed={walking}
-                  readFile={(path) => controller.repoReadFile(path)}
-                  onAddFileComment={(path, anchor, body) =>
-                    void controller.addComment(
-                      anchor,
-                      { kind: "file", path, rev: "worktree" },
-                      body,
-                    )
-                  }
-                  theme={theme}
-                />
-              )}
-              theme={theme}
-            />
-          }
-          projectPanel={
-            <ProjectPanelBody
-              mode={workbench.projectMode}
-              loadChanges={() => controller.repoChanges()}
-              loadProjectFiles={() => controller.repoFiles()}
-              reloadKey={activeSession.id}
-              // the Changes navigator always opens a changed file as a diff - a diff review shows its
-              // captured snapshot, every other thread the live working-tree diff
-              onOpenChangedFile={(path) => workbench.openFile(path, "diff")}
-              onOpenProjectFile={(path) => workbench.openFile(path, "contents")}
-              commentCounts={diffCommentCounts}
+                theme={theme}
+              />
+            }
+            projectPanel={
+              <ProjectPanelBody
+                mode={workbench.projectMode}
+                loadChanges={() => controller.repoChanges()}
+                loadProjectFiles={() => controller.repoFiles()}
+                reloadKey={activeSession.id}
+                // the Changes navigator always opens a changed file as a diff - a diff review shows its
+                // captured snapshot, every other thread the live working-tree diff
+                onOpenChangedFile={(path) => workbench.openFile(path, "diff")}
+                onOpenProjectFile={(path) => workbench.openFile(path, "contents")}
+                commentCounts={diffCommentCounts}
+                theme={theme}
+              />
+            }
+            theme={theme}
+          >
+            <TrailingOverlays
+              walking={walking}
+              walk={walk}
+              walkFileList={walkFileList}
+              viewedPaths={viewedPaths}
+              session={activeSession}
+              terminalWidth={terminalWidth}
               theme={theme}
+              mode={mode}
+              toast={toast}
+              setMode={setMode}
+              dispatch={dispatch}
             />
-          }
-          theme={theme}
-        >
-          <TrailingOverlays
-            walking={walking}
-            walk={walk}
-            walkFileList={walkFileList}
-            viewedPaths={viewedPaths}
-            session={activeSession}
-            terminalWidth={terminalWidth}
-            theme={theme}
-            mode={mode}
-            toast={toast}
-            setMode={setMode}
-            dispatch={dispatch}
-          />
-          {submitConfirmState !== null ? (
-            <box
-              style={{
-                position: "absolute",
-                left: 0,
-                top: 0,
-                width: "100%",
-                height: "100%",
-                justifyContent: "center",
-                alignItems: "center",
-              }}
-            >
-              <ConfirmCard {...submitConfirmState} theme={theme} />
-            </box>
-          ) : null}
-          {menuChrome}
-        </AppShell>
-      </ThemeProvider>
+            {submitConfirmState !== null ? (
+              <box
+                style={{
+                  position: "absolute",
+                  left: 0,
+                  top: 0,
+                  width: "100%",
+                  height: "100%",
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+              >
+                <ConfirmCard {...submitConfirmState} theme={theme} />
+              </box>
+            ) : null}
+            {menuChrome}
+          </AppShell>
+        </ThemeProvider>
+      </PaletteNamesContext.Provider>
     </SlashSkillsContext.Provider>
   );
 }

package/src/components/AnnotationCards.stories.tsx

@@ -78,7 +78,6 @@ export const SlashPaletteOpen: Story = {
       slashActive
       slashItems={slashItemsFrom(DEFAULT_QUICK_ACTIONS)}
       slashIndex={1}
-      inline={null}
       tokens={DARK}
     />
   ),

package/src/components/AnnotationCards.tsx

@@ -1,18 +1,20 @@
 /**
  * The inline comment pieces every annotated surface renders: the composer (a
- * textarea in a card row), the "/" palette and inline completion hint below it,
- * the edge-segmented discussion card, and one comment row. The plan thread view
+ * textarea in a card row), the "/" actions-and-skills palette below it, the
+ * edge-segmented discussion card, and one comment row. The plan thread view
  * and the diff sheet both draw their comments with these, so a discussion looks
  * and behaves the same on prose and on code.
  */
 
-import React, { useEffect, useRef, useState } from "react";
+import React, { useContext, useLayoutEffect, useRef, useState } from "react";
 import type { BoxRenderable, KeyBinding, TextareaRenderable } from "@opentui/core";
 import type { Annotation } from "@cueloop/schema";
 import type { Theme } from "../theme";
 import { lighten } from "../annotation-palette";
 import { useFrameMeasure } from "../use-frame-measure";
-import type { InlineSlash, SlashItem } from "../slash-palette";
+import { skillReferenceRanges, type SlashItem } from "../slash-palette";
+import { PaletteNamesContext } from "../skills";
+import { referenceStyleFor } from "./syntax-highlight";
 
 /* -------------------------------------------------------------- composer */
 
@@ -52,18 +54,32 @@ export function Composer({
   tokens: Theme;
   onSave: (body: string) => void;
   onReady: () => void;
-  onInput: (text: string) => void;
+  onInput: (text: string, caret: number) => void;
 }): React.ReactNode {
   const editorRef = useRef<TextareaRenderable | null>(null);
   const [rows, setRows] = useState(1);
+  // action and skill names whose "/name" references paint in the accent color
+  const referenceNames = useContext(PaletteNamesContext);
 
-  // once per mount (the composer is keyed by its seed): later re-renders
-  // must NOT reset the caret, or input lands before a just-typed newline
-  useEffect(() => {
+  const paintReferences = (editor: TextareaRenderable): void => {
+    const { styleId } = referenceStyleFor(tokens);
+
+    editor.editBuffer.clearAllHighlights();
+    for (const range of skillReferenceRanges(editor.plainText, referenceNames)) {
+      editor.editBuffer.addHighlightByCharRange({ ...range, styleId });
+    }
+  };
+
+  // synchronously at commit, before the next tty key is read: signalling readiness in a
+  // post-paint effect lets a fast burst race the mount, splitting input between the seed
+  // buffer and this textarea out of order (#365)
+  useLayoutEffect(() => {
     const editor = editorRef.current;
 
     if (!editor) return;
     editor.cursorOffset = seed.length;
+    editor.editBuffer.setSyntaxStyle(referenceStyleFor(tokens).style);
+    paintReferences(editor);
     setRows(composeRowCount(editor.plainText, editor.width));
     onReady();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -83,8 +99,9 @@ export function Composer({
           const editor = editorRef.current;
 
           if (!editor) return;
+          paintReferences(editor);
           setRows(composeRowCount(editor.plainText, editor.width));
-          onInput(editor.plainText);
+          onInput(editor.plainText, editor.cursorOffset);
         }}
         style={{
           height: rows,
@@ -139,40 +156,27 @@ function SlashList({
   );
 }
 
-/** Below the composer: the palette list for a leading "/", else the inline tab-hint, else nothing. */
+/** Below the composer: the actions/skills list while the caret is on a "/word", else nothing. */
 export function ComposerPalette({
   slashActive,
   slashItems,
   slashIndex,
-  inline,
   tokens,
 }: {
   slashActive: boolean;
   slashItems: SlashItem[];
   slashIndex: number;
-  inline: InlineSlash | null;
   tokens: Theme;
 }): React.ReactNode {
-  if (slashActive) {
-    return (
-      <box style={{ flexDirection: "column", marginLeft: 3 }}>
-        <SlashList
-          items={slashItems}
-          selected={Math.min(slashIndex, Math.max(0, slashItems.length - 1))}
-          tokens={tokens}
-        />
-      </box>
-    );
-  }
-  if (inline === null) return null;
+  if (!slashActive) return null;
 
   return (
-    <box style={{ flexDirection: "row", marginLeft: 3 }}>
-      <text>
-        <span fg={tokens.textDim}>{"⇥ "}</span>
-        <span fg={tokens.accent}>{`/${inline.suggestion.name}`}</span>
-        <span fg={tokens.textDim}>{`  ${inline.suggestion.description}`}</span>
-      </text>
+    <box style={{ flexDirection: "column", marginLeft: 3 }}>
+      <SlashList
+        items={slashItems}
+        selected={Math.min(slashIndex, Math.max(0, slashItems.length - 1))}
+        tokens={tokens}
+      />
     </box>
   );
 }

package/src/components/ThreadView.slash.test.tsx

@@ -1,15 +1,17 @@
-/** Inline skill completion in the composer (#25): the trailing "/word" token and its match. */
+/** The "/" palette in the composer: it reopens for each "/word" the caret writes, so skills chain. */
 
 import { describe, expect, test } from "bun:test";
 import React from "react";
+import type { RGBA } from "@opentui/core";
 import { testRender } from "@opentui/react/test-utils";
 import type { QuickAction } from "../config";
 import { settle, typeText } from "../test-support";
+import { DARK } from "../theme";
 import { buildDisplay, marksByDisplay } from "../view-plan";
 import { fixturePlanSession } from "./story-fixtures";
-import { inlineSlashToken, resolveInlineSuggestion, ThreadView } from "./ThreadView";
-import { slashItemsFrom, type SlashItem } from "../slash-palette";
-import { SlashSkillsContext } from "../skills";
+import { ThreadView } from "./ThreadView";
+import { mergeSlashItems, slashItemsFrom, type SlashItem } from "../slash-palette";
+import { PaletteNamesContext, SlashSkillsContext } from "../skills";
 
 const SKILLS: QuickAction[] = [
   { prompt: "typescript magician" },
@@ -19,95 +21,35 @@ const SKILLS: QuickAction[] = [
 
 const PLAN = "# Plan\n\nRefine the store before the rewrite lands.\n";
 
-async function mountComposer() {
-  const display = buildDisplay(PLAN, undefined);
-  const setup = await testRender(
-    <ThreadView
-      session={fixturePlanSession({
-        artifact: { type: "plan", content: PLAN, meta: { title: "Plan" } },
-      })}
-      display={display}
-      marks={marksByDisplay([], display)}
-      quickActions={SKILLS}
-      observer={false}
-      onAnnotate={() => {}}
-      onReply={() => {}}
-      onUpdateAnnotation={() => {}}
-      onExit={() => {}}
-    />,
-    { width: 72, height: 20 },
-  );
+function colorToHex(color: RGBA): string {
+  const [red, green, blue] = color.toInts();
 
-  await settle(setup);
-  await settle(setup);
-
-  return setup;
+  return "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join("");
 }
 
-describe("inlineSlashToken", () => {
-  test("finds the trailing slash token when text precedes it", () => {
-    expect(inlineSlashToken("please run /type")).toBe("/type");
-  });
-
-  test("ignores a draft that is itself a leading slash (that is the palette)", () => {
-    expect(inlineSlashToken("/type")).toBeNull();
-  });
-
-  test("is newline-safe: a token at the start of a later line still resolves", () => {
-    expect(inlineSlashToken("first line\n/impl")).toBe("/impl");
-  });
-
-  test("returns null when the trailing word is not a slash token", () => {
-    expect(inlineSlashToken("just some prose")).toBeNull();
-  });
-
-  test("a bare slash mid-sentence is a valid, empty-query token", () => {
-    expect(inlineSlashToken("run /")).toBe("/");
-  });
-});
-
-describe("resolveInlineSuggestion", () => {
-  test("offers the fuzzy closest skill for the trailing token", () => {
-    const inline = resolveInlineSuggestion(false, "run /type", slashItemsFrom(SKILLS));
-
-    expect(inline?.token).toBe("/type");
-    expect(inline?.suggestion.name).toBe("typescript-magician");
-  });
-
-  test("prefers a prefix match over a subsequence match", () => {
-    const inline = resolveInlineSuggestion(false, "run /impl", slashItemsFrom(SKILLS));
-
-    expect(inline?.suggestion.name).toBe("implement");
-  });
-
-  test("stays silent while the palette owns a leading slash", () => {
-    expect(resolveInlineSuggestion(true, "/type", slashItemsFrom(SKILLS))).toBeNull();
-  });
-
-  test("returns null when nothing matches the token", () => {
-    expect(resolveInlineSuggestion(false, "run /zzzz", slashItemsFrom(SKILLS))).toBeNull();
-  });
-});
-
-async function mountComposerWithSkills(skills: SlashItem[]) {
+/** Render a plan composer, wiring the palette names into context exactly as the app does. */
+async function mountComposerWithSkills(skills: SlashItem[] = [], width = 72) {
   const display = buildDisplay(PLAN, undefined);
+  const names = new Set(mergeSlashItems(slashItemsFrom(SKILLS), skills).map((item) => item.name));
   const setup = await testRender(
     <SlashSkillsContext.Provider value={skills}>
-      <ThreadView
-        session={fixturePlanSession({
-          artifact: { type: "plan", content: PLAN, meta: { title: "Plan" } },
-        })}
-        display={display}
-        marks={marksByDisplay([], display)}
-        quickActions={SKILLS}
-        observer={false}
-        onAnnotate={() => {}}
-        onReply={() => {}}
-        onUpdateAnnotation={() => {}}
-        onExit={() => {}}
-      />
+      <PaletteNamesContext.Provider value={names}>
+        <ThreadView
+          session={fixturePlanSession({
+            artifact: { type: "plan", content: PLAN, meta: { title: "Plan" } },
+          })}
+          display={display}
+          marks={marksByDisplay([], display)}
+          quickActions={SKILLS}
+          observer={false}
+          onAnnotate={() => {}}
+          onReply={() => {}}
+          onUpdateAnnotation={() => {}}
+          onExit={() => {}}
+        />
+      </PaletteNamesContext.Provider>
     </SlashSkillsContext.Provider>,
-    { width: 72, height: 20 },
+    { width, height: 20 },
   );
 
   await settle(setup);
@@ -116,6 +58,8 @@ async function mountComposerWithSkills(skills: SlashItem[]) {
   return setup;
 }
 
+const mountComposer = () => mountComposerWithSkills();
+
 describe("skills in the palette", () => {
   test("a skill from context lists in the / palette and a pick inserts its /name", async () => {
     const setup = await mountComposerWithSkills([
@@ -132,27 +76,71 @@ describe("skills in the palette", () => {
   });
 });
 
-describe("inline completion in the composer", () => {
-  test("typing an inline slash shows the tab-hint, and tab completes to the full name", async () => {
-    // Arrange - open a composer and type text with a trailing slash token
+describe("the palette reopens per token and chains skills", () => {
+  test("a mid-sentence / opens the list, tab completes it, and a second / opens the list again", async () => {
     const setup = await mountComposer();
 
+    // a trailing "/type" opens the full list under the composer, closest skill first
     await typeText(setup, "run /type");
+    const firstList = setup.captureCharFrame();
+
+    expect(firstList).toContain("/typescript-magician");
+
+    // tab completes only that token, leaving the prose before it
+    setup.mockInput.pressKey("TAB");
+    await settle(setup);
+    const completed = setup.captureCharFrame();
 
-    // Assert - the hint offers the closest skill, marked with the tab glyph
-    const withHint = setup.captureCharFrame();
+    expect(completed).toContain("run /typescript-magician");
 
-    expect(withHint).toContain("⇥");
-    expect(withHint).toContain("/typescript-magician");
+    // a second "/" reopens the palette so another skill chains onto the draft
+    await typeText(setup, "/impl");
+    const secondList = setup.captureCharFrame();
+
+    expect(secondList).toContain("/implement");
 
-    // Act - tab completes the token
     setup.mockInput.pressKey("TAB");
     await settle(setup);
+    expect(setup.captureCharFrame()).toContain("run /typescript-magician /implement");
+  });
 
-    // Assert - the hint is gone and the composer now carries the full skill name
-    const completed = setup.captureCharFrame();
+  test("several skills picked on enter, with prose between, all persist in the draft", async () => {
+    const setup = await mountComposerWithSkills([], 120);
+
+    // pick the first skill, keep typing prose, pick the next, and so on
+    await typeText(setup, "start /type");
+    setup.mockInput.pressKey("RETURN");
+    await settle(setup);
+
+    await typeText(setup, "then run /impl");
+    setup.mockInput.pressKey("RETURN");
+    await settle(setup);
+
+    await typeText(setup, "and finally /write");
+    setup.mockInput.pressKey("RETURN");
+    await settle(setup);
+
+    // every pick landed as its full "/name", and the prose between them survived
+    expect(setup.captureCharFrame()).toContain(
+      "start /typescript-magician then run /implement and finally /write-discoverable-code",
+    );
+  });
+
+  test("a completed reference paints in the accent color", async () => {
+    const setup = await mountComposer();
+
+    await typeText(setup, "please /type");
+    setup.mockInput.pressKey("RETURN");
+    await settle(setup);
+
+    const accentText = setup
+      .captureSpans()
+      .lines.flatMap((line) => line.spans.filter((span) => colorToHex(span.fg) === DARK.accent))
+      .map((span) => span.text)
+      .join("");
 
-    expect(completed).not.toContain("⇥");
-    expect(completed).toContain("typescript-magician");
+    expect(accentText).toContain("/typescript-magician");
+    // the prose around the reference is not accented
+    expect(accentText).not.toContain("please");
   });
 });

package/src/components/ThreadView.tsx

@@ -28,7 +28,6 @@ import { DiscussionMarkerRail } from "./DiscussionMarkerRail";
 import { useComponentTheme } from "./theme-context";
 
 export { lighten } from "../annotation-palette";
-export { inlineSlashToken, resolveInlineSuggestion } from "../slash-palette";
 
 /**
  * How a block's rows are painted: heading weight, muted kinds, the list or

package/src/components/syntax-highlight.ts

@@ -97,6 +97,29 @@ export function syntaxStyleFor(theme: Theme): SyntaxStyle {
   return style;
 }
 
+/** A one-group syntax style plus the styleId that paints a "/skill" reference in the accent color. */
+export interface ReferenceStyle {
+  style: SyntaxStyle;
+  styleId: number;
+}
+
+const referenceStyleCache = new WeakMap<Theme, ReferenceStyle>();
+
+export function referenceStyleFor(theme: Theme): ReferenceStyle {
+  const cached = referenceStyleCache.get(theme);
+
+  if (cached) return cached;
+  const entry: ReferenceStyle = {
+    style: SyntaxStyle.fromStyles({ reference: { fg: theme.accent } }),
+    styleId: 0,
+  };
+
+  entry.styleId = entry.style.getStyleId("reference") ?? 0;
+  referenceStyleCache.set(theme, entry);
+
+  return entry;
+}
+
 /** The foreground for a tree-sitter capture group; undefined when unstyled. */
 export function colorForSyntaxGroup(group: string, theme: Theme): string | undefined {
   const styles = syntaxGroupStyles(theme);

package/src/mark-runs.ts

@@ -111,10 +111,11 @@ export function lineMarkRanges(ranges: MarkRange[], line: VisualLine): MarkRange
     .filter((range) => range.end > range.start);
 }
 
-/** A printable character: single-width input that should reach a composer. */
+/** Printable input that should reach a composer: one key, or a whole pasted run in one event. */
 export function printableSequence(key: KeyEvent): string | null {
-  const printable =
-    key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta && key.sequence >= " ";
+  if (!key.sequence || key.ctrl || key.meta) return null;
+  // reject any run carrying a control byte, so escape sequences and \r\t\b never seed a draft
+  for (const character of key.sequence) if (character < " ") return null;
 
-  return printable ? key.sequence : null;
+  return key.sequence.length > 0 ? key.sequence : null;
 }

package/src/skills.ts

@@ -66,3 +66,10 @@ export function loadSkills(dir: string): SlashItem[] {
 
 /** Skills reach the composer palette through context, so no surface needs a new prop to list them. */
 export const SlashSkillsContext = createContext<SlashItem[]>([]);
+
+/**
+ * The action and skill names every composer paints as "/name" references. Held in
+ * context so each surface - the plan thread, the diff sheet, the prototype - reads
+ * the same palette without threading a prop.
+ */
+export const PaletteNamesContext = createContext<ReadonlySet<string>>(new Set());

package/src/slash-palette.test.ts

@@ -1,5 +1,11 @@
 import { describe, expect, test } from "bun:test";
-import { inlineSlashToken, scoreMatch, slashFilter, type SlashItem } from "./slash-palette";
+import {
+  activeSlashToken,
+  isStandaloneSlashQuery,
+  scoreMatch,
+  slashFilter,
+  type SlashItem,
+} from "./slash-palette";
 
 function item(name: string): SlashItem {
   return { name, description: name, body: name };
@@ -46,9 +52,35 @@ describe("slashFilter", () => {
   });
 });
 
-describe("inlineSlashToken", () => {
-  test("finds a trailing /word only when text precedes it", () => {
-    expect(inlineSlashToken("use /vitest-patt")).toBe("/vitest-patt");
-    expect(inlineSlashToken("/vitest-patt")).toBeNull();
+describe("activeSlashToken", () => {
+  const atEnd = (text: string) => activeSlashToken(text, text.length);
+
+  test("finds the caret's /word at the start or after a space, so each new / reopens the palette", () => {
+    expect(atEnd("/vitest-patt")).toBe("/vitest-patt");
+    expect(atEnd("use /vitest-patt")).toBe("/vitest-patt");
+    expect(atEnd("/zoom-out hello world /")).toBe("/");
+    // an underscore is a valid skill-name character, so the token spans it
+    expect(atEnd("run /my_skill")).toBe("/my_skill");
+  });
+
+  test("closes on the space that ends the token, and ignores prose", () => {
+    expect(atEnd("/zoom-out ")).toBeNull();
+    expect(atEnd("just some prose")).toBeNull();
+  });
+
+  test("tracks the caret, not the string end: a slash mid-draft is the active token", () => {
+    // caret sits right after "/imp" in "/imp done", ignoring the trailing text
+    expect(activeSlashToken("/imp done", 4)).toBe("/imp");
+    // caret inside plain prose, even with a later slash token, has no active token
+    expect(activeSlashToken("plain text /later", 5)).toBeNull();
+  });
+});
+
+describe("isStandaloneSlashQuery", () => {
+  test("true only when the whole draft is a bare /query, so prose ending in /name still saves", () => {
+    expect(isStandaloneSlashQuery("/lgtm")).toBe(true);
+    expect(isStandaloneSlashQuery("  /lgtm  ")).toBe(true);
+    expect(isStandaloneSlashQuery("please inspect /tmp")).toBe(false);
+    expect(isStandaloneSlashQuery("just prose")).toBe(false);
   });
 });

package/src/slash-palette.ts

@@ -64,36 +64,50 @@ export function slashFilter(items: SlashItem[], query: string): SlashItem[] {
   return scored.toSorted((left, right) => right.score - left.score).map((entry) => entry.item);
 }
 
+// a skill or action name: the grammar loadSkills and slashItemsFrom can produce, so a "/name"
+// token closes only on whitespace or another slash, never inside a valid underscore-or-hyphen name
+const SLASH_TOKEN = /(?:^|\s)(\/[a-zA-Z0-9_-]*)$/;
+
 /**
- * A skill invoked mid-sentence: the trailing "/word" token when text already
- * precedes it (a draft that starts with "/" is the palette, not an inline
- * completion). Newline-safe, since the token may sit at the start of a new line.
+ * The "/word" token the caret is writing right now: the run from the last
+ * whitespace up to the caret, at the start of the draft or after it. Null once a
+ * space closes the token, so each new "/" reopens the palette and skills chain.
+ * Caret-aware, so editing an earlier "/name" targets it, not a trailing token.
  */
-export function inlineSlashToken(text: string): string | null {
-  if (text.startsWith("/")) return null;
-  const match = /(?:^|\s)(\/[a-zA-Z0-9-]*)$/.exec(text);
+export function activeSlashToken(text: string, caret: number): string | null {
+  const head = text.slice(0, Math.max(0, Math.min(caret, text.length)));
+  const match = SLASH_TOKEN.exec(head);
 
   return match ? match[1]! : null;
 }
 
-export interface InlineSlash {
-  token: string;
-  suggestion: SlashItem;
+/** True while the whole draft is just a "/query" - the palette owns it, so a blur discards it. */
+export function isStandaloneSlashQuery(text: string): boolean {
+  return /^\/\S*$/.test(text.trim());
 }
 
-/** The inline completion state: the trailing "/word" and its closest item, or null. */
-export function resolveInlineSuggestion(
-  slashActive: boolean,
+/**
+ * The character ranges of every completed "/name" in the draft that names a real
+ * action or skill, so a surface can paint the references. A half-typed "/na" is
+ * not a reference yet, so it stays unpainted until the palette completes it.
+ */
+export function skillReferenceRanges(
   text: string,
-  items: SlashItem[],
-): InlineSlash | null {
-  if (slashActive) return null;
-  const token = inlineSlashToken(text);
+  names: ReadonlySet<string>,
+): Array<{ start: number; end: number }> {
+  const ranges: Array<{ start: number; end: number }> = [];
+  const pattern = /(?:^|\s)(\/[a-zA-Z0-9_-]+)/g;
 
-  if (token === null) return null;
-  const suggestion = slashFilter(items, token.slice(1))[0];
+  for (let match = pattern.exec(text); match !== null; match = pattern.exec(text)) {
+    const token = match[1]!;
+
+    if (!names.has(token.slice(1))) continue;
+    const start = match.index + match[0].length - token.length;
+
+    ranges.push({ start, end: start + token.length });
+  }
 
-  return suggestion ? { token, suggestion } : null;
+  return ranges;
 }
 
 /** Quick actions and user skills in one palette; a quick action wins a name collision (it expands). */

package/src/use-annotation-surface.tsx

@@ -38,8 +38,9 @@ import {
 import { annotationPaletteFor, type AnnotationPalette } from "./annotation-palette";
 import { printableSequence, type MarkRange, type VisualLine } from "./mark-runs";
 import {
+  activeSlashToken,
+  isStandaloneSlashQuery,
   mergeSlashItems,
-  resolveInlineSuggestion,
   slashFilter,
   slashItemsFrom,
 } from "./slash-palette";
@@ -233,6 +234,7 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
   };
   const [folded, setFolded] = useState<Set<string>>(new Set());
   const [composeText, setComposeText] = useState("");
+  const [caretOffset, setCaretOffset] = useState(0);
   const [slashIndex, setSlashIndex] = useState(0);
   const composerReady = useRef(false);
   const composeRef = useRef<ComposeState | null>(null);
@@ -304,19 +306,26 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
     composeRef.current = state;
     setCompose(state);
     setComposeText(state.seed);
+    setCaretOffset(state.seed.length);
     setSlashIndex(0);
   };
   const closeCompose = (): void => {
     composeRef.current = null;
     setCompose(null);
     setComposeText("");
+    setCaretOffset(0);
   };
   const skills = useContext(SlashSkillsContext);
   const paletteItems = mergeSlashItems(slashItemsFrom(quickActions), skills);
-  // open only while typing the token: a leading "/" with no space yet
-  const slashActive = compose !== null && /^\/\S*$/.test(composeText);
-  const slashItems = slashActive ? slashFilter(paletteItems, composeText.slice(1).trim()) : [];
-  const inlineSlash = resolveInlineSuggestion(slashActive, composeText, paletteItems);
+  // the "/word" under the caret, anywhere in the draft, so each new "/" reopens the palette
+  const slashToken = compose !== null ? activeSlashToken(composeText, caretOffset) : null;
+  const slashActive = slashToken !== null;
+  const slashItems = slashToken !== null ? slashFilter(paletteItems, slashToken.slice(1)) : [];
+
+  // a fresh token starts its selection at the top, so an earlier Down never leaks into it
+  useEffect(() => {
+    if (slashActive) setSlashIndex(0);
+  }, [slashActive]);
 
   const saveComment = (body: string): void => {
     // the body saves verbatim - typed newlines are the author's choice;
@@ -357,11 +366,13 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
     });
   };
 
-  // clicking away from an open composer commits the draft (blur-save);
-  // a half-typed slash query is never a comment, so it discards instead
+  // clicking away commits the draft (blur-save); only a standalone "/query" is a palette
+  // artifact, so prose that merely ends in a "/name" still saves
   const blurSaveCompose = (): void => {
     if (!composeRef.current) return;
-    if (slashActive || composeText.trim().length === 0) return closeCompose();
+    if (isStandaloneSlashQuery(composeText) || composeText.trim().length === 0) {
+      return closeCompose();
+    }
     saveComment(composeText);
   };
 
@@ -431,7 +442,14 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
       return true;
     }
     if (key.name === "return" || key.name === "tab") {
-      openCompose({ ...activeCompose, seed: `/${slashItems[selected]!.name} ` });
+      const token = activeSlashToken(composeText, caretOffset) ?? "";
+      const cut = caretOffset - token.length;
+      const insertion = `/${slashItems[selected]!.name} `;
+      const seed = composeText.slice(0, cut) + insertion + composeText.slice(caretOffset);
+
+      openCompose({ ...activeCompose, seed });
+      // land the caret just after the inserted reference, not at the end of a chained draft
+      setCaretOffset(cut + insertion.length);
 
       return true;
     }
@@ -439,17 +457,6 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
     return false;
   };
 
-  /** Tab completes the trailing "/word" to the matched skill's full name, then a space to chain. */
-  const handleInlineSlashKey = (key: KeyEvent, activeCompose: ComposeState): boolean => {
-    if (inlineSlash === null || key.name !== "tab") return false;
-    const cut = composeText.length - inlineSlash.token.length;
-    const completed = `${composeText.slice(0, cut)}/${inlineSlash.suggestion.name} `;
-
-    openCompose({ ...activeCompose, seed: completed });
-
-    return true;
-  };
-
   /** Pre-mount window: buffer printables, honor a fast cmd+enter or newline. */
   const handlePremountKey = (key: KeyEvent, activeCompose: ComposeState): void => {
     if (key.name === "return") {
@@ -458,6 +465,7 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
 
       composeRef.current = grown;
       setComposeText(grown.seed);
+      setCaretOffset(grown.seed.length);
 
       return setCompose(grown);
     }
@@ -468,6 +476,7 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
 
       composeRef.current = grown;
       setComposeText(grown.seed);
+      setCaretOffset(grown.seed.length);
       setCompose(grown);
     }
   };
@@ -491,7 +500,6 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
       return closeCompose();
     }
     if (handleSlashKey(key, activeCompose)) return;
-    if (handleInlineSlashKey(key, activeCompose)) return;
     if (!composerReady.current) handlePremountKey(key, activeCompose);
   };
 
@@ -670,18 +678,19 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
       tokens={tokens}
       onSave={saveComment}
       onReady={() => (composerReady.current = true)}
-      onInput={setComposeText}
+      onInput={(text, caret) => {
+        setComposeText(text);
+        setCaretOffset(caret);
+      }}
     />
   ) : null;
-  // one node below the composer: the palette list for a leading "/", otherwise the
-  // inline completion hint. Renders null when neither applies, so it always pushes.
+  // the palette list below the composer while the caret is on a "/word"; null otherwise, so it pushes
   const paletteNode = (
     <ComposerPalette
       key="composer-palette"
       slashActive={slashActive}
       slashItems={slashItems}
       slashIndex={slashIndex}
-      inline={inlineSlash}
       tokens={tokens}
     />
   );