React Deep Agents Filesystem preview

// eslint-disable-next-line @nx/enforce-module-boundaries -- The isolated consumer copies this internal example layout.
import { ExampleFooter, ExampleLayout } from '../../../../shared/react-example';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useAgent } from '@threadplane/react';
import {
  ChatInput,
  MessageList,
  Reasoning,
  ToolObservation,
} from '@threadplane/react/chat';
import { Markdown } from '@threadplane/react/markdown';
import type { MessageRow } from '@threadplane/content/messages';
import {
  createConnectedApplication,
  type FilesystemConnection,
} from './connection';
import type { FilesystemApplicationSnapshot } from './application';
import { WorkspacePanel } from './workspace-panel';
import { ApprovalPanel } from './approval-panel';
const literal = (value: unknown) =>
  typeof value === 'string' ? value : JSON.stringify(value, null, 2);
export function renderMessage(
  row: MessageRow,
  snapshot: FilesystemApplicationSnapshot
) {
  const label =
    row.role === 'user'
      ? 'You'
      : row.role === 'assistant'
      ? 'Assistant'
      : row.role === 'tool'
      ? 'Tool result'
      : 'System';
  return (
    <article
      aria-label={label}
      className={`tp-chat-message tp-chat-message--${row.role}`}
    >
      <p className="tp-chat-message__role">{label}</p>
      {row.role === 'assistant' && row.reasoning && (
        <Reasoning snapshot={row.reasoning} />
      )}
      {row.role === 'tool' ? (
        <details>
          <summary>Tool result received</summary>
          <pre>{row.message.content}</pre>
        </details>
      ) : (
        <Markdown snapshot={row.markdown} />
      )}
      {snapshot.toolCalls
        .filter((call) => row.message.toolCallIds?.includes(call.id))
        .map((call) => (
          <details key={call.id} className="tool-inspection">
            <summary>
              {call.name} ·{' '}
              {call.status === 'complete' ? 'result received' : call.status}
            </summary>
            <ToolObservation
              name={call.name}
              argumentsText={literal(call.args) ?? ''}
              resultText={
                call.status === 'complete'
                  ? literal(call.result)
                  : call.status === 'error'
                  ? call.error
                  : undefined
              }
              label={
                call.status === 'complete'
                  ? 'Tool result received; workspace confirmation is shown separately.'
                  : `Observed tool: ${call.status}`
              }
            />
          </details>
        ))}
    </article>
  );
}
export function connectionFingerprint(connection: FilesystemConnection) {
  return JSON.stringify([
    connection.apiUrl,
    Object.entries(connection.headers).sort(([a], [b]) => a.localeCompare(b)),
  ]);
}
type Props = {
  readonly connection: FilesystemConnection;
  readonly onReady: () => void;
};
export function FilesystemDemo(props: Props) {
  const fingerprint = connectionFingerprint(props.connection),
    identity = useRef({ fingerprint, version: 0 });
  if (identity.current.fingerprint !== fingerprint)
    identity.current = { fingerprint, version: identity.current.version + 1 };
  return <FilesystemOwner key={identity.current.version} {...props} />;
}
function FilesystemOwner({ connection, onReady }: Props) {
  const [application] = useState(() => createConnectedApplication(connection)),
    [draft, setDraft] = useState(''),
    snapshot = useAgent(application);
  useEffect(() => {
    onReady();
  }, [onReady]);
  useEffect(
    () => () => {
      void application.dispose();
    },
    [application]
  );
  const renderRow = useCallback(
    (row: MessageRow) => renderMessage(row, snapshot),
    [snapshot]
  );
  const currentView = () =>
    application.getSnapshot().viewGeneration === snapshot.viewGeneration;
  const status = snapshot.busy
    ? snapshot.phase === 'confirming'
      ? 'Confirming saved workspace…'
      : 'Receiving response…'
    : snapshot.phase === 'paused'
    ? 'Awaiting approval.'
    : snapshot.phase === 'saved'
    ? 'Response saved.'
    : snapshot.phase === 'stopped'
    ? 'Response stopped.'
    : snapshot.phase === 'unconfirmed'
    ? 'Workspace update unconfirmed.'
    : snapshot.phase === 'failed'
    ? 'Response failed.'
    : 'Ready.';
  return (
    <ExampleLayout className="filesystem-demo">
      <header>
        <div>
          <h1>A workspace for the flight ahead.</h1>
        </div>
        <button
          type="button"
          onClick={() => {
            if (currentView()) {
              setDraft('');
              void application.newConversation();
            }
          }}
        >
          New conversation
        </button>
      </header>
      <p className="introduction">
        Build a runway note using fixed aviation lookup data. Read actual files
        and review proposed report changes before they run.
      </p>
      <div className="filesystem-layout">
        <section className="conversation-panel" aria-label="Chat">
          <div className="seed-prompts" aria-label="Example prompts">
            {[
              {
                label: 'Runway note for KASE',
                text: 'Work up a runway suitability note for KASE. Save your raw lookups to /notes/kase-data.md, then write the finished note to /reports/kase-runway.md.',
              },
            ].map((prompt) => (
              <button
                key={prompt.label}
                type="button"
                disabled={snapshot.busy || !snapshot.canSubmit}
                onClick={() => {
                  const current = application.getSnapshot();
                  if (currentView() && !current.busy && current.canSubmit)
                    setDraft(prompt.text);
                }}
              >
                {prompt.label}
              </button>
            ))}
          </div>
          {!snapshot.rows.length && (
            <div className="conversation-empty">
              <span aria-hidden="true">↗</span>
              <h2>Start with what you want to do.</h2>
              <p>
                A message creates your conversation. Suggestions just fill the
                draft.
              </p>
            </div>
          )}
          <MessageList
            key={`messages:${snapshot.viewGeneration}`}
            rows={snapshot.rows}
            renderMessage={renderRow}
            label="Conversation"
          />
          <ExampleFooter>
            {snapshot.error && (
              <p role="alert" className="request-error">
                {snapshot.error}
              </p>
            )}
            <ChatInput
              key={`composer:${snapshot.viewGeneration}`}
              label="Message"
              value={draft}
              onValueChange={(text) => {
                if (currentView()) setDraft(text);
              }}
              placeholder="Ask for a runway note…"
              hint="Enter to send. Shift+Enter adds a new line."
              busy={snapshot.busy}
              disabled={snapshot.busy || !snapshot.canSubmit}
              onStop={
                snapshot.busy
                  ? () => {
                      if (currentView()) void application.stop();
                    }
                  : undefined
              }
              onSubmit={(text) => {
                const current = application.getSnapshot();
                if (
                  !currentView() ||
                  current.busy ||
                  !current.canSubmit ||
                  !text.trim()
                )
                  return false;
                void application.submit(text);
                return currentView() && application.getSnapshot().busy;
              }}
            />
            <p role="status" className="response-status">
              {status}
            </p>
          </ExampleFooter>
        </section>
        <div className="workspace-column">
          <WorkspacePanel
            key={`workspace:${snapshot.viewGeneration}`}
            observed={snapshot.observedWorkspace}
            saved={snapshot.savedWorkspace}
            phase={snapshot.phase}
            notice={snapshot.notice}
          />
          <ApprovalPanel
            approval={snapshot.approval}
            workspace={snapshot.savedWorkspace}
            busy={snapshot.busy}
            onDecision={(choice) => {
              const current = application.getSnapshot();
              if (
                currentView() &&
                !current.busy &&
                current.phase === 'paused' &&
                current.approval === snapshot.approval
              )
                void application.decide(choice, snapshot.decisionToken);
            }}
          />
        </div>
      </div>
    </ExampleLayout>
  );
}

