Plugin Development Guide (General Best Practices)

This guide captures reusable patterns for building panel plugins: panel chrome, operations vs. WebSocket usage, binary endpoints, icons, CLI packaging, and cross‑platform behavior.

1. Panel Header Chrome (Standard Controls)

All panels should render the standard chrome header and let the shared PanelChromeController wire up controls. The header is built from three sections:

1. Main (title + optional instance dropdown)
2. Plugin controls (custom buttons)
3. Frame controls (toggle/move/reorder/menu/close)

Required structure

html
1<div class="panel-header panel-chrome-row" data-role="chrome-row">
2  <div class="panel-header-main">
3    <span class="panel-header-label" data-role="chrome-title">Panel Title</span>
4    <div class="panel-chrome-instance" data-role="instance-actions">
5      <!-- Instance dropdown markup here -->
6    </div>
7  </div>
8  <div class="panel-chrome-plugin-controls" data-role="chrome-plugin-controls">
9    <!-- plugin-specific buttons go here -->
10  </div>
11  <div class="panel-chrome-frame-controls" data-role="chrome-controls">
12    <!-- standard move/reorder/menu/close buttons -->
13  </div>
14</div>

Frame controls markup

Copy the structure from existing panels like notes or scheduled-sessions (includes toggle, move, reorder, menu, close). The PanelChromeController attaches handlers based on data-action attributes.

2. PanelChromeController Responsibilities

The controller:

• wires up frame controls
• manages responsive layout
• optionally wires up the instance dropdown

You must pass the instance dropdown container with:

html
1<div class="panel-chrome-instance-dropdown" data-role="instance-dropdown-container">…</div>

Then initialize:

ts
1chromeController = new PanelChromeController({
2  root: container,
3  host,
4  title: 'Panel Title',
5  onInstanceChange: (instanceId) => {
6    selectedInstanceId = instanceId;
7    persistState();
8    void refreshList();
9  },
10});

Multi‑profile selection (shared profiles)

Instance IDs now map to shared profiles declared at the top level profiles config. When you want multi‑profile selection in a panel, opt into it explicitly:

ts
1chromeController = new PanelChromeController({
2  root: container,
3  host,
4  title: 'Notes',
5  instanceSelectionMode: 'multi',
6  onInstanceChange: (instanceIds) => {
7    selectedInstanceIds = instanceIds;
8    activeInstanceId = instanceIds[0] ?? 'default';
9    persistState();
10    void refreshList();
11  },
12});
13
14chromeController.setInstances(instances, selectedInstanceIds);

Context: include both the active instance and the full selection:

ts
1host.setContext(contextKey, {
2  instance_id: activeInstanceId,
3  instance_ids: selectedInstanceIds,
4  contextAttributes: {
5    'instance-id': activeInstanceId,
6    'instance-ids': selectedInstanceIds.join(','),
7  },
8});

Notes:

• default is always available (implicit).
• Non‑default instance ids must match a configured profile id.
• Items still belong to a single instance/profile (edits happen in one profile).

3. Icons and Header Dock

Panel icons shown in the header dock come from the panel manifest. The manifest icon value must match a key in packages/web-client/src/utils/icons.ts.

Example:

json
1"icon": "fileText"

If the icon name is invalid, the UI falls back to panelGrid (window/grid icon).

4. Operations vs WebSocket for CRUD

Recommended pattern

Use HTTP operations for CRUD and WebSocket events only for broadcast updates:

• list, create, update, delete → HTTP operations
• real‑time updates → WebSocket panel_update

This avoids startup races when WebSocket isn’t ready yet (common on mobile).

Generic helper

ts
1async function callOperation<T>(operation: string, body: Record<string, unknown>): Promise<T> {
2  const response = await apiFetch(`/api/plugins/<pluginId>/operations/${operation}`, {
3    method: 'POST',
4    headers: { 'content-type': 'application/json' },
5    body: JSON.stringify(body),
6  });
7  const payload = (await response.json()) as { ok: true; result: T } | { error: string };
8  if (!response.ok || 'error' in payload) throw new Error(payload.error);
9  return payload.result;
10}

