@juspay/shooter 1.17.0 → 1.19.0

package/src/lib/types/sos.ts

@@ -0,0 +1,134 @@
+// Session-Over-Sessions (SoS) types — the coordinator that merges N running
+// agent sessions into one source-tagged super-session and relays messages
+// between them. See docs/SESSION-OVER-SESSIONS.md.
+//
+// A member's `sessionKey` is exactly what the server's session-watcher adapter
+// keys on: a JSONL/JSON file path for file-backed providers, or a bare session
+// id for OpenCode. That lets the coordinator reuse the same watcher routing the
+// WS session handler uses, covering all providers with no new watching code.
+
+import type { SessionSource } from './generated';
+import type { ConversationMessage } from './sessions';
+
+/** An escalated relay awaiting human approve/deny (Phase 2 HITL). */
+export interface PendingRelay {
+  createdAt: string;
+  expiresAt: string;
+  fromMemberId: string;
+  id: string;
+  text: string;
+  timer: null | ReturnType<typeof setTimeout>;
+  toMemberId: string;
+}
+
+/** A control message sent from a SoS client to the coordinator over /ws/super-session/:id. */
+export type SosClientMessage =
+  | {
+      capability?: string;
+      provider: SessionSource;
+      sessionKey: string;
+      terminalId?: string;
+      type: 'member-add';
+    }
+  | { memberId: string; type: 'member-remove' }
+  | { relayId: string; type: 'relay-approve' }
+  | { relayId: string; type: 'relay-deny' }
+  | { text: string; toMemberId: string; type: 'relay-forward' };
+
+/**
+ * Injects relay text into a Shooter-owned terminal's stdin. Supplied by
+ * server.ts (which owns PtyManager) so the coordinator stays free of PTY deps.
+ * Performs the ownership check (terminal exists + running) and returns the
+ * outcome.
+ */
+export type SosInjector = (terminalId: string, text: string) => { error?: string; ok: boolean };
+
+/** A WS listener registered against a super-session. */
+export type SosListener = (msg: SosServerMessage) => void;
+
+export interface SosMember {
+  /** Free-text capability tag, e.g. 'frontend' | 'backend' | '' (unused in MVP routing). */
+  capability: string;
+  /** Random hex id, primary key in sos_sessions. */
+  id: string;
+  provider: SessionSource;
+  registeredAt: string;
+  /** Watcher key: file path for file-backed providers, session id for OpenCode. */
+  sessionKey: string;
+  status: SosMemberStatus;
+  /** PtyManager terminal id when launched via Shooter; null for externally-observed sessions. */
+  terminalId: null | string;
+}
+
+// ── WebSocket protocol (/ws/super-session/:id) ──────────────────────────
+
+/** Lifecycle status of a SoS member's underlying agent session. */
+export type SosMemberStatus = 'Compacting' | 'Finished' | 'Idle' | 'Waiting' | 'Working';
+
+/**
+ * A static routing rule (Phase 2). The coordinator evaluates these in ascending
+ * `priority` against each new member message; the first match decides the
+ * action. `fromMemberId` may be 'ANY'; an empty `matchPattern` matches all text.
+ */
+export interface SosRoutingRule {
+  action: 'block' | 'escalate' | 'relay';
+  fromMemberId: string;
+  id: string;
+  matchPattern: string;
+  priority: number;
+  toMemberId: string;
+}
+
+/** A message broadcast from the coordinator to subscribed SoS clients. */
+export type SosServerMessage =
+  | {
+      decision: 'approved' | 'denied' | 'expired';
+      relayId: string;
+      type: 'sos-relay-resolved';
+    }
+  | { entries: SosTranscriptEntry[]; type: 'sos-history' }
+  | { entry: SosTranscriptEntry; type: 'sos-message' }
+  | {
+      expiresAt: string;
+      fromMemberId: string;
+      preview: string;
+      relayId: string;
+      toMemberId: string;
+      type: 'sos-relay-pending';
+    }
+  | { member: SosMember; type: 'sos-member-added' }
+  | { memberId: string; status: SosMemberStatus; type: 'sos-member-status' }
+  | { memberId: string; type: 'sos-member-removed' }
+  | { message: string; type: 'sos-error' };
+
+/** One message in the merged transcript, tagged with its origin member. */
+export interface SosTranscriptEntry {
+  memberId: string;
+  message: ConversationMessage;
+  provider: SessionSource;
+  /** True when the coordinator injected this message (loop-guard marker). */
+  relayed: boolean;
+}
+
+/** A super-session: N merged agent sessions coordinated as one. */
+export interface SuperSession {
+  createdAt: string;
+  id: string;
+  label: string;
+  members: SosMember[];
+  routingRules: SosRoutingRule[];
+  status: 'active' | 'archived' | 'paused';
+  /** Source-tagged merged transcript; in-memory ring buffer (capped). */
+  transcript: SosTranscriptEntry[];
+}
+
+/** Coordinator-internal runtime state for one live super-session. */
+export interface SuperSessionRuntime {
+  /** `${fromMemberId}:${toMemberId}` -> last auto-relay epoch ms (cooldown guard). */
+  cooldowns: Map<string, number>;
+  listeners: Set<SosListener>;
+  /** Escalated relays awaiting human decision, keyed by relayId. */
+  pending: Map<string, PendingRelay>;
+  session: SuperSession;
+  unsubscribes: Map<string, () => void>;
+}