import { Client } from '@langchain/langgraph-sdk';
import { createSession } from '@threadplane/langgraph';
// eslint-disable-next-line @nx/enforce-module-boundaries -- Internal bridge is copied by the isolated build.
import type { RuntimeBridgeConfiguration } from '../../../../../libs/cockpit-runtime-bridge/src/index';
import {
  createFilesystemApplication,
  type FilesystemClient,
  type FilesystemSession,
} from './application';
import { copyJson } from './workspace-state';
import { checkpointSource, type Checkpoint } from './authority';
export interface FilesystemConnection {
  readonly apiUrl: string;
  readonly headers: Record<string, string>;
}
export function filesystemConnection(
  configuration: RuntimeBridgeConfiguration
): FilesystemConnection {
  if (
    configuration.status === 'error' ||
    (configuration.status === 'configured' &&
      configuration.target.kind === 'ag-ui')
  )
    throw Error('Runtime configuration failed.');
  const target =
    configuration.status === 'configured' &&
    configuration.target.kind === 'langsmith'
      ? configuration.target
      : null;
  return {
    apiUrl: target?.apiUrl ?? new URL('/api', window.location.origin).href,
    headers: target ? { 'x-api-key': target.apiKey } : {},
  };
}
export function createFilesystemClient(
  input: FilesystemConnection
): FilesystemClient {
  const connection = Object.freeze({
      apiUrl: input.apiUrl,
      headers: Object.freeze({ ...input.headers }),
    }),
    known = new Set<string>();
  const client = new Client({
    apiUrl: connection.apiUrl,
    apiKey: null,
    defaultHeaders: connection.headers,
    callerOptions: { maxRetries: 0 },
  });
  function owned(threadId: string, signal: AbortSignal) {
    if (!known.has(threadId) || signal.aborted)
      throw Error('Conversation is unavailable.');
  }
  return {
    async createThread(signal) {
      try {
        if (signal.aborted) throw Error('Aborted');
        const id = crypto.randomUUID(),
          created = await client.threads.create({
            threadId: id,
            ifExists: 'raise',
            signal,
          });
        if (signal.aborted || created.thread_id !== id)
          throw Error('Unconfirmed');
        known.add(id);
        return id;
      } catch {
        throw Error('Conversation creation was not confirmed.');
      }
    },
    sessionFactory(threadId) {
      if (!known.has(threadId)) throw Error('Unknown conversation.');
      let session: ReturnType<typeof createSession> | undefined;
      try {
        session = createSession({
          assistantId: 'da-filesystem',
          threadId,
          apiUrl: connection.apiUrl,
          clientOptions: { maxRetries: 0, defaultHeaders: connection.headers },
        });
        const state = session.getSnapshot();
        if (
          !state ||
          !Array.isArray(state.messages) ||
          !Array.isArray(state.toolCalls) ||
          !Array.isArray(state.interrupts) ||
          !Array.isArray(state.subgraphs) ||
          state.messages.length !== 0 ||
          state.toolCalls.length !== 0 ||
          state.interrupts.length !== 0 ||
          state.subgraphs.length !== 0 ||
          (state.history !== undefined &&
            (!Array.isArray(state.history) || state.history.length !== 0)) ||
          ![
            'getSnapshot',
            'subscribe',
            'submit',
            'resume',
            'load',
            'stop',
            'dispose',
          ].every(
            (method) =>
              typeof session?.[method as keyof typeof session] === 'function'
          )
        )
          throw Error('Rejected session');
        return session as FilesystemSession;
      } catch {
        try {
          void Promise.resolve(session?.dispose()).catch(() => undefined);
        } catch {
          /* Rejected session is never installed. */
        }
        throw Error('Runtime session is unavailable.');
      }
    },
    async readCurrent(threadId, signal) {
      owned(threadId, signal);
      const result = await client.threads.getState(threadId, undefined, {
        signal,
      });
      owned(threadId, signal);
      return result;
    },
    async readCheckpoint(requested, signal) {
      const captured = copyJson(requested) as Checkpoint,
        source = checkpointSource(captured, captured.thread_id);
      if (!source) throw Error('Checkpoint is unavailable.');
      owned(source.thread_id, signal);
      const result = await client.threads.getState(
        source.thread_id,
        source as Parameters<typeof client.threads.getState>[1],
        { signal }
      );
      owned(source.thread_id, signal);
      return result;
    },
  };
}
export function createConnectedApplication(connection: FilesystemConnection) {
  return createFilesystemApplication(createFilesystemClient(connection));
}

