system-diff 0.3.0__tar.gz → 0.3.4__tar.gz

{system_diff-0.3.0 → system_diff-0.3.4}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: system-diff
-Version: 0.3.0
+Version: 0.3.4
 Summary: Draws your system from its code (parts, entry points, data, outside systems) and what each change adds, changes or removes. No dependencies; SVG pictures for PRs and READMEs.
 Project-URL: Homepage, https://github.com/simplifiedmachine/system-diff
 Project-URL: Documentation, https://github.com/simplifiedmachine/system-diff/wiki
@@ -74,8 +74,7 @@ hooks it added before, and frees `/system-diff` for the pane.
 ### The System diff pane
 
 A tab beside Claude Code's own file diff: your system drawn the way a system designer draws it, live, with what
-Claude is changing in it. It opens as wide as Claude Code docks a pane (45% of the terminal); drag its edge to narrow
-it.
+Claude is changing in it. `/system-diff close` (or "× close" in its tab row) hides it; `/system-diff` brings it back.
 
 - **Now** follows Claude, in the order your attention needs it:
   - **What Claude is doing** ("● Claude is working ✎ Editing API") and what you asked.
@@ -92,8 +91,7 @@ it.
       other ends, and a line says what it uses and what uses it.
     - **Zoom:** Enter (or a second click) zooms in on a container's components, with the lines between them. `b` goes
       back, `f` follows Claude again.
-    - **Scroll:** `[` `]` or shift ← → scroll a wide diagram across; shift ↑ ↓, Page Up/Down or the wheel scroll a
-      tall one.
+    - **Scroll:** `[` `]` scroll a wide diagram across; shift ↑ ↓, Page Up/Down or the wheel scroll a tall one.
   - **This turn**: each change to the design, and what it trades off.
   - **Learn**: how the part Claude works on is designed.
     - The principle its place calls for: an edge of the system, an adapter, a shared foundation, a coordinator.

{system_diff-0.3.0 → system_diff-0.3.4}/README.md

@@ -42,8 +42,7 @@ hooks it added before, and frees `/system-diff` for the pane.
 ### The System diff pane
 
 A tab beside Claude Code's own file diff: your system drawn the way a system designer draws it, live, with what
-Claude is changing in it. It opens as wide as Claude Code docks a pane (45% of the terminal); drag its edge to narrow
-it.
+Claude is changing in it. `/system-diff close` (or "× close" in its tab row) hides it; `/system-diff` brings it back.
 
 - **Now** follows Claude, in the order your attention needs it:
   - **What Claude is doing** ("● Claude is working ✎ Editing API") and what you asked.
@@ -60,8 +59,7 @@ it.
       other ends, and a line says what it uses and what uses it.
     - **Zoom:** Enter (or a second click) zooms in on a container's components, with the lines between them. `b` goes
       back, `f` follows Claude again.
-    - **Scroll:** `[` `]` or shift ← → scroll a wide diagram across; shift ↑ ↓, Page Up/Down or the wheel scroll a
-      tall one.
+    - **Scroll:** `[` `]` scroll a wide diagram across; shift ↑ ↓, Page Up/Down or the wheel scroll a tall one.
   - **This turn**: each change to the design, and what it trades off.
   - **Learn**: how the part Claude works on is designed.
     - The principle its place calls for: an edge of the system, an adapter, a shared foundation, a coordinator.