package/src/routes/+layout.svelte

@@ -10,6 +10,7 @@
   import DashboardSvg from '$lib/assets/icons/dashboard.svg?raw';
   import SettingsSvg from '$lib/assets/icons/settings.svg?raw';
   import TerminalSvg from '$lib/assets/icons/terminal.svg?raw';
+  import ToolSvg from '$lib/assets/icons/tool.svg?raw';
   import { Button, Icon, Pill } from '@juspay/svelte-ui-components';
   import { onMount, type Snippet } from 'svelte';
 
@@ -133,6 +134,10 @@
         <Icon svg={TerminalSvg} classes="icon-26" />
         <span>Terminals</span>
       </a>
+      <a href="/sos" class="tab-item" class:active={$page.url.pathname.startsWith('/sos')}>
+        <Icon svg={ToolSvg} classes="icon-26" />
+        <span>SoS</span>
+      </a>
     </div>
   </nav>
 </div>
@@ -191,6 +196,7 @@
   }
   .tab-item {
     display: flex;
+    flex: 1;
     flex-direction: column;
     align-items: center;
     justify-content: center;
@@ -199,7 +205,7 @@
     font-size: 11px;
     font-weight: 500;
     text-decoration: none;
-    padding: 6px 36px;
+    padding: 6px 8px;
     border-radius: var(--radius-md);
     transition: color var(--transition-fast);
     user-select: none;
@@ -226,7 +232,8 @@
       height: 60px;
     }
     .tab-item {
-      padding: 6px 28px;
+      padding: 6px 8px;
+      min-width: 0;
       font-size: 10px;
       gap: 3px;
       min-height: 44px;

package/src/routes/api/sessions/connect/+server.ts

@@ -36,8 +36,9 @@ export const POST: RequestHandler = async ({ request }) => {
   }
 
   // sessionId becomes a process argument (e.g. `codex resume <id>`); restrict it
-  // to safe identifier characters to prevent argument/path injection.
-  if (!/^[A-Za-z0-9_-]+$/.test(sessionId)) {
+  // to safe identifier chars — dots included, since cursor/copilot/amp IDs use
+  // them — but no path separators, which prevents argument/path injection.
+  if (!/^[A-Za-z0-9_.-]+$/.test(sessionId)) {
     return json({ error: 'Invalid sessionId format' }, { status: 400 });
   }
 
@@ -76,9 +77,12 @@ export const POST: RequestHandler = async ({ request }) => {
   const existing = ptyManager.list().find(
     (t) =>
       t.status === 'running' &&
-      // Claude: <id>.jsonl ; Codex rollout: rollout-<ts>-<id>.jsonl ; OpenCode: session id
+      // Claude / Cursor / Qwen: <id>.jsonl ; Codex rollout: rollout-<ts>-<id>.jsonl ;
+      // Copilot: <id>.jsonl OR <id>/events.jsonl ; Amp: T-<id>.json ; OpenCode: session id
       (t.sessionFile?.endsWith(`/${sessionId}.jsonl`) ||
         t.sessionFile?.endsWith(`-${sessionId}.jsonl`) ||
+        t.sessionFile?.endsWith(`/${sessionId}/events.jsonl`) ||
+        t.sessionFile?.endsWith(`/T-${sessionId}.json`) ||
         t.openCodeSessionId === sessionId)
   );
 

package/src/routes/api/sos/+server.ts

@@ -0,0 +1,36 @@
+import { validateAuth } from '$lib/modules/server/auth';
+import { sosCoordinator } from '$lib/modules/server/sos/coordinator';
+import { json } from '@sveltejs/kit';
+
+import type { RequestHandler } from './$types';
+
+/** GET /api/sos — list all super-sessions. */
+export const GET: RequestHandler = ({ request }) => {
+  const authError = validateAuth(request);
+  if (authError) {
+    return authError;
+  }
+  return json({ superSessions: sosCoordinator.listSuperSessions() });
+};
+
+/** POST /api/sos — create a new super-session. */
+export const POST: RequestHandler = async ({ request }) => {
+  const authError = validateAuth(request);
+  if (authError) {
+    return authError;
+  }
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return json({ error: 'Invalid JSON in request body' }, { status: 400 });
+  }
+  if (typeof body !== 'object' || body === null) {
+    return json({ error: 'Invalid JSON in request body' }, { status: 400 });
+  }
+  const payload = body as { label?: unknown };
+  const label =
+    typeof payload.label === 'string' && payload.label.trim() ? payload.label.trim() : 'Untitled';
+  const session = sosCoordinator.createSuperSession(label);
+  return json(session, { status: 201 });
+};

package/src/routes/api/sos/[id]/+server.ts

@@ -0,0 +1,55 @@
+import { validateAuth } from '$lib/modules/server/auth';
+import { sosCoordinator } from '$lib/modules/server/sos/coordinator';
+import { json } from '@sveltejs/kit';
+
+import type { RequestHandler } from './$types';
+
+/** GET /api/sos/[id] — fetch one super-session (incl. members + transcript). */
+export const GET: RequestHandler = ({ params, request }) => {
+  const authError = validateAuth(request);
+  if (authError) {
+    return authError;
+  }
+  const session = sosCoordinator.getSuperSession(params.id ?? '');
+  if (!session) {
+    return json({ error: 'Super-session not found' }, { status: 404 });
+  }
+  return json(session);
+};
+
+/** PATCH /api/sos/[id] — update lifecycle status (active | paused | archived). */
+export const PATCH: RequestHandler = async ({ params, request }) => {
+  const authError = validateAuth(request);
+  if (authError) {
+    return authError;
+  }
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return json({ error: 'Invalid JSON in request body' }, { status: 400 });
+  }
+  if (typeof body !== 'object' || body === null) {
+    return json({ error: 'Invalid JSON in request body' }, { status: 400 });
+  }
+  const payload = body as { status?: unknown };
+  if (payload.status !== 'active' && payload.status !== 'paused' && payload.status !== 'archived') {
+    return json({ error: 'status must be active | paused | archived' }, { status: 400 });
+  }
+  if (!sosCoordinator.setStatus(params.id ?? '', payload.status)) {
+    return json({ error: 'Super-session not found' }, { status: 404 });
+  }
+  return json({ id: params.id, status: payload.status });
+};
+
+/** DELETE /api/sos/[id] — tear down a super-session (unsubscribes all members). */
+export const DELETE: RequestHandler = ({ params, request }) => {
+  const authError = validateAuth(request);
+  if (authError) {
+    return authError;
+  }
+  if (!sosCoordinator.deleteSuperSession(params.id ?? '')) {
+    return json({ error: 'Super-session not found' }, { status: 404 });
+  }
+  return json({ deleted: true });
+};

package/src/routes/api/sos/[id]/inject/+server.ts

@@ -0,0 +1,44 @@
+import { validateAuth } from '$lib/modules/server/auth';
+import { sosCoordinator } from '$lib/modules/server/sos/coordinator';
+import { json } from '@sveltejs/kit';
+
+import type { RequestHandler } from './$types';
+
+const MAX_RELAY_TEXT = 10240; // 10 KB, same cap as /ws/session send-input
+
+/**
+ * POST /api/sos/[id]/inject — human-initiated relay: inject text into a member's
+ * Shooter-owned terminal and record it in the merged transcript.
+ */
+export const POST: RequestHandler = async ({ params, request }) => {
+  const authError = validateAuth(request);
+  if (authError) {
+    return authError;
+  }
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return json({ error: 'Invalid JSON in request body' }, { status: 400 });
+  }
+  if (typeof body !== 'object' || body === null) {
+    return json({ error: 'Invalid JSON in request body' }, { status: 400 });
+  }
+  const payload = body as { text?: unknown; toMemberId?: unknown };
+  if (typeof payload.toMemberId !== 'string' || payload.toMemberId.length === 0) {
+    return json({ error: 'toMemberId is required (string)' }, { status: 400 });
+  }
+  if (typeof payload.text !== 'string' || payload.text.length === 0) {
+    return json({ error: 'text is required (string)' }, { status: 400 });
+  }
+  if (Buffer.byteLength(payload.text, 'utf8') > MAX_RELAY_TEXT) {
+    return json({ error: `text exceeds ${MAX_RELAY_TEXT} bytes` }, { status: 413 });
+  }
+
+  const error = sosCoordinator.relayForward(params.id ?? '', payload.toMemberId, payload.text);
+  if (error) {
+    const status = error.includes('not found') ? 404 : 400;
+    return json({ error }, { status });
+  }
+  return json({ ok: true });
+};

