kitchen-sink

1// No imports or build step. Keep $ API calls explicit for Claude's static validator.
2// UI callbacks run on a click; no background model requests or session messages.
3export function register(on) {
4  let tab = 'recipes';
5  let note = '';
6  let clicks = 0;
7  let tools = 0;
8  let turns = 0;
9  let events = [];
10  const record = (label) => { events = [...events, label].slice(-12); };
11
12  on('session.start', async ($, e, next) => {
13    // A damaged/unavailable note store should not prevent the lab from loading.
14    try {
15      const saved = await $.store.get('scratch-note');
16      note = typeof saved === 'string' ? saved.slice(0, 500) : '';
17    } catch {
18      record('note store unavailable; starting with an empty note');
19    }
20    record('session.start');
21    await $.tool.register({
22      name: 'mix',
23      description: 'Kitchen Sink demo only. Mix 1–3 imaginary portions; no real-world action.',
24      inputSchema: { type: 'object', properties: { portions: { type: 'integer', minimum: 1, maximum: 3 } }, required: ['portions'], additionalProperties: false },
25    });
26    await $.command.register({ name: 'kitchen', description: 'Open the Kitchen Sink learning pane', immediate: true });
27    await $.command.register({ name: 'kitchen-status', description: 'Print lab counters and available render surfaces', immediate: true });
28    return next(e);
29  });
30
31  on('command.run', { command: 'kitchen' }, async ($) => {
32    const placed = await $.ui.open({ id: 'kitchen-sink-lab', title: 'Kitchen Sink', focus: true, closeOnEscape: true });
33    return { text: placed.isPlaced ? 'Kitchen Sink opened. Try the tabs, then /kitchen-status.' : 'No pane was placed. Use /kitchen-status; try a local Desktop Code tab or interactive terminal.' };
34  });
35
36  on('command.run', { command: 'kitchen-status' }, async ($) => {
37    const surfaces = await $.session.surfaces();
38    return { text: `Kitchen Sink | tools: ${tools} | turns: ${turns} | clicks: ${clicks} | surfaces: ${surfaces.join(', ') || 'none (headless or no renderer)'}` };
39  });
40
41  // Observe a call without keeping arguments, prompts, results or file paths.
42  on('tool.call', async ($, e, next) => {
43    tools += 1;
44    record('tool.call');
45    $.ui.invalidate('ui.render');
46    return next(e);
47  });
48
49  // A deliberately narrow gate: it only handles this plugin's imaginary tool.
50  on('tool.call', { tool: 'mcp__kitchen-sink__mix' }, async ($, e) => {
51    if (!Number.isInteger(e.portions) || e.portions < 1 || e.portions > 3) {
52      record('mix: refused invalid portion count');
53      return { deny: 'Demo limit: choose an integer from 1 to 3 portions.' };
54    }
55    record('mix: completed');
56    return { result: `Mixed ${e.portions} imaginary portion(s). Nothing was written, purchased or sent.` };
57  }).catch(async () => ({ deny: 'Kitchen demo tool failed; no action was taken.' }));
58
59  // Opt in on one prompt only. Other prompts pass through byte for byte.
60  on('prompt.submit', async ($, e, next) => {
61    if (!e.text.startsWith('[ks:brief] ')) return next(e);
62    record('prompt.submit: brief recipe');
63    return next({ ...e, text: e.text.slice('[ks:brief] '.length) + '\n\nPlease answer in at most three concise bullet points.' });
64  });
65
66  on('turn.complete', async ($, e, next) => {
67    turns += 1;
68    record('turn.complete');
69    $.ui.invalidate('ui.render');
70    return next(e);
71  });
72
73  on('ui.render', { component: 'Spinner' }, async ($, e, next) =>
74    next({ ...e, props: { ...e.props, suffix: `${e.props.suffix || ''} · kitchen: ${tools} calls` } })
75  );
76
77  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
78    const { Box, Text, Button } = $.ui.resolve(e);
79    const others = await next(e);
80    return Box({ flexDirection: 'column', children: [
81      ...(others ? [others] : []),
82      Box({ flexDirection: 'row', columnGap: 2, children: [
83        Text({ dimColor: true, children: [`Kitchen Sink · ${tools} tools · ${turns} turns`] }),
84        Button({ key: 'open-lab', label: 'Open lab', onPress: async () => {
85          await $.ui.open({ id: 'kitchen-sink-lab', title: 'Kitchen Sink', focus: true, closeOnEscape: true });
86        } }),
87      ] }),
88    ] });
89  });
90
91  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
92    if (e.requestId !== 'kitchen-sink-lab') return next(e);
93    const { Box, Text, Button, Input } = $.ui.resolve(e);
94    const tabs = ['recipes', 'events', 'notes'].map((name) => Button({
95      key: `tab-${name}`, label: name === tab ? `[${name}]` : name,
96      onPress: () => { tab = name; $.ui.invalidate('ui.render'); },
97    }));
98    let body = [];
99    if (tab === 'recipes') body = [
100      Text({ children: ['Explore a real mod, one small interaction at a time.'] }),
101      Text({ dimColor: true, children: ['Start with an empty input. Draft buttons fill it; review, then send.'] }),
102      Button({ key: 'counter', label: `Click counter: ${clicks}`, onPress: () => { clicks += 1; $.ui.invalidate('ui.render'); } }),
103      Button({ key: 'draft-brief', label: 'Draft a brief prompt', onPress: async () => {
104        const draft = await $.prompt.read();
105        if (draft.text) {
106          await $.ui.toast('Your draft is still there. Clear or send it before loading this example.');
107          return;
108        }
109        await $.prompt.fill({ text: '[ks:brief] Explain how Claude Code mods work.', mode: 'append' });
110      } }),
111      Button({ key: 'draft-mix', label: 'Draft a demo tool request', onPress: async () => {
112        const draft = await $.prompt.read();
113        if (draft.text) {
114          await $.ui.toast('Your draft is still there. Clear or send it before loading this example.');
115          return;
116        }
117        await $.prompt.fill({ text: 'Use the kitchen-sink mix tool to mix 2 imaginary portions.', mode: 'append' });
118      } }),
119      Text({ children: ['The tool has a 1–3 portion guard. The note tab persists only what you explicitly save.'] }),
120    ];
121    if (tab === 'events') body = [
122      Text({ bold: true, children: [`${tools} tool calls · ${turns} turns · ${clicks} clicks`] }),
123      Text({ dimColor: true, children: ['Last 12 labels, in memory only. No prompt or tool contents are recorded.'] }),
124      ...events.map((label) => Text({ children: [label] })),
125      Button({ key: 'reset-events', label: 'Reset counters and event labels', onPress: () => {
126        tools = 0; turns = 0; clicks = 0; events = []; $.ui.invalidate('ui.render');
127      } }),
128    ];
129    if (tab === 'notes') body = [
130      Text({ children: ['One local scratch note, shared by this plugin across sessions. Last save wins.'] }),
131      Input({ key: 'scratch-note', label: 'Scratch note', value: note, placeholder: 'Synthetic notes only; 500 characters max', submitLabel: 'Save', onSubmit: async (value) => {
132        const text = value.slice(0, 500);
133        await $.store.set('scratch-note', text);
134        note = text;
135        $.ui.invalidate('ui.render');
136      } }),
137      Text({ children: [`Saved / loaded: ${note || '(empty)'}`] }),
138      Button({ key: 'forget-note', label: 'Delete saved note', onPress: async () => {
139        await $.store.delete('scratch-note'); note = ''; $.ui.invalidate('ui.render');
140      } }),
141    ];
142    return Box({ flexDirection: 'column', rowGap: 1, children: [
143      Text({ bold: true, children: ['CLAUDE MOD KITCHEN SINK'] }),
144      Text({ dimColor: true, children: [`Renderer: ${e.surface} · experimental learning lab`] }),
145      Box({ flexDirection: 'row', columnGap: 1, children: tabs }),
146      ...body,
147    ] });
148  });
149}
150