export const MAX_TEXT = 65536;
export const MAX_TOTAL_TEXT = 1048576;
export type PlainValue =
  | null
  | string
  | boolean
  | number
  | readonly PlainValue[]
  | { readonly [key: string]: PlainValue };
export function plainRecord(value: unknown): value is Record<string, unknown> {
  return (
    value !== null &&
    typeof value === 'object' &&
    Object.getPrototypeOf(value) === Object.prototype
  );
}
export function ownValue(object: object, key: string): unknown {
  const descriptor = Object.getOwnPropertyDescriptor(object, key);
  if (!descriptor) return undefined;
  if (!('value' in descriptor) || (key !== 'length' && !descriptor.enumerable))
    throw new Error('Non-data property');
  return descriptor.value;
}
/** Inspect descriptors before reading. Never evaluate getters or drop keys. */
export function inspectJson(
  input: unknown,
  optionalUndefined = false,
  filesystemValues: readonly (readonly string[])[] = []
): void {
  const parents = new Set<object>();
  let nodes = 0,
    fileLines = 0;
  // Only explicitly authorized values.files[path].content arrays receive this
  // separate descriptor traversal budget. Generic JSON evidence stays at 100k
  // nodes. A supported file has at most MAX_TEXT + 1 legacy lines; one extra
  // line is inspectable as a visibly unavailable oversized record.
  const maxRawLines = MAX_TEXT + 2;
  const maxFileLines = filesystemValues.length * 100 * maxRawLines;
  function visit(value: unknown, depth: number, path: readonly string[]): void {
    if (++nodes > 100000 || depth > 100)
      throw new Error('JSON bounds exceeded');
    if (
      value === null ||
      typeof value === 'string' ||
      typeof value === 'boolean' ||
      (typeof value === 'number' && Number.isFinite(value))
    )
      return;
    const array = Array.isArray(value);
    if (!array && !plainRecord(value)) throw new Error('Unsupported JSON');
    const object = value as object;
    if (
      parents.has(object) ||
      (array && Object.getPrototypeOf(value) !== Array.prototype)
    )
      throw new Error('Unsupported JSON');
    parents.add(object);
    const keys = Reflect.ownKeys(object).filter(
      (k) => !(array && k === 'length')
    );
    const length = array ? (ownValue(object, 'length') as number) : 0;
    if (array && keys.length !== length) throw new Error('Sparse array');
    const fileContent =
      array &&
      filesystemValues.some(
        (root) =>
          path.length === root.length + 3 &&
          root.every((part, i) => path[i] === part) &&
          path[root.length] === 'files' &&
          canonicalPath(path[root.length + 1]) &&
          path[root.length + 2] === 'content'
      );
    if (fileContent && length > maxRawLines)
      throw new Error('Raw legacy file line bounds exceeded');
    for (const key of keys) {
      const d = Object.getOwnPropertyDescriptor(object, key);
      if (
        typeof key !== 'string' ||
        !d ||
        !('value' in d) ||
        !d.enumerable ||
        (array && (!/^(0|[1-9]\d*)$/.test(key) || Number(key) >= length))
      )
        throw new Error('Non-JSON property');
      if (!array && optionalUndefined && d.value === undefined) continue;
      if (fileContent && typeof d.value === 'string') {
        if (++fileLines > maxFileLines)
          throw new Error('Raw legacy workspace line bounds exceeded');
      } else visit(d.value, depth + 1, [...path, key]);
    }
    parents.delete(object);
  }
  visit(input, 0, []);
}
export function copyJson(
  input: unknown,
  optionalUndefined = false,
  maxText = 8388608
): unknown {
  const parents = new Set<object>();
  let nodes = 0,
    text = 0;
  function copy(value: unknown, depth: number): unknown {
    if (++nodes > 100000 || depth > 100)
      throw new Error('JSON bounds exceeded');
    if (typeof value === 'string') {
      text += value.length;
      if (text > maxText) throw new Error('Evidence text bounds exceeded');
      return value;
    }
    if (
      value === null ||
      typeof value === 'boolean' ||
      (typeof value === 'number' && Number.isFinite(value))
    )
      return value;
    const array = Array.isArray(value);
    if (
      (!array && !plainRecord(value)) ||
      (array && Object.getPrototypeOf(value) !== Array.prototype) ||
      parents.has(value as object)
    )
      throw new Error('Unsupported JSON');
    const object = value as object;
    parents.add(object);
    const descriptors = Object.getOwnPropertyDescriptors(object);
    const keys = Reflect.ownKeys(descriptors).filter(
      (k) => !(array && k === 'length')
    );
    const length = array ? descriptors.length?.value : 0;
    if (
      array &&
      (!Number.isInteger(length) || length < 0 || keys.length !== length)
    )
      throw new Error('Sparse array');
    const result: Record<string, unknown> = {};
    for (const key of keys) {
      if (typeof key !== 'string') throw new Error('Symbol key');
      const d = descriptors[key];
      if (
        !d ||
        !('value' in d) ||
        !d.enumerable ||
        (array && (!/^(0|[1-9]\d*)$/.test(key) || Number(key) >= length))
      )
        throw new Error('Non-JSON property');
      if (!array && optionalUndefined && d.value === undefined) continue;
      text += key.length;
      if (text > maxText) throw new Error('Evidence text bounds exceeded');
      Object.defineProperty(result, key, {
        value: copy(d.value, depth + 1),
        enumerable: true,
      });
    }
    parents.delete(object);
    return Object.freeze(
      array ? Array.from({ length }, (_, i) => result[String(i)]) : result
    );
  }
  return copy(input, 0);
}
export function sameJson(left: unknown, right: unknown): boolean {
  if (left === right) return true;
  if (Array.isArray(left) && Array.isArray(right)) {
    const length = ownValue(left, 'length') as number;
    if (length !== ownValue(right, 'length')) return false;
    for (let i = 0; i < length; i++)
      if (!sameJson(ownValue(left, String(i)), ownValue(right, String(i))))
        return false;
    return true;
  }
  if (!plainRecord(left) || !plainRecord(right)) return false;
  const keys = Object.keys(left);
  return (
    keys.length === Object.keys(right).length &&
    keys.every(
      (k) =>
        Object.hasOwn(right, k) &&
        sameJson(ownValue(left, k), ownValue(right, k))
    )
  );
}
export function canonicalPath(path: unknown): path is string {
  return (
    typeof path === 'string' &&
    path.length <= 1024 &&
    path.startsWith('/') &&
    !/[\u0000-\u001f\u007f-\u009f\\]/.test(path) &&
    path
      .slice(1)
      .split('/')
      .every((s) => s !== '' && s !== '.' && s !== '..')
  );
}
export type WorkspaceFile =
  | {
      readonly path: string;
      readonly kind: 'text';
      readonly content: string;
      readonly created_at?: string;
      readonly modified_at?: string;
    }
  | {
      readonly path: string;
      readonly kind: 'unavailable';
      readonly reason: string;
    };
