Release 1.0.10: Timeline edit cards show Grok Build-style before/after diff snippets

- DiffSnippet renders @@ hunks with old/new line numbers and tinted +/- gutters
- parseUnifiedDiff now exposes classified hunk lines (shared canonical model)
- isEdit flag threads edit-diff detection from describeUpdate through the reducer
- adds tests for line classification, \\ No newline markers, and flag lifecycle

Author: 3xian

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinkcode",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Desktop mission control for Grok agents.",
   "type": "module",
   "keywords": [

src-tauri/Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "pinkcode"
-version = "1.0.9"
+version = "1.0.10"
 description = "Desktop control plane for Grok Build multi-task observability"
 authors = ["PinkCode"]
 license = "Apache-2.0"

src-tauri/Cargo.toml

@@ -2,7 +2,7 @@
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "PinkCode",
   "mainBinaryName": "PinkCode",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "identifier": "com.pinkcode.app",
   "build": {
     "beforeDevCommand": "npm run dev",

src-tauri/tauri.conf.json

@@ -0,0 +1,54 @@
+import { memo, useMemo } from "react";
+import { buildDiffSnippet } from "../utils/diffSnippet";
+
+/**
+ * Grok Build-style before/after snippet for an edited file: @@ hunk headers,
+ * old/new line-number gutters, and tinted +/- lines.
+ *
+ * Falls back to the raw patch text when the detail carries no parseable hunk
+ * (callers reuse the same `detail` for tool cards that are not edit diffs).
+ */
+export const DiffSnippet = memo(function DiffSnippet({
+  patch,
+}: {
+  patch: string;
+}) {
+  const snippet = useMemo(() => buildDiffSnippet(patch), [patch]);
+
+  if (!snippet) {
+    return <pre className="tl-diff-fallback">{patch}</pre>;
+  }
+
+  return (
+    <div className="tl-diff" aria-label="Edited file diff">
+      {snippet.rows.map((row, i) =>
+        row.tag === "hunk" ? (
+          <div key={i} className="tl-diff-hunk">
+            {row.text}
+          </div>
+        ) : (
+          <div
+            key={i}
+            className={`tl-diff-line tl-diff-${row.tag}`}
+          >
+            <span className="tl-diff-num" aria-hidden>
+              {row.oldLine ?? ""}
+            </span>
+            <span className="tl-diff-num" aria-hidden>
+              {row.newLine ?? ""}
+            </span>
+            <span className="tl-diff-sign" aria-hidden>
+              {row.tag === "insert" ? "+" : row.tag === "delete" ? "−" : ""}
+            </span>
+            <span className="tl-diff-text">{row.text}</span>
+          </div>
+        ),
+      )}
+      {snippet.truncated && (
+        <div className="tl-diff-trunc" aria-hidden>
+          …
+        </div>
+      )}
+    </div>
+  );
+});

src/components/DiffSnippet.tsx

@@ -34,6 +34,7 @@ import type { ResolvePermissionFn } from "../utils/permissionPayload";
 import type { PromptQueueController } from "../hooks/usePromptQueueController";
 import { extractToolPath } from "../utils/paths";
 import { DiffPanel } from "./DiffPanel";
+import { DiffSnippet } from "./DiffSnippet";
 import { FilePathLink } from "./FilePathLink";
 import { Markdown } from "./Markdown";
 import { PermissionGate } from "./PermissionGate";
@@ -794,6 +795,8 @@ const LiveItemRow = memo(function LiveItemRow({
                 <Markdown onOpenFile={onOpenFile}>{item.detail}</Markdown>
               ) : isMdKind ? (
                 <pre className="tl-stream-plain">{item.detail}</pre>
+              ) : item.isEdit && item.detail ? (
+                <DiffSnippet patch={item.detail} />
               ) : toolPath && item.detail === toolPath ? (
                 <FilePathLink
                   path={toolPath}

src/components/SessionDetail.tsx

@@ -568,6 +568,65 @@ describe("live timeline reducer", () => {
     expect(item?.streaming).toBe(true);
   });
 
+  it("flags tool cards as isEdit once a diff lands and keeps it on status-only updates", () => {
+    const indexes = createTimelineReducerState();
+    const card = (patch?: string) => ({
+      kind: "tool" as const,
+      title: "Edit `src/main.ts`",
+      toolCallId: "call-edit-1",
+      toolBase: "Edit `src/main.ts`",
+      ...(patch ? { detail: patch, isEdit: true } : { toolStatus: "pending" }),
+    });
+    let state = reduceAgentUpdate(
+      new Map(),
+      {
+        handleId: "handle",
+        sessionId: "session",
+        description: card(),
+        now: 1,
+        nextId: () => "one",
+      },
+      indexes,
+    );
+    expect(state.get("session")?.[0].isEdit).toBeUndefined();
+
+    state = reduceAgentUpdate(
+      state,
+      {
+        handleId: "handle",
+        sessionId: "session",
+        description: card("@@ -4,3 +4,3 @@\n let x = 1;\n-let x = 2;\n+let x = 3;"),
+        now: 2,
+        nextId: () => "two",
+      },
+      indexes,
+    );
+    const item = state.get("session")?.[0];
+    expect(item?.isEdit).toBe(true);
+    expect(item?.detail).toContain("@@ -4,3 +4,3 @@");
+
+    // Status-only follow-up (no diff payload) must not clear the flag.
+    state = reduceAgentUpdate(
+      state,
+      {
+        handleId: "handle",
+        sessionId: "session",
+        description: {
+          kind: "tool",
+          title: "Edit `src/main.ts` ✓",
+          toolCallId: "call-edit-1",
+          toolBase: "Edit `src/main.ts`",
+          toolStatus: "completed",
+        },
+        now: 3,
+        nextId: () => "three",
+      },
+      indexes,
+    );
+    expect(state.get("session")?.[0].isEdit).toBe(true);
+    expect(state.get("session")?.[0].detail).toContain("@@ -4,3 +4,3 @@");
+  });
+
   it("merges shell snapshots without regressing output", () => {
     const indexes = createTimelineReducerState();
     let state = reduceShellUpdate(

src/hooks/liveTimeline.test.ts

@@ -405,6 +405,10 @@ export function reduceAgentUpdate(
         toolBase: merged.baseTitle,
         toolStatus: merged.status,
         toolCallId: description.toolCallId,
+        // `detail` merges as next-wins/fallback-prev; the diff flag must track
+        // the same rule so a status-only update keeps the card flagged while a
+        // completed update with plain detail clears it.
+        isEdit: description.isEdit ?? prev.isEdit,
         ts: now,
       };
       next.set(key, list);
@@ -508,6 +512,7 @@ export function reduceAgentUpdate(
     toolCallId: description.toolCallId,
     toolBase: description.toolBase,
     toolStatus: description.toolStatus,
+    isEdit: description.isEdit,
     ts: now,
     sourceEventId: sourceEventId ?? undefined,
     streaming: markStreaming,

src/hooks/liveTimeline.ts

@@ -658,6 +658,89 @@
   line-height: 1.6;
 }
 
+/* Edited-file diff snippet (Grok Build Edit block: @@ header + numbered +/- gutters). */
+.tl-diff {
+  margin: 6px 0 2px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--bg-elevated);
+  font-family: var(--mono);
+  font-size: 11.5px;
+  line-height: 1.55;
+}
+
+.tl-diff-hunk {
+  padding: 2px 10px;
+  color: var(--text-muted);
+  background: var(--hl-low);
+  border-bottom: 1px solid var(--border);
+  white-space: pre;
+  overflow-x: auto;
+}
+
+.tl-diff-line {
+  display: flex;
+  align-items: baseline;
+  white-space: pre;
+}
+
+.tl-diff-num {
+  flex: 0 0 auto;
+  width: 3.2ch;
+  text-align: right;
+  padding: 0 6px 0 2px;
+  color: var(--text-muted);
+  opacity: 0.72;
+  user-select: none;
+}
+
+.tl-diff-sign {
+  flex: 0 0 auto;
+  width: 1.4ch;
+  text-align: center;
+  user-select: none;
+}
+
+.tl-diff-text {
+  flex: 1 1 auto;
+  padding-left: 6px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.tl-diff-insert {
+  background: color-mix(in srgb, var(--add) 10%, transparent);
+}
+
+.tl-diff-insert .tl-diff-text {
+  color: var(--add);
+}
+
+.tl-diff-delete {
+  background: color-mix(in srgb, var(--del) 10%, transparent);
+}
+
+.tl-diff-delete .tl-diff-text {
+  color: var(--del);
+}
+
+.tl-diff-trunc {
+  padding: 2px 10px;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+/* Raw-patch fallback when a diff card's detail is not a parseable hunk. */
+.tl-diff-fallback {
+  margin: 0;
+  font-family: var(--mono);
+  font-size: 11.5px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
 /* Copy: always visible, bottom-right, plain small text (no chrome).
    Absolute — does not reserve layout space or change body line-height. */
 .tl-detail.has-copy {

src/styles/detail.css

@@ -490,6 +490,8 @@ export interface TimelineItem {
   toolBase?: string;
   /** Tool card ACP status (pending / completed / …). */
   toolStatus?: string;
+  /** True when `detail` is a unified diff of a modified file (render as snippet). */
+  isEdit?: boolean;
   /** Present when kind is `"shell"`. */
   shell?: TimelineShellPayload;
   /** Present when kind is `"subagent"`. */