SLOPSHOPPER

spw

Ostrakon v2 probe: an Input whose value is a window of the draft

newpanecommand
★ 2v0.0.1MITupdated 2026-10-10gaius-codius/ostrakon/tools/experiments/spw
A shopper browsing a rack in a slop shop
Preview · a replayed session in a sandbox
claude · ~/work/app · spw
│ ┃ spw ✕ › fix the failing auth test and add an audit log call │ ┃ ✎ spw type here │ ┃ full draft (0 cells, head 0): ● spw: SPW open box=60 margin=4 {"isPlaced":true} │ ● spw: SPW render full=0c drawn="" (0c) box=60 W=56 gen=0 mode= │ ⏺ Read(src/auth.ts) │ ⎿ Read 6 lines │ ⏺ Update(src/auth.ts) │ ⎿ Added 2 lines, removed 1 line │ ⏺ Bash(bun test) │ ⎿ 3 pass, 1 fail │ │ ● Done. refresh now rejects expired claims and logs an audit event. │ │ ✻ Worked for 42s · done 4:20 PM │ │ › /spw │ ⎿ spw: spw │ │ ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── › ? for shortcuts

Draws

Pane · spw
✎ spw type here full draft (0 cells, head 0):
README

<h1> <img src="brand/lockup-light.svg" alt="ostrakon" width="300"> </h1>

A scratchpad for Claude Code. Halfway through a prompt, something else comes to mind: open the pane, note it, close the pane, and your prompt is back as you left it. Later, pull the note into the prompt when you get to it. Claude can jot notes for you too.

In the demo: note something mid-prompt, then add a saved note to the prompt.

<img src="docs/images/demo.gif" alt="Half a prompt typed in Claude Code; the ostrakon pane opens and the prompt empties, a note is typed and saved, and when the pane closes the prompt is back as it was. Then the pane opens again, a search finds a note Claude jotted, and t adds it to the prompt under the draft">

Notes are kept per project, and the pane shows all of them. Syncing between machines and a phone app are optional.

What it does

  • Capture a note in under two seconds, even while Claude is working. Mid-prompt, ctrl+x s opens the pane and ctrl+n starts a note; close the pane and your draft is back. In an empty prompt, /jot text or // saves one without opening anything.
  • Gives Claude a jot tool: Claude jots notes it thinks are important or wants to pass on to you. You can also ask it to add one: "jot that down". Claude can also list your notes and archive one once it's done.
  • Triage open notes across all your projects in a searchable pane: edit, move, archive, bundle several into one prompt.
  • Dispatch a note into the prompt. This project's open notes sit in a row of numbered chips above the prompt (the "pocket"); press a note's number in an empty prompt to pull it in. Mid-prompt, find the note in the pane and press t: it goes in under what you've typed.
  • Harvest (opt-in): after each turn, an extra review looks for side issues that came up and offers them as notes, which you keep or dismiss. It doesn't change what Claude is doing.
  • Sync: two-way sync enabled by multiple methods. Through a small hub, a plain folder, Obsidian or a combination of methods (Sync).
  • Phone: capture and triage from your phone with the hub's web app, installed to the Home Screen, or send a note from the share sheet or Siri with an iOS Shortcut.

Notes are plain Markdown files with some YAML. One per note, in ~/.local/share/ostrakon/ by default, so they are yours to read, grep and back up.

The ostrakon pane docked beside a Claude Code session, listing open notes across projects, with this project's notes as numbered chips above the prompt

Sync

Sync is optional and works both ways. Add, edit, move or archive a note on one machine or on your phone, and the change shows up everywhere else. If the same note changes in two places, the later change wins everywhere. There are a few ways to sync; use one or combine them:

  • The hub (server/): a small service you run on one of your machines. Your other machines and your phone reach it over Tailscale (the easy option) or your own HTTPS proxy, tunnel or VPN. Changes show up in other sessions within seconds, and the hub also serves the phone app. Setup: the hub and the phone app.
  • A folder (the mirrorDir option): ostrakon keeps a copy of your notes in a folder, and whatever syncs that folder (Dropbox, Syncthing, any synced drive) carries them between machines. Point it at an Obsidian vault and you can edit notes there too; your edits come back. Obsidian shows each note's metadata as Properties at the top; to hide them, set Settings → Editor → Properties in document to Hidden. No server needed.
  • Both at once: they work independently, so you can use the hub for your phone and a folder for Obsidian.