export type WorkspaceState =
  | { readonly kind: 'missing'; readonly files: readonly WorkspaceFile[] }
  | { readonly kind: 'invalid'; readonly reason: string }
  | {
      readonly kind: 'valid';
      readonly files: readonly WorkspaceFile[];
      readonly complete: boolean;
    };
export function workspaceState(input: unknown): WorkspaceState {
  const missing = (): WorkspaceState =>
    Object.freeze({ kind: 'missing', files: Object.freeze([]) });
  if (input === undefined) return missing();
  try {
    // Inspect without copying legacy lines, then enforce budgets before joining.
    inspectJson(input, false, [[]]);
    if (!plainRecord(input)) throw new Error();
    if (!Object.hasOwn(input, 'files')) return missing();
    const map = ownValue(input, 'files');
    if (
      !plainRecord(map) ||
      Object.keys(map).length > 100 ||
      !Object.keys(map).every(canonicalPath)
    )
      throw new Error();
    let total = 0;
    const files = Object.keys(map)
      .sort()
      .map((path): WorkspaceFile => {
        const record = ownValue(map, path);
        const unavailable = (reason: string): WorkspaceFile =>
          Object.freeze({ path, kind: 'unavailable', reason });
        if (
          !plainRecord(record) ||
          Object.keys(record).some(
            (k) =>
              !['content', 'encoding', 'created_at', 'modified_at'].includes(k)
          ) ||
          !Object.hasOwn(record, 'content')
        )
          return unavailable('Unsupported file record');
        const encoding = ownValue(record, 'encoding');
        if (encoding !== undefined && encoding !== 'utf-8')
          return unavailable('Unsupported encoding');
        for (const key of ['created_at', 'modified_at'])
          if (
            ownValue(record, key) !== undefined &&
            (typeof ownValue(record, key) !== 'string' ||
              (ownValue(record, key) as string).length > 1024)
          )
            return unavailable('Unsupported timestamp');
        const raw = ownValue(record, 'content');
        let length: number;
        if (typeof raw === 'string') length = raw.length;
        else if (Array.isArray(raw)) {
          const count = ownValue(raw, 'length') as number;
          if (count > MAX_TEXT + 1)
            return unavailable('File content exceeds display limit');
          length = Math.max(0, count - 1);
          for (let i = 0; i < count; i++) {
            const line = ownValue(raw, String(i));
            if (typeof line !== 'string')
              return unavailable('Unsupported file content');
            length += line.length;
            if (length > MAX_TEXT) break;
          }
        } else return unavailable('Unsupported file content');
        if (length > MAX_TEXT)
          return unavailable('File content exceeds display limit');
        if (total + length > MAX_TOTAL_TEXT)
          return unavailable('Workspace content exceeds display budget');
        total += length;
        return Object.freeze({
          path,
          kind: 'text',
          content:
            typeof raw === 'string'
              ? raw
              : (copyJson(raw) as string[]).join('\n'),
          ...(ownValue(record, 'created_at') !== undefined
            ? { created_at: ownValue(record, 'created_at') as string }
            : {}),
          ...(ownValue(record, 'modified_at') !== undefined
            ? { modified_at: ownValue(record, 'modified_at') as string }
            : {}),
        });
      });
    return Object.freeze({
      kind: 'valid',
      files: Object.freeze(files),
      complete: files.every((f) => f.kind === 'text'),
    });
  } catch {
    return Object.freeze({
      kind: 'invalid',
      reason: 'Malformed or unbounded files data',
    });
  }
}
export function selectWorkspacePath(
  state: WorkspaceState,
  selected?: string
): string | undefined {
  return state.kind === 'valid'
    ? state.files.find((f) => f.path === selected)?.path ?? state.files[0]?.path
    : undefined;
}

