feat: casan chat optz
This commit is contained in:
thanhnv
@@ -160,6 +160,17 @@ export interface ChatSource {
|
||||
envelope?: CommandEnvelope;
|
||||
}
|
||||
|
||||
export interface ChatGovernanceVerdict {
|
||||
outcome: 'allow' | 'degraded' | 'deny' | 'not_run';
|
||||
gate: string;
|
||||
reason_code: string;
|
||||
summary: string;
|
||||
remediation: string[];
|
||||
categories: string[];
|
||||
security_trace_id: string;
|
||||
side_effect_allowed: boolean;
|
||||
}
|
||||
|
||||
export interface ChatAnswer {
|
||||
success: boolean;
|
||||
chat_id?: string;
|
||||
@@ -180,6 +191,7 @@ export interface ChatAnswer {
|
||||
side_effect_allowed?: boolean;
|
||||
needs_approval?: boolean;
|
||||
};
|
||||
governance?: ChatGovernanceVerdict;
|
||||
action?: { id: string; label: string; description: string } | null;
|
||||
action_gate?: { outcome?: string; reason?: string; exit_code?: number };
|
||||
agent_binding?: {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { type KeyboardEvent, useEffect, useMemo, useState } from 'react';
|
||||
import { type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { api, ChatAction, ChatAgent, ChatAnswer, ChatHistoryTurn, ChatModelProvider, ChatStreamPhase, SettingsActor } from '../lib/api';
|
||||
@@ -20,6 +20,13 @@ const HARNESS_STAGES = [
|
||||
{ id: 'H7', label: 'Orchestration' },
|
||||
] as const;
|
||||
|
||||
const CAPABILITIES = [
|
||||
{ label: 'Explore evidence', description: 'Find facts with verifiable citations', prompt: 'Summarize the current CASAN architecture and cite the strongest evidence.' },
|
||||
{ label: 'Diagnose a run', description: 'Trace failures across H1–H7', prompt: 'Analyze the latest failed run, identify the root cause, and propose the safest next step.' },
|
||||
{ label: 'Draft a plan', description: 'Turn a goal into an executable plan', prompt: 'Create a production-ready implementation plan with scope, risks, tests, and acceptance criteria for: ' },
|
||||
{ label: 'Governed action', description: 'Route registered operations for approval', prompt: 'List the registered actions I am allowed to request and explain their approval requirements.' },
|
||||
] as const;
|
||||
|
||||
interface WorkspaceMessage {
|
||||
id: string;
|
||||
kind: MessageKind;
|
||||
@@ -108,6 +115,8 @@ export function Chat() {
|
||||
const [streamBusy, setStreamBusy] = useState(false);
|
||||
const [harnessStatus, setHarnessStatus] = useState<HarnessRunStatus>('idle');
|
||||
const [activeHarness, setActiveHarness] = useState(0);
|
||||
const composerRef = useRef<HTMLTextAreaElement>(null);
|
||||
const isDevelopment = import.meta.env.DEV;
|
||||
|
||||
const auditQuery = useQuery({ queryKey: ['chat-audit'], queryFn: api.verifyChatAudit, retry: false });
|
||||
const conversationsQuery = useQuery({ queryKey: ['chat-history', actor], queryFn: () => api.chatHistory(actor), retry: false });
|
||||
@@ -155,8 +164,9 @@ export function Chat() {
|
||||
setPendingMessage(null);
|
||||
setError(null);
|
||||
setMessage('');
|
||||
setActiveHarness(HARNESS_STAGES.length - 1);
|
||||
setHarnessStatus('completed');
|
||||
const deniedAtH4 = answer.governance?.gate === 'H4' && answer.governance.outcome === 'deny';
|
||||
setActiveHarness(deniedAtH4 ? 3 : HARNESS_STAGES.length - 1);
|
||||
setHarnessStatus(deniedAtH4 || answer.decision === 'DENIED' ? 'failed' : 'completed');
|
||||
refreshChat();
|
||||
},
|
||||
onError: (reason: unknown) => {
|
||||
@@ -186,11 +196,13 @@ export function Chat() {
|
||||
if (phase.phase === 'draft') setDraftText(phase.answer);
|
||||
if (phase.phase === 'final') {
|
||||
setDraftText(null);
|
||||
setLast(finalToAnswer(phase, actor));
|
||||
const answer = finalToAnswer(phase, actor);
|
||||
setLast(answer);
|
||||
setPendingMessage(null);
|
||||
setMessage('');
|
||||
setActiveHarness(HARNESS_STAGES.length - 1);
|
||||
setHarnessStatus('completed');
|
||||
const deniedAtH4 = answer.governance?.gate === 'H4' && answer.governance.outcome === 'deny';
|
||||
setActiveHarness(deniedAtH4 ? 3 : HARNESS_STAGES.length - 1);
|
||||
setHarnessStatus(deniedAtH4 || answer.decision === 'DENIED' ? 'failed' : 'completed');
|
||||
}
|
||||
});
|
||||
refreshChat();
|
||||
@@ -235,6 +247,20 @@ export function Chat() {
|
||||
setActiveHarness(0);
|
||||
};
|
||||
|
||||
const applyFormat = (before: string, after = before) => {
|
||||
const composer = composerRef.current;
|
||||
if (!composer) return;
|
||||
const start = composer.selectionStart;
|
||||
const end = composer.selectionEnd;
|
||||
const selected = message.slice(start, end) || 'text';
|
||||
const next = `${message.slice(0, start)}${before}${selected}${after}${message.slice(end)}`;
|
||||
setMessage(next);
|
||||
window.requestAnimationFrame(() => {
|
||||
composer.focus();
|
||||
composer.setSelectionRange(start + before.length, start + before.length + selected.length);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<section className="relative overflow-hidden rounded-2xl border border-indigo-200/70 bg-gradient-to-br from-[#172554] via-[#1e2f68] to-[#334aa0] px-5 py-5 text-white shadow-[0_20px_40px_rgba(30,41,89,0.22)] sm:px-6">
|
||||
@@ -322,12 +348,14 @@ export function Chat() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!historyQuery.isLoading && messages.length === 0 && <div className="mx-auto flex max-w-md flex-col items-center py-20 text-center"><div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-indigo-50 text-indigo-600"><Glyph name="spark" /></div><h3 className="mt-4 font-semibold text-slate-800">A governed empty state</h3><p className="mt-2 text-sm leading-6 text-slate-500">Ask for a plan, a security posture, or an evidence-backed comparison. CASAN will cite what it knows and decline what it cannot govern.</p></div>}
|
||||
{!historyQuery.isLoading && messages.length === 0 && <div className="mx-auto w-full max-w-2xl py-12"><div className="text-center"><div className="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-indigo-50 text-indigo-600"><Glyph name="spark" /></div><h3 className="mt-4 text-lg font-semibold text-slate-800">What are we solving today?</h3><p className="mt-2 text-sm leading-6 text-slate-500">Start with a governed capability. You can refine the prompt before sending.</p></div><div className="mt-7 grid gap-3 sm:grid-cols-2">{CAPABILITIES.map((capability) => <button key={capability.label} type="button" onClick={() => { setMessage(capability.prompt); window.requestAnimationFrame(() => composerRef.current?.focus()); }} className="group rounded-2xl border border-slate-200 bg-white p-4 text-left shadow-sm transition hover:-translate-y-px hover:border-indigo-300 hover:shadow-md"><div className="flex items-center justify-between gap-3"><span className="text-sm font-semibold text-slate-800">{capability.label}</span><span className="text-indigo-500 transition group-hover:translate-x-0.5"><Glyph name="chevron" /></span></div><p className="mt-1.5 text-xs leading-5 text-slate-500">{capability.description}</p></button>)}</div></div>}
|
||||
</div>
|
||||
<div className="border-t border-slate-200 bg-white p-4">
|
||||
{error && <div role="alert" className="mb-3 rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700">{error}</div>}
|
||||
{last?.governance?.outcome === 'deny' && <div role="alert" className="mb-3 rounded-xl border border-rose-200 bg-rose-50 p-3 text-sm text-rose-900"><div className="flex items-center justify-between gap-3"><span className="font-semibold">Request held by {last.governance.gate}</span><span className="rounded-full bg-rose-100 px-2 py-1 font-mono text-[10px] text-rose-700">{last.governance.reason_code}</span></div><p className="mt-1.5 text-xs leading-5 text-rose-800">{last.governance.summary}</p>{last.governance.remediation.length > 0 && <ul className="mt-2 list-disc space-y-1 pl-4 text-xs text-rose-700">{last.governance.remediation.map((item) => <li key={item}>{item}</li>)}</ul>}</div>}
|
||||
<div className="rounded-2xl border border-slate-300 bg-white p-2 shadow-[0_8px_20px_rgba(15,23,42,0.05)] transition focus-within:border-indigo-400 focus-within:ring-4 focus-within:ring-indigo-100">
|
||||
<textarea aria-label="Ask CASAN" value={message} onChange={(event) => setMessage(event.target.value)} onKeyDown={onComposerKeyDown} placeholder="Ask CASAN about your evidence, plans or governed actions…" className="min-h-[82px] w-full resize-none bg-transparent px-2 py-1.5 text-sm leading-6 text-slate-800 outline-none placeholder:text-slate-400" disabled={busy} />
|
||||
<div className="flex items-center gap-1 border-b border-slate-100 px-1 pb-2" aria-label="Rich text controls"><button type="button" onClick={() => applyFormat('**')} className="rounded-md px-2 py-1 text-xs font-bold text-slate-500 transition hover:bg-slate-100 hover:text-slate-800" aria-label="Bold">B</button><button type="button" onClick={() => applyFormat('_')} className="rounded-md px-2 py-1 text-xs italic text-slate-500 transition hover:bg-slate-100 hover:text-slate-800" aria-label="Italic">I</button><button type="button" onClick={() => applyFormat('## ', '')} className="rounded-md px-2 py-1 text-xs font-semibold text-slate-500 transition hover:bg-slate-100 hover:text-slate-800" aria-label="Heading">H2</button><button type="button" onClick={() => applyFormat('- ', '')} className="rounded-md px-2 py-1 text-xs text-slate-500 transition hover:bg-slate-100 hover:text-slate-800" aria-label="List">List</button><button type="button" onClick={() => applyFormat('`')} className="rounded-md px-2 py-1 font-mono text-xs text-slate-500 transition hover:bg-slate-100 hover:text-slate-800" aria-label="Inline code"></></button><span className="ml-auto text-[10px] font-medium text-slate-400">Markdown</span></div>
|
||||
<textarea ref={composerRef} aria-label="Ask CASAN" value={message} onChange={(event) => setMessage(event.target.value)} onKeyDown={onComposerKeyDown} placeholder="Ask CASAN about evidence, plans, analysis or governed actions…" className="min-h-[96px] w-full resize-y bg-transparent px-2 py-2 text-sm leading-6 text-slate-800 outline-none placeholder:text-slate-400" disabled={busy} maxLength={32000} />
|
||||
<div className="flex items-center justify-between gap-3 px-1 pt-1">
|
||||
<label className="flex cursor-pointer items-center gap-2 text-xs text-slate-500"><input type="checkbox" checked={streaming} onChange={(event) => setStreaming(event.target.checked)} className="h-3.5 w-3.5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />Show safe draft first</label>
|
||||
<button type="button" onClick={() => submit()} disabled={!message.trim() || busy} className="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:bg-slate-300"><Glyph name="send" />{busy ? 'Working…' : 'Ask CASAN'}</button>
|
||||
@@ -349,13 +377,13 @@ export function Chat() {
|
||||
<button type="button" onClick={() => setConnectionsOpen(true)} className="flex w-full items-center justify-center gap-2 rounded-lg border border-indigo-200 bg-indigo-50 px-3 py-2 text-xs font-semibold text-indigo-700 transition hover:bg-indigo-100"><Glyph name="bolt" />Manage model connections</button>
|
||||
<p className="text-[11px] leading-4 text-slate-500">Connected models are loaded live; every cloud/gateway request still passes policy and preflight.</p>
|
||||
</div>
|
||||
<details className="mt-3 border-t border-slate-100 pt-3 text-xs text-slate-600"><summary className="cursor-pointer font-medium text-slate-700">Session scope</summary><div className="mt-3 grid grid-cols-2 gap-2"><label className="col-span-2">Actor<input value={actor.actor} onChange={(event) => setActor({ ...actor, actor: event.target.value })} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs" /></label><label>Role<select value={actor.role} onChange={(event) => setActor({ ...actor, role: event.target.value })} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs">{ROLES.map((role) => <option key={role}>{role}</option>)}</select></label><label>Delegate<input type="number" min={0} max={5} value={delegationLevel} onChange={(event) => setDelegationLevel(Number(event.target.value || 0))} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs" /></label><label>Project<input value={actor.project} onChange={(event) => setActor({ ...actor, project: event.target.value })} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs" /></label><label>Tenant<input value={actor.tenant} onChange={(event) => setActor({ ...actor, tenant: event.target.value })} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs" /></label><label className="col-span-2">Agent<select value={selectedAgent?.id ?? agentId} onChange={(event) => { const next = agents.find((agent) => agent.id === event.target.value); setAgentId(event.target.value); setSkillId(next?.skills_allowed[0] ?? ''); }} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs">{agents.map((agent: ChatAgent) => <option key={agent.id} value={agent.id}>{agent.label}{agent.allowed_for_role ? '' : ' (locked)'}</option>)}</select></label><label className="col-span-2">Skill<select value={selectedSkill} onChange={(event) => setSkillId(event.target.value)} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs">{(selectedAgent?.skills_allowed ?? []).map((skill) => <option key={skill}>{skill}</option>)}</select></label></div></details>
|
||||
{isDevelopment && <details className="mt-3 border-t border-slate-100 pt-3 text-xs text-slate-600"><summary className="cursor-pointer font-medium text-slate-700">Local policy simulator</summary><div className="mt-3 grid grid-cols-2 gap-2"><label className="col-span-2">Actor<input value={actor.actor} onChange={(event) => setActor({ ...actor, actor: event.target.value })} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs" /></label><label>Role<select value={actor.role} onChange={(event) => setActor({ ...actor, role: event.target.value })} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs">{ROLES.map((role) => <option key={role}>{role}</option>)}</select></label><label>Delegate<input type="number" min={0} max={5} value={delegationLevel} onChange={(event) => setDelegationLevel(Number(event.target.value || 0))} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs" /></label><label>Project<input value={actor.project} onChange={(event) => setActor({ ...actor, project: event.target.value })} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs" /></label><label>Tenant<input value={actor.tenant} onChange={(event) => setActor({ ...actor, tenant: event.target.value })} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs" /></label></div></details>}
|
||||
</div>
|
||||
|
||||
<div className="mt-5 text-[10px] font-bold uppercase tracking-[0.15em] text-slate-400">Latest verification</div>
|
||||
<div className="mt-2 space-y-2">
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-3"><div className="text-xs text-slate-400">Audit anchor</div><div className="mt-1 break-all font-mono text-[11px] text-slate-700">{auditHash(last).slice(0, 22)}{auditHash(last) !== 'n/a' ? '…' : ''}</div></div>
|
||||
{last && <><div className="rounded-xl border border-slate-200 bg-white p-3"><div className="flex flex-wrap gap-1.5"><StatusBadge value={last.mode} /><StatusBadge value={last.risk} /><StatusBadge value={last.decision} /><StatusBadge value={last.certified ? 'certified' : 'held'} /></div><div className="mt-2 text-xs text-slate-500">{last.router?.reason ?? 'Policy route verified'}{last.synthesis?.fallback_from ? ` · fell back from ${last.synthesis.fallback_from} to local` : ''}</div>{last.trace_id && <Link to={`/runs?trace=${encodeURIComponent(last.trace_id)}`} className="mt-3 flex w-full items-center justify-center gap-2 rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-xs font-semibold text-blue-700 transition-colors hover:bg-blue-100">Open live H1–H7 trace <Glyph name="chevron" /></Link>}</div><Card title="Evidence" className="p-3.5"><div className="space-y-2">{last.sources.slice(0, 3).map((source) => <div key={`${source.path}-${source.line ?? ''}`} className="rounded-lg bg-slate-50 p-2.5"><div className="truncate text-xs font-medium text-slate-700">{source.title || source.path}</div><div className="mt-1 text-[11px] leading-4 text-slate-500">{source.preview || source.excerpt || 'Verified source'}</div></div>)}{last.sources.length === 0 && <div className="text-xs text-slate-500">No source was returned for this decision.</div>}</div></Card></>}
|
||||
{last && <><div className="rounded-xl border border-slate-200 bg-white p-3"><div className="flex flex-wrap gap-1.5"><StatusBadge value={last.mode} /><StatusBadge value={last.risk} /><StatusBadge value={last.decision} /><StatusBadge value={last.certified ? 'certified' : 'held'} /></div><div className="mt-2 text-xs text-slate-500">{last.governance?.summary ?? last.router?.reason ?? 'Policy route verified'}{last.synthesis?.fallback_from ? ` · fell back from ${last.synthesis.fallback_from} to local` : ''}</div>{last.governance && <div className="mt-3 grid grid-cols-2 gap-2 border-t border-slate-100 pt-3 text-[11px]"><div><span className="text-slate-400">H4 outcome</span><div className="mt-0.5 font-semibold text-slate-700">{last.governance.outcome}</div></div><div><span className="text-slate-400">Reason</span><div className="mt-0.5 truncate font-mono text-slate-700" title={last.governance.reason_code}>{last.governance.reason_code}</div></div><div className="col-span-2"><span className="text-slate-400">Side effects</span><div className="mt-0.5 font-semibold text-slate-700">{last.governance.side_effect_allowed ? 'Policy-routed' : 'Read-only'}</div></div></div>}{last.trace_id && <Link to={`/runs?trace=${encodeURIComponent(last.trace_id)}`} className="mt-3 flex w-full items-center justify-center gap-2 rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-xs font-semibold text-blue-700 transition-colors hover:bg-blue-100">Open live H1–H7 trace <Glyph name="chevron" /></Link>}</div><Card title="Evidence" className="p-3.5"><div className="space-y-2">{last.sources.slice(0, 3).map((source) => <div key={`${source.path}-${source.line ?? ''}`} className="rounded-lg bg-slate-50 p-2.5"><div className="truncate text-xs font-medium text-slate-700">{source.title || source.path}</div><div className="mt-1 text-[11px] leading-4 text-slate-500">{source.preview || source.excerpt || 'Verified source'}</div></div>)}{last.sources.length === 0 && <div className="text-xs text-slate-500">No source was returned for this decision.</div>}</div></Card></>}
|
||||
</div>
|
||||
|
||||
<div className="mt-5 text-[10px] font-bold uppercase tracking-[0.15em] text-slate-400">Registered actions</div>
|
||||
|
||||
Reference in New Issue
Block a user