package/src/routes/api/sos/[id]/members/+server.ts

@@ -0,0 +1,47 @@
+import { validateAuth } from '$lib/modules/server/auth';
+import { sosCoordinator } from '$lib/modules/server/sos/coordinator';
+import { isValidProvider, isValidSessionKey } from '$lib/modules/server/ws/super-session-handler';
+import { json } from '@sveltejs/kit';
+
+import type { RequestHandler } from './$types';
+
+/** POST /api/sos/[id]/members — add a member session to a super-session. */
+export const POST: RequestHandler = async ({ params, request }) => {
+  const authError = validateAuth(request);
+  if (authError) {
+    return authError;
+  }
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return json({ error: 'Invalid JSON in request body' }, { status: 400 });
+  }
+  if (typeof body !== 'object' || body === null) {
+    return json({ error: 'Invalid JSON in request body' }, { status: 400 });
+  }
+  const payload = body as {
+    capability?: unknown;
+    provider?: unknown;
+    sessionKey?: unknown;
+    terminalId?: unknown;
+  };
+
+  if (typeof payload.sessionKey !== 'string' || !isValidSessionKey(payload.sessionKey)) {
+    return json({ error: 'sessionKey must be a session id or a path under home' }, { status: 400 });
+  }
+  if (typeof payload.provider !== 'string' || !isValidProvider(payload.provider)) {
+    return json({ error: 'provider must be a known session source' }, { status: 400 });
+  }
+
+  const member = sosCoordinator.addMember(params.id ?? '', {
+    capability: typeof payload.capability === 'string' ? payload.capability : undefined,
+    provider: payload.provider,
+    sessionKey: payload.sessionKey,
+    terminalId: typeof payload.terminalId === 'string' ? payload.terminalId : null,
+  });
+  if (!member) {
+    return json({ error: 'Super-session not found' }, { status: 404 });
+  }
+  return json(member, { status: 201 });
+};