{system_diff-0.3.0 → system_diff-0.3.4}/mods/system-diff/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "system-diff",
-  "version": "0.3.0",
+  "version": "0.3.4",
   "description": "A pane beside the chat: what Claude is working on in your system, zoomed in, what just happened and why it matters, and a topic to learn (system-diff)",
   "types": "./types/index.d.ts",
   "author": {

{system_diff-0.3.0 → system_diff-0.3.4}/mods/system-diff/hooks/page.tsx

@@ -1,12 +1,12 @@
-import type { ClientKeyEvent, ClientModule, ClientPointerEvent, JsonValue } from 'claude-code'
+import type { ClientKeyEvent, ClientModule, JsonValue } from 'claude-code'
 
 import type { Page, PageBlock, Row, Run } from '../types'
 
 // The page `system-diff panel` lays out, painted cell for cell, in its own region of the pane so it gets the keys and
 // the clicks: ← ↑ ↓ → pick a block (a box of the system diagram, a component in a container, a technology), Enter
-// or a second click zooms in on it, space marks a technology new to you, [ and ] (or shift ← →) scroll a picture
-// wider than the pane, shift ↑ ↓ and Page Up/Down scroll a tall one (as the wheel does), b goes back, f follows
-// Claude, n m c t switch tabs, Esc hands the keys back.
+// or a second click zooms in on it, space marks a technology new to you, [ and ] scroll a picture wider than the
+// pane, shift ↑ ↓ and Page Up/Down scroll a tall one (as the wheel does), b goes back, f follows Claude, n m c t
+// switch tabs, Esc hands the keys back. Shift ← → are left to the terminal.
 //
 // A picked block is blue; what it connects to (its lines, in and out, and the blocks at their other ends) is lit;
 // the rest keeps its colours: yellow what changed, green what is new, red what went, gray the background.
@@ -123,15 +123,12 @@ const PageView: ClientModule<JsonValue, State> = (raw, surface) => {
     } else if (e.key === 'pageup' || e.key === 'pagedown') {
       surface.post({ scrollBy: e.key === 'pageup' ? -1000 : 1000 }) // a window's worth
     } else if ((e.key === 'left' || e.key === 'right') && e.shift) {
-      surface.setState({ sel, sx: across(page, cols, sx + (e.key === 'left' ? -STEP : STEP), undefined), mine: true,
-                         ticking: true })
+      // shift+← → belong to the terminal (its own splits): nothing here
     } else if (['up', 'down', 'left', 'right'].includes(e.key)) {
       pick(move(page.blocks, picked, e.key))
     } else if (e.key === '[' || e.key === ']') {
       surface.setState({ sel, sx: across(page, cols, sx + (e.key === '[' ? -STEP : STEP), undefined), mine: true,
                          ticking: true })
-    } else if (e.key === '<' || e.key === '>' || e.key === ',' || e.key === '.') {
-      surface.post({ resize: e.key === '<' || e.key === ',' ? STEP : -STEP }) // the pane: wider, or narrower
     } else if (e.key === 'return') {
       act(picked, 'enter')
     } else if (e.key === ' ') {
@@ -144,17 +141,6 @@ const PageView: ClientModule<JsonValue, State> = (raw, surface) => {
       surface.post({ view: { n: 'now', m: 'map', c: 'changes', t: 'topics' }[e.key] ?? 'now' })
     }
   })
-  surface.onPointer((e: ClientPointerEvent) => {
-    if (e.type !== 'down' || e.button !== 'left') return
-    const x = e.x + sx
-    const y = e.y - (page.wide > cols ? 1 : 0)
-    const hit = page.blocks.filter(b => x >= b.x && x < b.x + b.w && y >= b.y && y < b.y + b.h)
-      .sort((a, b) => a.w * a.h - b.w * b.h)[0] // the innermost: a component over its container
-    if (!hit) return
-    if (hit.id === sel) act(hit, 'enter')
-    else pick(hit)
-  })
-
   // The detail of the picked block, in the slot under its picture.
   const rows: Row[] = page.rows.slice()
   if (picked?.slot) {
@@ -198,7 +184,7 @@ const PageView: ClientModule<JsonValue, State> = (raw, surface) => {
       {wide && (
         <Text dimColor wrap="truncate-end">
           {`${sx > 0 ? '◂ ' : '  '}columns ${sx + 1}–${Math.min(page.wide, sx + cols)} of ${page.wide}` +
-            ` · [ ] or shift ← → scroll${sx + cols < page.wide ? ' ▸' : ''}`}
+            ` · [ ] scroll across${sx + cols < page.wide ? ' ▸' : ''}`}
         </Text>
       )}
       {rows.map((row, y) => {
@@ -210,7 +196,7 @@ const PageView: ClientModule<JsonValue, State> = (raw, surface) => {
         )
       })}
       <Text dimColor wrap="truncate-end">
-        {'click here, then ← ↑ ↓ → pick · ↵ zoom in · shift+arrows scroll · < > width' + (canGoBack ? ' · b back' : '') + ' · f follow · Esc leaves'}
+        {'click here, then ← ↑ ↓ → pick · ↵ zoom in · [ ] shift+↑ ↓ scroll' + (canGoBack ? ' · b back' : '') + ' · f follow · Esc leaves'}
       </Text>
     </Box>
   )