import { useEffect, useState } from 'react';
import { selectWorkspacePath, type WorkspaceState } from './workspace-state';
import type { FilesystemApplicationSnapshot } from './application';
type Props = {
  observed: WorkspaceState;
  saved: WorkspaceState;
  phase: FilesystemApplicationSnapshot['phase'];
  notice: string | null;
};
export function WorkspacePanel({ observed, saved, phase, notice }: Props) {
  const live = phase === 'working' || phase === 'confirming';
  const state = live ? observed : saved;
  const [selected, setSelected] = useState<string>();
  const path = selectWorkspacePath(state, selected);
  useEffect(() => {
    if (path !== selected) setSelected(path);
  }, [path, selected]);
  const files =
    state.kind === 'valid' || state.kind === 'missing' ? state.files : [];
  const file = files.find((x) => x.path === path);
  const groups = [
    ...new Set(
      files.map((x) => x.path.slice(0, x.path.lastIndexOf('/')) || '/')
    ),
  ];
  return (
    <section className="workspace-panel" aria-label="Workspace">
      <h2>
        {live
          ? 'Live workspace'
          : phase === 'paused'
          ? 'Paused · confirmed workspace'
          : phase === 'saved'
          ? 'Saved workspace'
          : 'Last confirmed workspace'}
      </h2>
      <p>
        {live
          ? 'Observed files while the response runs. Saved files are confirmed separately.'
          : phase === 'paused'
          ? 'These files come from the saved pause checkpoint. Proposed changes below have not run.'
          : 'Read-only file text from the last confirmed checkpoint.'}
      </p>
      {notice && <p role="status">{notice}</p>}
      {state.kind === 'valid' && !files.length && (
        <p>The workspace is empty.</p>
      )}
      {state.kind === 'missing' && (
        <p>No confirmed files map yet. Send a message to begin.</p>
      )}
      {state.kind === 'invalid' && (
        <p role="status">Files unavailable: {state.reason}</p>
      )}
      <div className="file-layout">
        <nav aria-label="Files">
          {groups.map((group) => (
            <div key={group}>
              <h3>{group}</h3>
              {files
                .filter(
                  (x) =>
                    (x.path.slice(0, x.path.lastIndexOf('/')) || '/') === group
                )
                .map((x) => (
                  <button
                    type="button"
                    key={x.path}
                    aria-pressed={x.path === path}
                    onClick={() => setSelected(x.path)}
                  >
                    {x.path}
                  </button>
                ))}
            </div>
          ))}
        </nav>
        {file && (
          <article aria-label="File preview">
            <h3>{file.path}</h3>
            {file.kind === 'text' ? (
              <>
                <pre tabIndex={0} aria-label="Literal file content">
                  {file.content}
                </pre>
                {file.content === '' && <p>Empty file</p>}
              </>
            ) : (
              <p role="status">{file.reason}</p>
            )}
          </article>
        )}
      </div>
    </section>
  );
}