On your phone, the hub's web app installs to the Home Screen and opens straight to a note field. You can triage there too (edit, move, archive, mark sent), and anything you capture offline is kept until the hub is reachable again. To pair a phone, scan the QR code that ostrakon pair shows. An iOS Shortcut can send a note from the share sheet or Siri without opening the app. Details: docs/phone.md.

Install

There are two ways to install it:

  • The install script gets you the mod and the ostrakon command: update, doctor, pair, and the hub for syncing and the phone app. Updates come through ostrakon update.
  • Claude Code's plugin marketplace gets you the mod only. There's no ostrakon command, so you can't run the hub or pair a phone from it; folder sync, and a hub set up on another machine, still work. Updates come through Claude Code.

Use one or the other. The install script offers to add the keybindings; with the marketplace, add them yourself.

Requirements

  • Claude Code with mods support (see the mods docs). Tested with 2.1.296; mods are still changing, so a much older or newer version may not work.
  • git, and python3 for the install script (without it, the script tells you the one line to add yourself).
  • For the hub: Bun (tested with 1.4.3) to run the hub and to use ostrakon pair, and qrencode for the pairing QR code. install.sh --hub sets the hub up as a systemd service, so that part is Linux-only for now; elsewhere, run ostrakon hub however you like to keep things running.

Tested on Linux. macOS should work for the mod but hasn't been tried yet; reports are welcome.

With the install script

One command clones ostrakon into ~/.local/share/ostrakon-src and installs the newest release:

curl -fsSL https://raw.githubusercontent.com/gaius-codius/ostrakon/main/get.sh | bash

Add -s -- --hub after bash to set up the hub too, or -s -- --main to follow the newest code on main instead of releases. Running it again updates what's there. To read the script before running it: curl -fsSL https://raw.githubusercontent.com/gaius-codius/ostrakon/main/get.sh -o get.sh, look it over, then bash get.sh.

Or clone the repo wherever you like and run the install script yourself:

git clone https://github.com/gaius-codius/ostrakon.git
cd ostrakon && ./install.sh --release