{system_diff-0.3.0 → system_diff-0.3.4}/mods/system-diff/hooks/pane.test.tsx

@@ -108,7 +108,7 @@ test('a resized split is laid out again at once, for the width the page reports'
   await ui.unmount()
 })
 
-test('the arrows pick a block, Enter zooms in, a click picks and a second click zooms', async ($, on) => {
+test('the arrows pick a block, Enter zooms in, b goes back', async ($, on) => {
   const asked: string[][] = []
   answer(on, asked)
   await $.command.run(RUN)
@@ -124,10 +124,7 @@ test('the arrows pick a block, Enter zooms in, a click picks and a second click
   expect(last()).toContain('--part ')
   expect(last()).not.toContain('--part core')
 
-  await ui.pointer({ type: 'down', x: 2, y: 2, button: 'left' }) // Developer: picked
-  await ui.pointer({ type: 'down', x: 2, y: 2, button: 'left' }) // again: zoomed in on
-  expect(last()).toContain('--part a:dev')
-
+  await ui.key({ key: 'return', in: 'page' })           // zoomed in again: Follow Claude shows
   await ui.key({ key: 'm', in: 'page' })
   expect(last()).toContain('--view map')
   await ui.press({ key: 'follow' })
@@ -145,7 +142,7 @@ test('space on a technology marks it new to you', async ($, on) => {
   await ui.unmount()
 })
 
-test('/system-diff and /system-diff-pane both open it, as wide as a dock goes', async ($, on) => {
+test('/system-diff and /system-diff-pane both open it, at the width the person keeps', async ($, on) => {
   const registered: string[] = []
   const opened: Array<{ columns?: number }> = []
   on('ui.open', (_: unknown, e: { columns?: number }) => {
@@ -167,17 +164,21 @@ test('/system-diff and /system-diff-pane both open it, as wide as a dock goes',
     const got = await $.command.run({ ...RUN, command })
     expect((got as { text?: string }).text).toBe('System diff pane opened.')
   }
-  expect(opened.every(o => (o.columns ?? 0) >= 200)).toBe(true)
+  expect(opened.every(o => o.columns === undefined)).toBe(true) // the width is the person's
 })
 
-test('the width buttons ask Claude Code for a wider or narrower pane', async ($, on) => {
-  const opened: Array<{ columns?: number }> = []
-  answer(on, [], 0, '', opened)
+test('/system-diff close closes the pane, and so does its close button', async ($, on) => {
+  const closed: string[] = []
+  answer(on, [])
+  on('ui.close', (_: unknown, e: { id: string }) => {
+    closed.push(e.id)
+    return { value: undefined }
+  })
+  const got = await $.command.run({ ...RUN, args: 'close' })
+  expect((got as { text?: string }).text).toContain('closed')
   await $.command.run(RUN)
   const ui = await $.ui.mount({ ...PANE, surface: 'terminal' })
-  await ui.press({ key: 'narrower' })
-  expect(opened[opened.length - 1]?.columns).toBe(100)   // the body's 110, less 10
-  await ui.post({ resize: 8 }, { in: 'page' })            // `<` on the page
-  expect(opened[opened.length - 1]?.columns).toBe(118)
+  await ui.press({ key: 'close' })
+  expect(closed).toEqual(['system-diff', 'system-diff'])
   await ui.unmount()
 })

{system_diff-0.3.0 → system_diff-0.3.4}/mods/system-diff/hooks/register.tsx

@@ -16,7 +16,6 @@ import type { Act, Page, Row } from '../types'
 const PANE = 'system-diff'
 const COMMANDS = ['system-diff', 'system-diff-pane'] as const
 const VIEWS = [['now', 'Now', 'n'], ['map', 'Map', 'm'], ['changes', 'Changes', 'c'], ['topics', 'Topics', 't']] as const
-const WIDEST = 999 // as wide as Claude Code docks a pane (it caps a dock at 45% of the terminal)
 
 const page = atom({ plugin: 'system-diff', key: 'page' } as const, null as Page | null, { shape: 'page-2' })
 const view = atom({ plugin: 'system-diff', key: 'view' } as const, 'now', { shape: 'view-1' })
@@ -151,14 +150,10 @@ async function scrollBy($: EngineInterface, rows: number): Promise<void> {
   }
 }
 
-function open($: EngineInterface, columns = WIDEST) {
-  return $.ui.open({ id: PANE, title: 'System diff', columns })
-}
-
-// Wider or narrower: the pane asks Claude Code for a width, which docks it at most at 45% of the terminal (a width
-// the person dragged this session wins over the ask).
-async function resize($: EngineInterface, by: number): Promise<void> {
-  await open($, Math.max(24, columns + by))
+// As wide as Claude Code docks a pane, the first time: a width the person set (dragged, or with the pane's keys:
+// ctrl+x ← →) is theirs from then on.
+function open($: EngineInterface) {
+  return $.ui.open({ id: PANE, title: 'System diff' })
 }
 
 export const register: Register = on => {
@@ -167,7 +162,8 @@ export const register: Register = on => {
     // `/system-diff` opens it; `/system-diff-pane` too, the name it had first. A name someone else holds is skipped.
     for (const name of COMMANDS) {
       try {
-        await $.command.register({ name, description: 'Show the System diff pane beside the chat' })
+        await $.command.register({ name, description: 'Show the System diff pane beside the chat (close: hide it)',
+                                   argumentHint: '[close]' })
       } catch {
         // taken
       }
@@ -178,7 +174,11 @@ export const register: Register = on => {
   })
 
   for (const command of COMMANDS) {
-    on('command.run', { command }, async $ => {
+    on('command.run', { command }, async ($, e) => {
+      if (e.args.trim().toLowerCase() === 'close') {
+        await $.ui.close({ id: PANE })
+        return { text: 'System diff pane closed. /system-diff opens it again.' }
+      }
       await refresh($)
       await open($)
       return { text: 'System diff pane opened.' }
@@ -210,13 +210,12 @@ export const register: Register = on => {
   // What the page (page.tsx) asks for.
   on('ui.message', { component: 'Pane', requestId: PANE }, async ($, e) => {
     const data = (e.data ?? {}) as Act & { back?: boolean; follow?: boolean; width?: number; reveal?: number;
-                                             scrollBy?: number; resize?: number }
+                                             scrollBy?: number }
     if (typeof data.width === 'number' && data.width > 0 && data.width !== columns) {
       columns = data.width
       await refresh($)
     } else if (typeof data.reveal === 'number') await reveal($, data.reveal)
     else if (typeof data.scrollBy === 'number') await scrollBy($, data.scrollBy)
-    else if (typeof data.resize === 'number') await resize($, data.resize)
     else if (typeof data.zoom === 'string') await zoom($, data.zoom)
     else if (typeof data.learn === 'string') await learn($, data.learn)
     else if (data.back) await goBack($)
@@ -276,12 +275,11 @@ export const register: Register = on => {
           {behind.length > 0 && (
             <Button key="back" hotkey="b" plain onPress={() => void goBack($)}><Text dimColor>← Back</Text></Button>
           )}
-          <Button key="wider" plain onPress={() => void resize($, 10)}><Text dimColor>◂ wider</Text></Button>
-          <Button key="narrower" plain onPress={() => void resize($, -10)}><Text dimColor>narrower ▸</Text></Button>
+          <Button key="close" plain onPress={() => void $.ui.close({ id: PANE })}><Text dimColor>× close</Text></Button>
         </Box>
         {said !== '' && <Text dimColor>{said}</Text>}
         {drawn !== null && Client !== undefined && (
-          <Client key="page" module="./page.tsx" width="100%" props={{ page: drawn, canGoBack: behind.length > 0 }} />
+          <Client key="page" module="./page.tsx" props={{ page: drawn, canGoBack: behind.length > 0 }} />
         )}
         {drawn !== null && Client === undefined && drawn.rows.map(line)}
         {drawn !== null && Client === undefined && (

{system_diff-0.3.0 → system_diff-0.3.4}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "system-diff"
-version = "0.3.0"
+version = "0.3.4"
 description = "Draws your system from its code (parts, entry points, data, outside systems) and what each change adds, changes or removes. No dependencies; SVG pictures for PRs and READMEs."
 readme = "README.md"
 license = "MIT"

{system_diff-0.3.0 → system_diff-0.3.4}/src/system_diff/__init__.py

@@ -5,4 +5,4 @@
     bp = extract.extract(DirSource(Path(".")), cfg)
     svg = graph.system_svg(bp, cfg)
 """
-__version__ = "0.3.0"
+__version__ = "0.3.4"