import {
  canonicalPath,
  copyJson,
  MAX_TEXT,
  MAX_TOTAL_TEXT,
  plainRecord,
  sameJson,
  type PlainValue,
} from './workspace-state';
export type Choice = 'approve' | 'reject';
// Native HITL embeds the Python repr of complete args in description. A pair
// of maximally escaped text arguments can exceed 8 KiB by a large margin.
export const MAX_DESCRIPTION = 1048576;
export const MAX_METADATA = 2097152;
export interface ApprovalAction {
  readonly name: 'write_file' | 'edit_file' | 'delete';
  readonly args: Readonly<Record<string, PlainValue>>;
  readonly description: string;
}
export type ApprovalState =
  | {
      readonly kind: 'unavailable';
      readonly reason: string;
      readonly rawProposal?: PlainValue;
    }
  | {
      readonly kind: 'valid';
      readonly interruptId: string;
      readonly actions: readonly ApprovalAction[];
      readonly choices: readonly Choice[];
      readonly signature: string;
    };
const exactKeys = (
  r: Record<string, unknown>,
  required: string[],
  optional: string[] = []
) =>
  required.every((k) => Object.hasOwn(r, k)) &&
  Object.keys(r).every((k) => required.includes(k) || optional.includes(k));
/** Pinned WriteFileSchema, EditFileSchema, DeleteSchema; never normalize args. */
export function mutationArgs(name: unknown, args: unknown): boolean {
  if (
    !plainRecord(args) ||
    !(
      canonicalPath(args.file_path) ||
      (name === 'delete' && args.file_path === '/')
    )
  )
    return false;
  const text = (key: string) =>
    typeof args[key] === 'string' && (args[key] as string).length <= MAX_TEXT;
  if (name === 'write_file')
    return exactKeys(args, ['file_path', 'content']) && text('content');
  if (name === 'edit_file')
    return (
      exactKeys(
        args,
        ['file_path', 'old_string', 'new_string'],
        ['replace_all']
      ) &&
      text('old_string') &&
      text('new_string') &&
      (!Object.hasOwn(args, 'replace_all') ||
        typeof args.replace_all === 'boolean')
    );
  return name === 'delete' && exactKeys(args, ['file_path']);
}
export function approvalState(input: unknown): ApprovalState {
  let rawProposal: PlainValue | undefined;
  try {
    input = copyJson(input);
    // Capture unsupported input only if the entire raw JSON is bounded. Never
    // rewrite a path, omit an unknown mutation key, or evaluate an accessor.
    let rawText = 0;
    const count = (v: unknown): void => {
      if (typeof v === 'string') rawText += v.length;
      else if (Array.isArray(v)) v.forEach(count);
      else if (plainRecord(v))
        Object.entries(v).forEach(([k, x]) => {
          rawText += k.length;
          count(x);
        });
      if (rawText > MAX_METADATA + MAX_TOTAL_TEXT)
        throw new Error('Raw proposal exceeds visible budget');
    };
    count(input);
    rawProposal = input as PlainValue;
    if (
      !plainRecord(input) ||
      !exactKeys(input, ['id', 'value']) ||
      typeof input.id !== 'string' ||
      !input.id ||
      input.id.length > 1024 ||
      !plainRecord(input.value) ||
      !exactKeys(input.value, ['action_requests', 'review_configs'])
    )
      throw new Error();
    const actions = input.value.action_requests,
      configs = input.value.review_configs;
    if (
      !Array.isArray(actions) ||
      !actions.length ||
      actions.length > 20 ||
      !Array.isArray(configs) ||
      configs.length !== actions.length
    )
      throw new Error();
    let total = 0,
      metadata = 0;
    for (const [i, action] of actions.entries()) {
      const config = configs[i];
      if (
        !plainRecord(action) ||
        !exactKeys(action, ['name', 'args', 'description']) ||
        !mutationArgs(action.name, action.args) ||
        typeof action.description !== 'string' ||
        action.description.length > MAX_DESCRIPTION ||
        !plainRecord(config) ||
        !exactKeys(config, ['action_name', 'allowed_decisions']) ||
        config.action_name !== action.name ||
        !Array.isArray(config.allowed_decisions) ||
        !config.allowed_decisions.length ||
        config.allowed_decisions.length > 4 ||
        new Set(config.allowed_decisions).size !==
          config.allowed_decisions.length ||
        config.allowed_decisions.some(
          (v) => !['approve', 'edit', 'reject', 'respond'].includes(v)
        )
      )
        throw new Error();
      metadata += action.description.length;
      total += Object.values(
        action.args as Record<string, unknown>
      ).reduce<number>((n, v) => n + (typeof v === 'string' ? v.length : 0), 0);
      if (total > MAX_TOTAL_TEXT || metadata > MAX_METADATA) throw new Error();
    }
    const choices = (['approve', 'reject'] as Choice[]).filter((choice) =>
      configs.every((c) => c.allowed_decisions.includes(choice))
    );
    return Object.freeze({
      kind: 'valid',
      interruptId: input.id,
      actions: actions as readonly ApprovalAction[],
      choices: Object.freeze(choices),
      signature: JSON.stringify(input),
    });
  } catch {
    return Object.freeze({
      kind: 'unavailable',
      reason:
        rawProposal === undefined
          ? 'Raw current proposal is unavailable: non-JSON data or visible bounds exceeded. No decisions can be sent.'
          : 'Complete raw proposal shown: unsupported action, arguments, metadata, shape or bounds. No decisions can be sent.',
      ...(rawProposal !== undefined ? { rawProposal } : {}),
    });
  }
}
/** Match the captured pause against current authority before calling this. */
export function createDecision(
  batch: ApprovalState,
  currentSignature: string,
  choice: unknown
): PlainValue | undefined {
  try {
    // A signature contains JSON escapes in addition to the raw bounded text.
    const captured = copyJson(batch, false, 33554432);
    if (
      (choice !== 'approve' && choice !== 'reject') ||
      !plainRecord(captured) ||
      captured.kind !== 'valid' ||
      typeof currentSignature !== 'string' ||
      currentSignature.length > (MAX_METADATA + MAX_TOTAL_TEXT) * 6 ||
      captured.signature !== currentSignature
    )
      return undefined;
    const current = approvalState(JSON.parse(currentSignature));
    if (
      current.kind !== 'valid' ||
      !sameJson(current, captured) ||
      !current.choices.includes(choice)
    )
      return undefined;
    return Object.freeze({
      decisions: Object.freeze(
        current.actions.map(() => Object.freeze({ type: choice }))
      ),
    });
  } catch {
    return undefined;
  }
}