package/src/routes/api/sos/[id]/members/[mid]/+server.ts

@@ -0,0 +1,17 @@
+import { validateAuth } from '$lib/modules/server/auth';
+import { sosCoordinator } from '$lib/modules/server/sos/coordinator';
+import { json } from '@sveltejs/kit';
+
+import type { RequestHandler } from './$types';
+
+/** DELETE /api/sos/[id]/members/[mid] — remove a member (unsubscribes its watcher). */
+export const DELETE: RequestHandler = ({ params, request }) => {
+  const authError = validateAuth(request);
+  if (authError) {
+    return authError;
+  }
+  if (!sosCoordinator.removeMember(params.id ?? '', params.mid ?? '')) {
+    return json({ error: 'Super-session or member not found' }, { status: 404 });
+  }
+  return json({ removed: true });
+};

package/src/routes/api/sos/[id]/rules/+server.ts

@@ -0,0 +1,85 @@
+import type { SosRoutingRule } from '$lib/types';
+
+import { validateAuth } from '$lib/modules/server/auth';
+import { sosCoordinator } from '$lib/modules/server/sos/coordinator';
+import { json } from '@sveltejs/kit';
+import { randomBytes } from 'crypto';
+
+import type { RequestHandler } from './$types';
+
+const ACTIONS = new Set(['block', 'escalate', 'relay']);
+
+/** GET /api/sos/[id]/rules — current routing rules. */
+export const GET: RequestHandler = ({ params, request }) => {
+  const authError = validateAuth(request);
+  if (authError) {
+    return authError;
+  }
+  const rules = sosCoordinator.getRoutingRules(params.id ?? '');
+  if (rules === null) {
+    return json({ error: 'Super-session not found' }, { status: 404 });
+  }
+  return json({ routingRules: rules });
+};
+
+/** PATCH /api/sos/[id]/rules — replace the routing rules. */
+export const PATCH: RequestHandler = async ({ params, request }) => {
+  const authError = validateAuth(request);
+  if (authError) {
+    return authError;
+  }
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return json({ error: 'Invalid JSON in request body' }, { status: 400 });
+  }
+  if (typeof body !== 'object' || body === null) {
+    return json({ error: 'Invalid JSON in request body' }, { status: 400 });
+  }
+  const payload = body as { routingRules?: unknown };
+  if (!Array.isArray(payload.routingRules)) {
+    return json({ error: 'routingRules must be an array' }, { status: 400 });
+  }
+
+  const rules: SosRoutingRule[] = [];
+  for (const raw of payload.routingRules) {
+    const rule = normalizeRule(raw);
+    if (!rule) {
+      return json(
+        { error: 'Each rule needs fromMemberId, toMemberId, and action' },
+        { status: 400 }
+      );
+    }
+    rules.push(rule);
+  }
+
+  const error = sosCoordinator.setRoutingRules(params.id ?? '', rules);
+  if (error) {
+    return json({ error }, { status: error.includes('not found') ? 404 : 400 });
+  }
+  return json({ routingRules: rules });
+};
+
+function normalizeRule(raw: unknown): null | SosRoutingRule {
+  if (typeof raw !== 'object' || raw === null) {
+    return null;
+  }
+  const r = raw as Record<string, unknown>;
+  if (
+    typeof r.fromMemberId !== 'string' ||
+    typeof r.toMemberId !== 'string' ||
+    typeof r.action !== 'string' ||
+    !ACTIONS.has(r.action)
+  ) {
+    return null;
+  }
+  return {
+    action: r.action as SosRoutingRule['action'],
+    fromMemberId: r.fromMemberId,
+    id: typeof r.id === 'string' && r.id ? r.id : randomBytes(6).toString('hex'),
+    matchPattern: typeof r.matchPattern === 'string' ? r.matchPattern : '',
+    priority: typeof r.priority === 'number' ? r.priority : 100,
+    toMemberId: r.toMemberId,
+  };
+}