Either way, the install script:

  • switches to the newest release (leave out --release to run what's on main),
  • loads the mod in every Claude Code session, by setting CLAUDE_CODE_PLUGIN_DIRS in ~/.claude/settings.json (only if it isn't set already, and it keeps a .bak copy),
  • and adds the ostrakon command to ~/.local/bin.

It's safe to run again. ./install.sh --hub also sets up the hub (below).

To try it without installing anything, load it for a single session: claude --plugin-dir ostrakon/plugin. To install by hand, add the folder to ~/.claude/settings.json:

{ "env": { "CLAUDE_CODE_PLUGIN_DIRS": "/path/to/ostrakon/plugin" } }

From the plugin marketplace

claude plugin marketplace add gaius-codius/ostrakon
claude plugin install ostrakon@ostrakon

Update it with claude plugin update ostrakon@ostrakon, or turn on auto-update for the marketplace in /plugin. A new copy arrives with each release. If you also run the install script, it sees the plugin and doesn't load the mod a second time.

Updating

ostrakon update             # or ./update.sh in the repo
ostrakon update --main      # switch to the newest code on main instead of releases
ostrakon update --release   # switch back to releases
ostrakon version

If you installed a release, update moves you to the newest one; if you're on a branch, it pulls that branch (and stops rather than touch commits of your own). It restarts the hub if it's running and lists what changed. Restart any open Claude Code sessions to pick up the new version. Each release's changes are in CHANGELOG.md.

If something isn't working

ostrakon doctor

It checks that the mod loads, which Claude Code version last ran it and whether anything went wrong there, your notes folder, the hub and its token, and the tools ostrakon needs, and says what to fix. It changes nothing and never prints your token, so its output is safe to paste into a bug report.

Keybindings

A mod can't add keyboard shortcuts of its own, so ostrakon borrows some existing Claude Code actions (which is why the names below look unrelated). The install script asks whether to add these to ~/.claude/keybindings.json (--keys adds them without asking, --no-keys skips them). It leaves alone any key you've bound to something else, and any of these actions you've already given a key. To add them by hand:

{
  "bindings": [
    { "context": "Chat", "bindings": { "ctrl+x s": "app:cycleDiffBase" } },
    {
      "context": "Pane",
      "bindings": {
        "ctrl+x s": "app:cycleDiffBase", "ctrl+q": "pane:previous", "ctrl+f": "app:toggleDiffNoiseFilter",
        "ctrl+s": "app:toggleDiffPreSession", "ctrl+n": "pane:next"
      }
    },
    {
      "context": "PaneField",
      "bindings": {
        "ctrl+x s": "app:cycleDiffBase", "ctrl+q": "pane:previous", "ctrl+f": "app:toggleDiffNoiseFilter",
        "ctrl+s": "app:toggleDiffPreSession", "ctrl+n": "pane:next"
      }
    }
  ]
}

ctrl+x s opens and closes the pane; the other keys work inside it. /jot and // need no setup. The full key list is in docs/SPEC.md §4.

Configuration

Set these under the plugin's options (pluginConfigs.ostrakon.options in your settings, or pluginConfigs["ostrakon@ostrakon"].options if you installed it with claude plugin install):

OptionDefaultWhat it does
notesDir~/.local/share/ostrakonWhere notes are stored. The OSTRAKON_DIR environment variable overrides it.
pocket / pocketMaxon / 5The numbered chips above the prompt, and how many show.
harvestoffReview each finished turn for side issues worth keeping.
harvestModeforkfork reviews the whole conversation, tool output included, so it sees more but costs more as the conversation grows. light has a small model read only your prompt and Claude's final answer: much cheaper, but it misses more.
harvestMaxPerTurn3The most notes harvest offers after one turn.
hubUrl / hubTokenemptyThe hub to sync with, and its token. Empty: no hub.
mirrorDiremptyA folder to keep a synced copy of your notes in, such as a Dropbox or Syncthing folder or part of an Obsidian vault.

The hub and the phone app (optional)

The hub is a single Bun file (server/hub.ts) that stores notes in SQLite. It only listens on the machine it runs on and needs a token for every request, so you choose how other devices reach it. We use Tailscale, the simplest option: tailscale serve gives it an HTTPS address only your devices can reach, and install.sh and ostrakon pair set it up for you.

./install.sh --hub

This creates a token in ~/.config/ostrakon-hub/env (if there isn't one yet) and installs and starts the hub as a systemd user service (server/ostrakon-hub.service). It then prints the two steps left for you: loginctl enable-linger, so the hub keeps running when you log out, and tailscale serve, to put it on your tailnet.

To pair a phone, run ostrakon pair (it needs qrencode) and scan the QR code. The code in it works once and expires after 5 minutes, so the QR never contains the token itself; --token prints a link that does.

To run the hub in the foreground instead: HUB_TOKEN=$(openssl rand -hex 24) ostrakon hub. The ostrakon command reads HUB_TOKEN from the environment or from ~/.config/ostrakon-hub/env.

Not using Tailscale? Any HTTPS reverse proxy, tunnel or VPN works too; see Open it.

The service runs ~/.local/bin/ostrakon hub, so it doesn't matter where the repo lives. Phone setup, the Home Screen app and the iOS Shortcut are covered in docs/phone.md. Read SECURITY.md before making the hub reachable from other devices.

Known limitations

These come from Claude Code's mods interface, which is still new, and should go away as it matures.

  • Long notes in the pane's text field. When a note is longer than the capture or edit field, the text doesn't scroll with you: it disappears past the end of the field, while the cursor keeps moving and can even drop to an empty "second" line. What you type is all there, though, and the whole note shows in full just below the field as you write. It needs a text field that wraps or scrolls, which mods don't have yet.
  • Claude Code updates can break things. Mods change between versions. If something stops working after an update, run ostrakon doctor and mention your Claude Code version when you report it.

More, including a couple of folder-sync edge cases, in ROADMAP.md.

Development

  • How it's designed, and notes on the platform it builds on: docs/SPEC.md. How it looks: docs/DESIGN.md. Ideas for what's next: ROADMAP.md.
  • tools/check.sh runs every check: claude plugin validate, the design check (docs/DESIGN.md against the code), the type-check, claude plugin test and the hub's tests. The mod's tests and type-check need the claude CLI installed, because the mods test kit and types ship with it.
  • The hub's tests need only Bun: cd server && bun test.
  • How to contribute, and how releases are made: CONTRIBUTING.md.
  • tools/ also has the screenshot pipeline and some experiment scripts; they write to working-docs/, which git ignores.

License

MIT

Source 2 files
hooks/register.tsx 131 lines
1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4// Probe: an Input whose `value` is only the last W cells
5// of a full draft kept in state. `/spw [boxWidth] [margin] [remount]` opens the pane (remount: back | always | nothing);
6// every result goes to the debug log as "SPW ...". The helpers below are the pure part (what model.ts would hold).
7
8const state = atom({ plugin: 'spw', key: 'state' } as const, { full: '', pairs: [] as { head: string; tail: string }[], width: 60 })
9const margin = atom({ plugin: 'spw', key: 'margin' } as const, 4)
10// remount: '' (never), 'back' (a new Input key, so a new cursor at the end, when the window scrolls back or an edit lands mid-window), 'always' (every input)
11const remount = atom({ plugin: 'spw', key: 'remount' } as const, { mode: '', gen: 0 })
12
13const log = ($: EngineInterface, text: string) => $.ui.log(`SPW ${text}`, { to: 'debug' })
14const hash = (text: string) => { let h = 5381; for (const ch of text) h = ((h * 33) ^ ch.codePointAt(0)!) >>> 0; return h.toString(16) }
15const show = (text: string) => JSON.stringify(text.length > 90 ? `${text.slice(0, 20)}…(${text.length})…${text.slice(-50)}` : text)
16
17const WIDE =
18  /[ᄀ-ᅟ〈〉⺀-〾ぁ-㏿㐀-䶿一-鿿ꀀ-꓏가-힣豈-﫿︰-﹏＀-⦆¢-₩\u{1F1E6}-\u{1F1FF}\u{1F300}-\u{1FAFF}\u{20000}-\u{3FFFD}]/u
19const ZERO = /[̀-ͯ᪰-᫿᷀-᷿​-‏⃐-⃿︀-️]/u
20const cellsOf = (char: string) => (ZERO.test(char) ? 0 : WIDE.test(char) ? 2 : 1)
21const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' })
22const clustersOf = (text: string) => Array.from(segmenter.segment(text), part => part.segment)
23const clusterCells = (cluster: string) => Math.max(0, ...Array.from(cluster, cellsOf))
24const cells = (text: string) => clustersOf(text).reduce((sum, c) => sum + clusterCells(c), 0)
25
26type Pair = { head: string; tail: string }
27
28// The last `width` cells of the draft by whole clusters; head is the rest.
29const windowOf = (draft: string, width: number): Pair => {
30  let used = 0
31  const kept: string[] = []
32  const all = clustersOf(draft)
33  for (let i = all.length - 1; i >= 0; i--) {
34    const size = clusterCells(all[i]!)
35    if (used + size > width) break
36    kept.unshift(all[i]!)
37    used += size
38  }
39  const tail = kept.join('')
40  return { head: draft.slice(0, draft.length - tail.length), tail }
41}
42
43// pairs: newest first. Typing: tail is a prefix of value; backspacing: value is a prefix of tail.
44const rejoin = (pairs: Pair[], value: string): { full: string; via: number } => {
45  for (let i = 0; i < pairs.length; i++) {
46    const { head, tail } = pairs[i]!
47    if (value.startsWith(tail) || tail.startsWith(value)) return { full: head + value, via: i }
48  }
49  // Neither is a prefix of the other: an edit inside the window (the Input has arrows). The head is unchanged.
50  if (pairs.length > 0) return { full: pairs[0]!.head + value, via: -2 }
51  return { full: value, via: -1 }
52}
53
54async function onInput($: EngineInterface, value: string) {
55  const was = await read($, state)
56  const m = await read($, margin)
57  const { full, via } = rejoin(was.pairs, value)
58  const drawn = windowOf(full, was.width - m)
59  await update($, state, s => ({ ...s, full, pairs: [drawn, ...s.pairs].slice(0, 2) }))
60  const mode = await read($, remount)
61  // A new key (a fresh Input, cursor at the end) is needed when the Input would otherwise keep a value or a cursor of its own:
62  // the drawn tail is the one already drawn (the engine skips the redraw), is longer than the value (the cursor stays where it was,
63  // short of the end), or the edit was mid-window (the cursor is mid-text).
64  const same = drawn.tail === was.pairs[0]?.tail && value !== drawn.tail
65  const longer = drawn.tail.length > value.length
66  if (mode.mode === 'always' || (mode.mode === 'back' && (via === -2 || same || longer))) await update($, remount, r => ({ ...r, gen: r.gen + 1 }))
67  log($, `input value=${show(value)} (${cells(value)}c) via=${via} full=${show(full)} (${cells(full)}c) h=${hash(full)} head=${cells(drawn.head)}c draws=${show(drawn.tail)} (${cells(drawn.tail)}c)`)
68}
69
70
71async function onSubmit($: EngineInterface, value: string) {
72  const was = await read($, state)
73  const { full } = rejoin(was.pairs, value)
74  log($, `submit value=${show(value)} full=${show(full)} (${cells(full)}c)`)
75  await update($, state, st => ({ ...st, full: '', pairs: [] }))
76}
77
78export const register: Register = on => {
79  on('session.start', async ($, e, next) => {
80    await $.command.register({ name: 'spw', description: 'Windowed Input probe: /spw [boxWidth] [margin]', argumentHint: '[boxWidth] [margin]' })
81    return next(e)
82  })
83
84  on('command.run', { command: 'spw' }, async ($, e) => {
85    const [w, m, mode] = (e.args ?? '').trim().split(/\s+/).map((part, i) => (i < 2 ? Number(part) : part)) as [number, number, string]
86    await update($, remount, () => ({ mode: mode ?? '', gen: 0 }))
87    await update($, state, () => ({ full: '', pairs: [], width: w || 60 }))
88    await update($, margin, () => (Number.isFinite(m) ? (m as number) : 4))
89    const r = await $.ui.open({ id: 'spw', title: 'spw', focus: true, closeOnEscape: true, rows: 12 })
90    log($, `open box=${w || 60} margin=${Number.isFinite(m) ? m : 4} ${JSON.stringify(r)}`)
91    return { text: 'spw' }
92  })
93
94  on('ui.render', { component: 'Pane', requestId: 'spw' }, async ($, e) => {
95    const { Box, Text, Input } = $.ui.resolve(e) as any
96    const s = await read($, state)
97    const m = await read($, margin)
98    const rm = await read($, remount)
99    const w = s.width - m
100    const shown = s.pairs[0]?.tail ?? ''
101    // Below the width the window is the whole draft (head empty), so the draw is value === draft.
102    log($, `render full=${cells(s.full)}c drawn=${show(shown)} (${cells(shown)}c) box=${s.width} W=${w} gen=${rm.gen} mode=${rm.mode}`)
103    return (
104      <Box flexDirection="column">
105        <Box width={e.props.bodyColumns}>
106          <Box flexShrink={0}>
107            <Text color="cyan" bold>
108              ✎ spw{' '}
109            </Text>
110          </Box>
111          <Box key={`spw-box-${rm.gen}`} width={s.width}>
112            <Input
113              key={`spw-input-${rm.gen}`}
114              placeholder="type here"
115              value={shown}
116              submitLabel=""
117              autoFocus
118              onInput={(value: string) => onInput($, value)}
119              onSubmit={(value: string) => onSubmit($, value)}
120            />
121          </Box>
122          <Text dimColor> ◂box</Text>
123        </Box>
124        <Text>
125          full draft ({cells(s.full)} cells, head {s.pairs[0] ? cells(s.pairs[0].head) : 0}): {s.full}
126        </Text>
127      </Box>
128    )
129  })
130}
131
types/index.d.ts 12 lines
1export type SpwPlaceholder = never
2
3declare module 'claude-code' {
4  interface PluginState {
5    spw: {
6      full: string
7      pairs: { head: string; tail: string }[]
8      width: number
9    }
10  }
11}
12