5. Extra HTTP Routes for Binary Files

Operations always return JSON. For binary endpoints (file download/preview), use extraHttpRoutes in the plugin module:

ts
1extraHttpRoutes: [
2  async (_context, req, res, url, segments) => {
3    if (req.method === 'GET' && segments[3] === 'files') {
4      res.setHeader('Content-Disposition', 'inline; filename="..."');
5      res.end(fileBuffer);
6      return true;
7    }
8    return false;
9  },
10]

This is documented in docs/PLUGIN_SDK.md.

6. View vs Download Behavior

When serving files, support both:

• View (inline) — default
• Download (attachment) — via query param (e.g. ?download=1)

This enables an “open in browser” action and a “download” action with the same endpoint.

7. API Base URL

When building URLs for fetch/open, use helpers in web-client/src/utils/api.ts:

• apiFetch() for relative API calls
• getApiBaseUrl() for full URLs when opening externally

This ensures URLs work in Tauri, Capacitor, and web.

8. Platform-Specific Open/Save

Web

• window.open(url, '_blank') for view
• <a download> for download

Tauri Desktop

• View: plugin:shell|open
• Download: native save dialog + backend command to write file

Capacitor Mobile

• View: @capacitor/browser
• Download: @capacitor/filesystem + optional @capacitor/share

9. Custom CLI Bundling

Plugins can ship a custom CLI by placing bin/cli.ts in the plugin directory.

Build system compiles this file instead of auto‑generating a CLI from operations. Use this for:

• reading files (--file)
• custom args / processing
• client-side behaviors before calling the API

9.1 Skill Bundle Export Controls

By default, npm run build:plugins exports skills to dist/skills/<pluginId>/. To opt out for a specific plugin, set:

json
1{
2  "skills": { "autoExport": false }
3}

Passing --skills <pluginId> still forces export for that plugin.

Generated SKILL.md frontmatter includes metadata.author and metadata.version, populated from the root package.json.

10. Theme Variables

Use shared theme variables:

• --color-text-primary
• --color-text-secondary
• --color-bg-hover
• --color-bg-active

Avoid custom fallbacks like --text-primary or prefers-color-scheme blocks.

11. Shared Dialog Styling Duplication

Some dialogs are rendered by shared web-client controllers but styled in multiple plugin bundles. For example, list metadata dialog styles live in both:

• packages/plugins/official/lists/web/styles.css
• packages/plugins/official/notes/web/styles.css

When adjusting .list-metadata-* rules (or similar shared dialog styles), update both files to keep Lists and Notes consistent.

12. Panel Context for Chat Input

Panels can provide context that is injected into user chat messages and shown in the context preview above the input. Use the panel context key and include selection data.

Required pattern

ts
1const contextKey = getPanelContextKey(host.panelId());
2host.setContext(contextKey, {
3  type: 'list', // or 'artifacts', 'note', etc.
4  id: activeContainerId,
5  name: activeContainerName,
6  description: activeContainerDescription ?? '',
7  selectedItemIds,
8  selectedItems, // [{ id, title }]
9  selectedItemCount: selectedItemIds.length,
10  contextAttributes: {
11    'instance-id': selectedInstanceId,
12    // add custom attributes like 'selected-text' for text selections
13  },
14});
15services.notifyContextAvailabilityChange();

Notes

• type, id, and name are used to build the <context ... /> line in chat.
• selectedItemIds/selectedItems populate selection context (e.g., list rows).
• contextAttributes is a key/value bag for extra metadata (keys should be kebab-case).
• Call services.notifyContextAvailabilityChange() after updates so the preview refreshes.
• Listen for assistant:clear-context-selection if you support selection clearing.

13. Recommended Panel Lifecycle

On mount:

• fetch instances via HTTP
• fetch initial list via HTTP
• subscribe to WebSocket updates

On visibility change:

• refresh list via HTTP

This guide is meant as a reusable checklist for future plugin work (operations + binary endpoints, panel chrome, icons, CLI, and cross‑platform behaviors).