Kanshō/Code editor pane

Code editor pane

Tabbed read-only editor surface where agent edits and failing-test annotations land.

Included in the single kansho full pack. Components are not offered as separate installs.

Agent edits + failing test annotations

Static preview: New tab does not open a host file
src/auth/session.tstypescript
1import { SignJWT, jwtVerify } from 'jose';
2import { nanoid } from 'nanoid';
3
4const SESSION_TTL = 60 * 60 * 24 * 7; // 7 days
5
6export async function createSession(userId: string) {
7 const sessionId = nanoid();
8 const token = await new SignJWT({ sub: userId, sid: sessionId })
9 .setProtectedHeader({ alg: 'HS256' })
10 .setExpirationTime(SESSION_TTL + 's')
11 .sign(getSecret());
getSecret() now reads from process.env.SESSION_SECRET
12 return { sessionId, token };
13}
14
15export async function verifySession(token: string) {
16 try {
17 const { payload } = await jwtVerify(token, getSecret());
18 return payload;
19 } catch {
20 return null;
AuthService > verifySession > returns null on tampered token
21 }
22}
Ln 11, Col 181 failing test

SQL with info annotation

Static preview: this specimen does not change the active host file
db/migrations/0041_users.sqlsql
1CREATE TABLE users (
2 id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
3 email TEXT NOT NULL UNIQUE,
4 created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
5 updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
6 -- sessions are now tracked in a separate table
Referencing new sessions table — see 0042_sessions.sql
7);
Ln 5, Col 3No diagnostics

Component documentation

Code Editor Pane

components/sandbox/code-editor-pane.tsx

Purpose

Displays read-only source lines, annotations, file tabs, breadcrumb, cursor metadata, and diagnostics.

Appropriate use

Use for inspecting generated or relevant code when editing remains outside the component.

Example

components/sandbox/code-editor-pane.tsx has a representative live example in the "Agent edits + failing test annotations" section on /components/code-editor-pane.

States

Lines may be agent-edited, failing, search-matched, or annotated as info, warning, error, or agent; tabs, status, cursor, and path are supplied.

API and props

CodeEditorPane accepts tabs, activeTab, onSelectTab, onCloseTab, onNewTab, lines, language, path, cursor, status, and className.

Dependencies

Direct imports are React, Lucide icons, TabStrip, and cn.

Accessibility

The source area is a named tabpanel tied to the active tab, tabs use keyboard navigation, and diagnostics and annotations are visible text rather than colour-only.

Limitations

It is read-only, does not highlight syntax, edit files, calculate diagnostics, or preserve tab state; callback-less demo operations do not open files.

Source

Source: components/sandbox/code-editor-pane.tsx.

Full pack

components/sandbox/code-editor-pane.tsx is documented at /components/code-editor-pane and installs only through the single Kansho full pack; no individual component install is offered.