package/src/routes/sos/+page.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+  import type { ShooterConfig, SuperSession } from '$lib/types';
+
+  import { goto } from '$app/navigation';
+  import { Banner, Button, EmptyState, Input, Pill } from '@juspay/svelte-ui-components';
+  import { onMount } from 'svelte';
+
+  let sessions = $state<SuperSession[]>([]);
+  let loading = $state(true);
+  let error = $state('');
+  let newLabel = $state('');
+  let creating = $state(false);
+
+  function getConfig(): null | ShooterConfig {
+    try {
+      const saved = localStorage.getItem('shooter_config');
+      return saved ? (JSON.parse(saved) as ShooterConfig) : null;
+    } catch {
+      return null;
+    }
+  }
+
+  async function loadSessions(): Promise<void> {
+    const config = getConfig();
+    if (!config) {
+      error = 'No configuration found. Open Settings first.';
+      loading = false;
+      return;
+    }
+    try {
+      const res = await fetch('/api/sos', {
+        headers: { Authorization: `Bearer ${config.apiKey}` },
+      });
+      if (!res.ok) {
+        error = `Failed to load (${res.status})`;
+        return;
+      }
+      const data = (await res.json()) as { superSessions: SuperSession[] };
+      sessions = data.superSessions ?? [];
+    } catch {
+      error = 'Network error — is the server running?';
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function create(): Promise<void> {
+    const config = getConfig();
+    if (!config || !newLabel.trim()) {
+      return;
+    }
+    creating = true;
+    try {
+      const res = await fetch('/api/sos', {
+        body: JSON.stringify({ label: newLabel.trim() }),
+        headers: { Authorization: `Bearer ${config.apiKey}`, 'Content-Type': 'application/json' },
+        method: 'POST',
+      });
+      if (res.ok) {
+        const created = (await res.json()) as SuperSession;
+        void goto(`/sos/${created.id}`);
+      } else {
+        const d = (await res.json().catch(() => ({}))) as { error?: string };
+        error = d.error ?? `Failed to create (${res.status})`;
+      }
+    } catch {
+      error = 'Network error — could not create super-session';
+    } finally {
+      creating = false;
+    }
+  }
+
+  onMount(() => {
+    void loadSessions();
+  });
+</script>
+
+<svelte:head><title>Session Over Sessions - Shooter</title></svelte:head>
+
+<main class="main sos-list">
+  <div class="page-head">
+    <div>
+      <h1>Session Over Sessions</h1>
+      <p class="subtitle">Coordinate multiple running agents as one super-session.</p>
+    </div>
+  </div>
+
+  <div class="create-row">
+    <Input
+      bind:value={newLabel}
+      dataType="text"
+      placeholder="New super-session label…"
+      classes="sos-create-input"
+    />
+    <Button
+      text={creating ? 'Creating…' : 'Create'}
+      disabled={creating || !newLabel.trim()}
+      onclick={create}
+      classes="btn-create"
+    />
+  </div>
+
+  {#if error}
+    <Banner text={error} classes="banner-error" />
+  {/if}
+
+  {#if loading}
+    <p class="muted">Loading…</p>
+  {:else if sessions.length === 0}
+    <EmptyState
+      title="No super-sessions yet"
+      description="Create one above, then add running agent sessions as members."
+    />
+  {:else}
+    <div class="ss-grid">
+      {#each sessions as ss (ss.id)}
+        <a class="ss-card" href={`/sos/${ss.id}`}>
+          <div class="ss-card-head">
+            <span class="ss-label">{ss.label}</span>
+            <Pill text={ss.status} classes="pill-status-unknown" />
+          </div>
+          <div class="ss-meta">
+            <span>{ss.members.length} member{ss.members.length === 1 ? '' : 's'}</span>
+            <span>{ss.routingRules.length} rule{ss.routingRules.length === 1 ? '' : 's'}</span>
+          </div>
+        </a>
+      {/each}
+    </div>
+  {/if}
+</main>
+
+<style>
+  .sos-list {
+    max-width: 720px;
+    margin: 0 auto;
+    padding: var(--space-5) var(--space-4);
+  }
+  .page-head h1 {
+    font-size: var(--text-2xl);
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0;
+  }
+  .subtitle {
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    margin: var(--space-1) 0 var(--space-4);
+  }
+  .create-row {
+    display: flex;
+    gap: var(--space-2);
+    align-items: center;
+    margin-bottom: var(--space-4);
+  }
+  :global(.sos-create-input) {
+    flex: 1;
+    --input-container-margin: 0;
+  }
+  .muted {
+    color: var(--text-tertiary);
+  }
+  .ss-grid {
+    display: grid;
+    gap: var(--space-3);
+  }
+  .ss-card {
+    display: block;
+    padding: var(--space-4);
+    background: var(--component-bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    text-decoration: none;
+    transition: border-color var(--transition-fast);
+  }
+  .ss-card:hover {
+    border-color: var(--border-hover);
+  }
+  .ss-card-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+  }
+  .ss-label {
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+  .ss-meta {
+    display: flex;
+    gap: var(--space-3);
+    color: var(--text-tertiary);
+    font-size: var(--text-xs);
+    margin-top: var(--space-2);
+  }
+</style>