import type { ApprovalState, Choice } from './approval-state';
import type { WorkspaceState } from './workspace-state';
export function ApprovalPanel({
  approval,
  workspace,
  busy,
  onDecision,
}: {
  approval: ApprovalState | null;
  workspace: WorkspaceState;
  busy: boolean;
  onDecision: (choice: Choice) => void;
}) {
  if (!approval) return null;
  if (approval.kind === 'unavailable')
    return (
      <section className="approval-panel" aria-label="Unavailable proposal">
        <h2>Proposal unavailable</h2>
        <p>{approval.reason}</p>
        {approval.rawProposal !== undefined && (
          <pre>{JSON.stringify(approval.rawProposal, null, 2)}</pre>
        )}
        <p>Start a new conversation to continue.</p>
      </section>
    );
  const paths = new Set(
    workspace.kind === 'valid' ? workspace.files.map((x) => x.path) : []
  );
  return (
    <section className="approval-panel" aria-label="Awaiting approval">
      <h2>
        Awaiting approval · {approval.actions.length} proposed{' '}
        {approval.actions.length === 1 ? 'action' : 'actions'}
      </h2>
      <p>
        Review the entire ordered batch. These are proposed arguments, not saved
        file changes.
      </p>
      <ol>
        {approval.actions.map((action, index) => {
          const path = String(action.args.file_path);
          return (
            <li key={index}>
              <h3>
                {action.name} · {path}
              </h3>
              {action.name === 'write_file' ? (
                <>
                  <p>
                    {paths.has(path)
                      ? 'Replacement proposal'
                      : 'New file proposal · not saved'}
                  </p>
                  <pre>{String(action.args.content)}</pre>
                </>
              ) : action.name === 'edit_file' ? (
                <>
                  <p>
                    Edit intent · replace_all:{' '}
                    {String(action.args.replace_all ?? false)}
                  </p>
                  <h4>Old text</h4>
                  <pre>{String(action.args.old_string)}</pre>
                  <h4>New text</h4>
                  <pre>{String(action.args.new_string)}</pre>
                </>
              ) : (
                <p>
                  Delete intent · {path === '/' ? 'root and descendants' : path}{' '}
                  (file or directory subtree)
                </p>
              )}
              <details>
                <summary>Raw proposal description</summary>
                <pre>{action.description}</pre>
              </details>
            </li>
          );
        })}
      </ol>
      <div className="decision-controls">
        {approval.choices.map((choice) => (
          <button
            type="button"
            key={choice}
            disabled={busy}
            onClick={() => onDecision(choice)}
          >
            {choice === 'approve'
              ? 'Approve entire batch'
              : 'Reject entire batch'}
          </button>
        ))}
      </div>
      {!approval.choices.length && (
        <p>
          No whole-batch Approve or Reject decision is permitted. Start a new
          conversation.
        </p>
      )}
    </section>
  );
}