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 file1import { SignJWT, jwtVerify } from 'jose';2import { nanoid } from 'nanoid';3 4const SESSION_TTL = 60 * 60 * 24 * 7; // 7 days5 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_SECRET12 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 token21 }22}SQL with info annotation
Static preview: this specimen does not change the active host file1CREATE 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 tableReferencing new sessions table — see 0042_sessions.sql7);Component documentation
Code Editor Pane
components/sandbox/code-editor-pane.tsxPurpose
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.