@agimon-ai/doompi-edit 0.0.1-alpha.20 → 0.0.1-alpha.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agimon-ai/doompi-edit",
-  "version": "0.0.1-alpha.20",
+  "version": "0.0.1-alpha.22",
   "description": "Snapshot-bound hashline edit tool for Pi and DoomPi.",
   "keywords": [
     "ai",
@@ -51,11 +51,11 @@
   "dependencies": {
     "@deepseek-ai/cordis": "4.0.1",
     "typebox": "1.3.19",
-    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.47",
-    "@agimon-ai/doompi-ui": "0.0.1-alpha.48",
-    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.11",
-    "@agimon-ai/doompi-web-components": "0.0.1-alpha.8",
-    "@agimon-ai/doompi-hashline": "0.0.1-alpha.19"
+    "@agimon-ai/doompi-hashline": "0.0.1-alpha.21",
+    "@agimon-ai/doompi-web-components": "0.0.1-alpha.10",
+    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.49",
+    "@agimon-ai/doompi-ui": "0.0.1-alpha.50",
+    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.13"
   },
   "devDependencies": {
     "@earendil-works/pi-coding-agent": "0.84.4",

package/src/web/EditToolMessage.tsx

@@ -4,7 +4,10 @@ import {
   MessageItemBody,
   MessageItemHeader,
   MessageItemStatus,
+  SyntaxLine,
+  ToolPathLink,
   toolTone,
+  useSyntaxLines,
 } from '@agimon-ai/doompi-web-components';
 import type { ToolMessageRenderProps } from '@agimon-ai/doompi-web-contracts';
 import { type DiffRow, editCallView, editResultView, resultTextLines } from './editToolView.ts';
@@ -20,15 +23,53 @@ const ROW_TONE: Readonly<Record<DiffRow['marker'], string>> = {
   ' ': 'text-doom-dim',
 };
 
+/**
+ * The banded rows, and the grammar over them.
+ *
+ * Its own component because the colours come from a hook, and the body that
+ * renders these rows is chosen inside a render prop. The rows are parsed as
+ * one document: a diff is not a file, so a replaced line is seen twice and a
+ * split string can colour oddly, which costs a token here and there and never
+ * costs the reader the text. The `+` and `-` wash stays underneath, so what
+ * changed is still legible when the grammar has coloured the foreground.
+ */
+function DiffRows({ rows, gutter, path }: { rows: readonly DiffRow[]; gutter: number; path: string }) {
+  const spans = useSyntaxLines(rows.map((row) => row.content).join('\n'), { path });
+  return (
+    <>
+      {rows.map((row, index) => (
+        <span key={`${String(index)}-${row.lineNumber}`} className={`flex gap-2 ${ROW_TONE[row.marker]}`}>
+          <span className="shrink-0 text-right text-doom-faint" style={{ width: `${String(gutter)}ch` }}>
+            {row.lineNumber}
+          </span>
+          <span className="w-2 shrink-0">{row.marker === ' ' ? '' : row.marker}</span>
+          <SyntaxLine spans={spans?.[index]} text={row.content} className="min-w-0 whitespace-pre-wrap break-words" />
+        </span>
+      ))}
+    </>
+  );
+}
+
 /**
  * The edit tool's timeline item: `path · N ranges` in the header; the display
  * diff from the result's details, banded by row, in the body. A successful
  * edit whose details never arrived shows nothing, and a failed one shows the
  * tool's message in red.
  */
-export function EditToolMessage({ args, result, output, running, isError }: ToolMessageRenderProps) {
+export function EditToolMessage({
+  args,
+  result,
+  output,
+  running,
+  isError,
+  fileTabFor,
+  openTransientTab,
+}: ToolMessageRenderProps) {
   const call = editCallView(args);
   const view = result === null || isError ? undefined : editResultView(result);
+  // The file this edit lands in, opened from the header rather than found
+  // again in a file list; plain text when nothing installed can show it.
+  const tab = fileTabFor(call.path);
   return (
     <MessageItem
       tone={toolTone({ running, isError })}
@@ -38,7 +79,7 @@ export function EditToolMessage({ args, result, output, running, isError }: Tool
         <>
           <MessageItemHeader title="edit">
             <span data-testid="tool-call-edit" className="flex min-w-0 flex-1 items-center gap-2">
-              <span className="truncate text-doom-text">{call.path}</span>
+              <ToolPathLink path={call.path} {...(tab === undefined ? {} : { onOpen: () => openTransientTab(tab) })} />
               <span className="shrink-0 text-doom-faint">· {call.ranges}</span>
             </span>
           </MessageItemHeader>
@@ -62,18 +103,7 @@ export function EditToolMessage({ args, result, output, running, isError }: Tool
               const { shown, hidden } = collapseLines(view.rows, COLLAPSED_ROWS, expanded);
               return (
                 <MessageItemBody data-testid="tool-result-edit" className="flex flex-col font-mono">
-                  {shown.map((row, index) => (
-                    <span key={`${String(index)}-${row.lineNumber}`} className={`flex gap-2 ${ROW_TONE[row.marker]}`}>
-                      <span
-                        className="shrink-0 text-right text-doom-faint"
-                        style={{ width: `${String(view.gutter)}ch` }}
-                      >
-                        {row.lineNumber}
-                      </span>
-                      <span className="w-2 shrink-0">{row.marker === ' ' ? '' : row.marker}</span>
-                      <span className="min-w-0 whitespace-pre-wrap break-words">{row.content}</span>
-                    </span>
-                  ))}
+                  <DiffRows rows={shown} gutter={view.gutter} path={call.path} />
                   {hidden > 0 ? (
                     <MessageItemStatus expands className="pt-1">
                       {hidden} more rows