fix template, remove okr, use casan.*
This commit is contained in:
thanhnv
@@ -16,6 +16,8 @@ export interface GoalProject {
|
||||
domain: string;
|
||||
domain_root: string;
|
||||
context_roots: string[];
|
||||
manifest?: string;
|
||||
shell_root?: string;
|
||||
}
|
||||
|
||||
export interface GoalProjectCreateInput {
|
||||
@@ -109,6 +111,7 @@ const ORCHESTRATOR_CLI = join(HARNESS_BIN, 'goal-orchestrator.py');
|
||||
const PATCH_EXECUTOR_CLI = join(HARNESS_BIN, 'goal-patch-executor.py');
|
||||
const RBAC_CLI = join(HARNESS_BIN, 'rbac-check.py');
|
||||
const PROJECT_REGISTRY = join(APP_ROOT, 'packages', 'casan-harness', 'level5', 'project-registry.json');
|
||||
const PROJECT_SCAFFOLDER = join(APP_ROOT, 'packages', 'casan-devkit', 'project-scaffold.py');
|
||||
|
||||
function parseJson<T>(value: string): T | null {
|
||||
try {
|
||||
@@ -260,10 +263,10 @@ export class GoalsService {
|
||||
if (actor.role !== 'org-admin') throw new ForbiddenException('GOAL_PROJECT_CREATE_DENIED');
|
||||
const projectId = String(input.projectId ?? '').trim();
|
||||
const domain = String(input.domain ?? '').trim();
|
||||
if (!/^[A-Za-z][A-Za-z0-9._-]{2,63}$/.test(projectId)) {
|
||||
if (!/^[a-z][a-z0-9-]{1,62}$/.test(projectId)) {
|
||||
throw new BadRequestException('GOAL_PROJECT_ID_INVALID');
|
||||
}
|
||||
if (domain.length < 3 || domain.length > 100) {
|
||||
if (!/^[\p{L}\p{N}][\p{L}\p{N} .&()'_-]{1,99}$/u.test(domain)) {
|
||||
throw new BadRequestException('GOAL_PROJECT_DOMAIN_INVALID');
|
||||
}
|
||||
const lockPath = `${PROJECT_REGISTRY}.lock`;
|
||||
@@ -291,13 +294,83 @@ export class GoalsService {
|
||||
absoluteRoot = join(canonicalProjects, projectId);
|
||||
mkdirSync(absoluteRoot, { mode: 0o750 });
|
||||
createdRoot = true;
|
||||
const relativeRoot = join('apps', 'projects', projectId);
|
||||
const entry = { project_id: projectId, domain, domain_root: relativeRoot, context_roots: [relativeRoot], harness_package: 'fpt-casan-sdd-harness', harness_version: '1.0.0', status: 'active' };
|
||||
execFileSync('python3', [PROJECT_SCAFFOLDER,
|
||||
'--target', absoluteRoot,
|
||||
'--project', projectId,
|
||||
'--name', domain,
|
||||
'--template', 'nestjs-react',
|
||||
'--with-harness',
|
||||
], {
|
||||
cwd: APP_ROOT,
|
||||
env: process.env,
|
||||
encoding: 'utf8',
|
||||
stdio: ['ignore', 'pipe', 'pipe'],
|
||||
timeout: 60_000,
|
||||
});
|
||||
|
||||
const relativeRoot = join('apps', 'projects', projectId).replaceAll('\\', '/');
|
||||
const embeddedAppRoot = `${relativeRoot}/apps/${projectId}`;
|
||||
const adapterManifestPath = `${relativeRoot}/casan.workspace.manifest.json`;
|
||||
const adapterManifest = {
|
||||
schema_version: 1,
|
||||
project_id: projectId,
|
||||
display_name: domain,
|
||||
domain_root: `${embeddedAppRoot}/domain`,
|
||||
requirements: `${embeddedAppRoot}/domain/input/requirement.md`,
|
||||
architecture: `${embeddedAppRoot}/domain/input/architecture.md`,
|
||||
quality_profile: `${relativeRoot}/config/casan/quality-profiles/enterprise-web-v1.json`,
|
||||
feature: { id: `001-${projectId}-app`, module_id: 'MOD-01', slug: `${projectId}-core`, title: `${domain} Core` },
|
||||
source_roots: [`${embeddedAppRoot}/backend`, `${embeddedAppRoot}/frontend`],
|
||||
commands: {
|
||||
build: [['npm', '--prefix', relativeRoot, 'run', 'build']],
|
||||
test: [['npm', '--prefix', relativeRoot, 'test']],
|
||||
},
|
||||
verification: [
|
||||
{
|
||||
path_prefix: `${embeddedAppRoot}/backend/`,
|
||||
commands: [
|
||||
['npm', '--prefix', relativeRoot, 'run', 'build', '-w', `@${projectId}/backend`],
|
||||
['npm', '--prefix', relativeRoot, 'test', '-w', `@${projectId}/backend`],
|
||||
],
|
||||
},
|
||||
{
|
||||
path_prefix: `${embeddedAppRoot}/frontend/`,
|
||||
commands: [
|
||||
['npm', '--prefix', relativeRoot, 'run', 'build', '-w', `@${projectId}/frontend`],
|
||||
['npm', '--prefix', relativeRoot, 'test', '-w', `@${projectId}/frontend`],
|
||||
],
|
||||
},
|
||||
],
|
||||
artifacts_root: `${relativeRoot}/docs/output`,
|
||||
implementation_evidence: [
|
||||
`${embeddedAppRoot}/backend/src/main.ts`,
|
||||
`${embeddedAppRoot}/backend/test/health.test.ts`,
|
||||
`${embeddedAppRoot}/frontend/src/App.tsx`,
|
||||
`${embeddedAppRoot}/frontend/src/__tests__/App.test.tsx`,
|
||||
],
|
||||
tech_stack: 'NestJS 10, React 18, Vite 5, Tailwind CSS 3, strict TypeScript',
|
||||
};
|
||||
const adapterAbsolute = join(APP_ROOT, adapterManifestPath);
|
||||
const adapterTemporary = `${adapterAbsolute}.${process.pid}.${randomUUID()}.tmp`;
|
||||
writeFileSync(adapterTemporary, `${JSON.stringify(adapterManifest, null, 2)}\n`, { encoding: 'utf8', mode: 0o600, flag: 'wx' });
|
||||
renameSync(adapterTemporary, adapterAbsolute);
|
||||
|
||||
const entry = {
|
||||
project_id: projectId,
|
||||
domain,
|
||||
domain_root: `${embeddedAppRoot}/domain`,
|
||||
manifest: adapterManifestPath,
|
||||
context_roots: [relativeRoot],
|
||||
shell_root: relativeRoot,
|
||||
harness_package: 'fpt-casan-sdd-harness',
|
||||
harness_version: '1.0.0',
|
||||
status: 'active',
|
||||
};
|
||||
const updated = { ...registry, projects: [...registry.projects, entry] };
|
||||
const temporary = `${PROJECT_REGISTRY}.${process.pid}.${randomUUID()}.tmp`;
|
||||
writeFileSync(temporary, `${JSON.stringify(updated, null, 2)}\n`, { encoding: 'utf8', mode: 0o600, flag: 'wx' });
|
||||
renameSync(temporary, PROJECT_REGISTRY);
|
||||
return { project_id: projectId, domain, domain_root: relativeRoot, context_roots: [relativeRoot] };
|
||||
return { project_id: projectId, domain, domain_root: entry.domain_root, manifest: adapterManifestPath, shell_root: relativeRoot, context_roots: [relativeRoot] };
|
||||
} catch (error) {
|
||||
if (createdRoot && absoluteRoot) rmSync(absoluteRoot, { recursive: true, force: true });
|
||||
if (error instanceof HttpException) throw error;
|
||||
@@ -379,7 +452,14 @@ export class GoalsService {
|
||||
}
|
||||
return relative;
|
||||
});
|
||||
return { project_id: projectId, domain: String(entry.domain ?? projectId), domain_root: domainRoot, context_roots: contextRoots };
|
||||
return {
|
||||
project_id: projectId,
|
||||
domain: String(entry.domain ?? projectId),
|
||||
domain_root: domainRoot,
|
||||
context_roots: contextRoots,
|
||||
manifest: entry.manifest ? String(entry.manifest) : undefined,
|
||||
shell_root: entry.shell_root ? String(entry.shell_root) : undefined,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -69,6 +69,39 @@ test('approval inbox submit -> approve applies governed setting and writes overs
|
||||
});
|
||||
});
|
||||
|
||||
test('operations owner request remains visible and actionable for an independent reviewer', async () => {
|
||||
await withTempGovernance(async () => {
|
||||
const svc = new ApprovalsService();
|
||||
const submitted = svc.submit({
|
||||
action: 'goal.workspace.execute',
|
||||
target: 'customer-portal',
|
||||
risk: 'high',
|
||||
sensitive: true,
|
||||
reason: 'apply the reviewed workspace patch',
|
||||
payload: { goal_id: 'goal-123', project_id: 'customer-portal' },
|
||||
}, projectAdmin) as { proposal: { id: string; status: string; proposer: string } };
|
||||
|
||||
const reviewerInbox = svc.list(approver, 'pending') as {
|
||||
count: number;
|
||||
proposals: Array<{ id: string; proposer: string; status: string }>;
|
||||
};
|
||||
const visible = reviewerInbox.proposals.find((proposal) => proposal.id === submitted.proposal.id);
|
||||
|
||||
assert.equal(reviewerInbox.count, 1);
|
||||
assert.equal(visible?.proposer, projectAdmin.actor);
|
||||
assert.equal(visible?.status, 'pending');
|
||||
|
||||
const decided = await svc.decide({
|
||||
id: submitted.proposal.id,
|
||||
decision: 'approve',
|
||||
reason: 'independent reviewer verified scope and controls',
|
||||
}, approver) as { proposal: { status: string; approver: string } };
|
||||
|
||||
assert.equal(decided.proposal.status, 'approved');
|
||||
assert.equal(decided.proposal.approver, approver.actor);
|
||||
});
|
||||
});
|
||||
|
||||
test('approval inbox denies forged JWT in strict mode without deciding proposal', async () => {
|
||||
await withTempGovernance(async ({ inbox }) => {
|
||||
const svc = new ApprovalsService();
|
||||
|
||||
@@ -1,9 +1,14 @@
|
||||
import test from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { BadRequestException, ForbiddenException } from '@nestjs/common';
|
||||
import { execFileSync } from 'node:child_process';
|
||||
import { existsSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
|
||||
import { resolve } from 'node:path';
|
||||
import { GoalsService } from '../src/goals/goals.service.js';
|
||||
|
||||
const admin = { actor: 'goal-admin', role: 'org-admin', project: 'default', tenant: 'goal-test' };
|
||||
const root = resolve(import.meta.dirname, '../../../..');
|
||||
const registry = resolve(root, 'packages/casan-harness/level5/project-registry.json');
|
||||
|
||||
test('goal project selector exposes only active allowlisted registry entries', () => {
|
||||
const result = new GoalsService().projects(admin);
|
||||
@@ -25,3 +30,37 @@ test('goal project creation is restricted to organization administrators', () =>
|
||||
ForbiddenException,
|
||||
);
|
||||
});
|
||||
|
||||
test('goal project creation rejects unsafe template values before touching the workspace', () => {
|
||||
assert.throws(
|
||||
() => new GoalsService().createProject({ projectId: 'unsafe-shell', domain: 'Broken "Template"' }, admin),
|
||||
BadRequestException,
|
||||
);
|
||||
});
|
||||
|
||||
test('goal project creation builds a complete isolated shell and central adapter manifest', () => {
|
||||
const projectId = `goal-shell-${process.pid}`;
|
||||
const projectRoot = resolve(root, 'apps/projects', projectId);
|
||||
const registryBefore = readFileSync(registry, 'utf8');
|
||||
try {
|
||||
const created = new GoalsService().createProject({ projectId, domain: 'Goal Shell Verification' }, admin);
|
||||
assert.equal(created.project_id, projectId);
|
||||
assert.equal(created.shell_root, `apps/projects/${projectId}`);
|
||||
assert.equal(created.manifest, `apps/projects/${projectId}/casan.workspace.manifest.json`);
|
||||
assert.ok(existsSync(resolve(projectRoot, '.github/workflows/ci.yml')));
|
||||
assert.ok(existsSync(resolve(projectRoot, `apps/${projectId}/domain/project.manifest.json`)));
|
||||
assert.ok(existsSync(resolve(projectRoot, 'packages/casan-harness/scripts/bash/project-gate.sh')));
|
||||
assert.ok(existsSync(resolve(projectRoot, 'casan.workspace.manifest.json')));
|
||||
|
||||
const validation = execFileSync('python3', [
|
||||
resolve(root, 'packages/casan-harness/scripts/bash/project_manifest.py'),
|
||||
'validate', '--root', root, '--manifest', created.manifest!,
|
||||
], { encoding: 'utf8' });
|
||||
assert.match(validation, /"status": "valid"/);
|
||||
assert.ok(new GoalsService().projects(admin).projects.some((project) => project.project_id === projectId && project.shell_root === created.shell_root));
|
||||
} finally {
|
||||
writeFileSync(registry, registryBefore, 'utf8');
|
||||
rmSync(projectRoot, { recursive: true, force: true });
|
||||
rmSync(`${registry}.lock`, { force: true });
|
||||
}
|
||||
});
|
||||
|
||||
+3
-3
@@ -106,8 +106,8 @@ export function ModelInteractionDiagram({ goal, localStage, cloudStage, trace }:
|
||||
|
||||
return (
|
||||
<section className="overflow-hidden rounded-3xl border border-slate-800 bg-slate-950 shadow-[0_24px_70px_rgba(15,23,42,0.35)]" aria-label="Interactive governed model exchange">
|
||||
<div className="relative overflow-hidden border-b border-white/10 bg-[radial-gradient(circle_at_18%_0%,rgba(99,102,241,0.42),transparent_28rem),radial-gradient(circle_at_84%_14%,rgba(34,211,238,0.2),transparent_22rem)] px-5 py-5">
|
||||
<div className="relative flex flex-wrap items-start justify-between gap-3"><div><div className="text-[10px] font-bold uppercase tracking-[0.18em] text-cyan-200">Interactive model exchange</div><h2 className="mt-1 text-lg font-semibold text-white">Ai đang tác động vào outcome — và control nào đang quyết định</h2><p className="mt-1 text-xs text-slate-300">Chọn avatar hoặc từng H-gate để khám phá tác động và evidence thực tế.</p></div><StatusBadge value={goal.status} /></div>
|
||||
<div className="relative overflow-hidden border-b border-white/10 bg-[radial-gradient(circle_at_18%_0%,rgba(20,184,166,0.28),transparent_28rem),radial-gradient(circle_at_84%_14%,rgba(45,212,191,0.12),transparent_22rem)] px-5 py-5">
|
||||
<div className="relative flex flex-wrap items-start justify-between gap-3"><div><div className="text-[10px] font-bold uppercase tracking-[0.18em] text-teal-200">Interactive model exchange</div><h2 className="mt-1 text-lg font-semibold text-white">See which model is shaping the outcome — and which control decides</h2><p className="mt-1 text-xs text-slate-300">Select an agent or H-gate to inspect its current impact and emitted evidence.</p></div><StatusBadge value={goal.status} /></div>
|
||||
</div>
|
||||
<div className="grid gap-5 p-5 xl:grid-cols-[minmax(300px,0.78fr)_minmax(0,1.7fr)]">
|
||||
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-1"><AgentAvatar label="Local worker" role="Private first pass" model={localStage?.model || goal.local_model} status={localStatus} selected={focusedAgent === 'local'} onClick={() => setFocusedAgent('local')} /><AgentAvatar label="Cloud reviewer" role="Independent critique" model={cloudStage?.model || goal.cloud_model} status={cloudStatus} selected={focusedAgent === 'cloud'} onClick={() => setFocusedAgent('cloud')} /><div className="rounded-xl border border-indigo-400/20 bg-indigo-400/10 p-3 text-xs leading-5 text-indigo-100"><span className="font-semibold text-cyan-200">Selected influence:</span> {direction}</div></div>
|
||||
@@ -117,7 +117,7 @@ export function ModelInteractionDiagram({ goal, localStage, cloudStage, trace }:
|
||||
{focusedNode && <div className="mt-4"><GateDetail node={focusedNode} /></div>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-white/10 bg-slate-900/80 px-5 py-3 text-xs text-slate-400">Màu, chuyển động và tiến độ lấy từ trace H1–H7. Nếu một gate dừng, governed outcome dừng đúng tại evidence đó — không diễn giải nó là lỗi mới ở các gate sau.</div>
|
||||
<div className="border-t border-white/10 bg-slate-900/80 px-5 py-3 text-xs text-slate-400">Color, motion and progress come from the live H1–H7 trace. When a gate stops, the outcome stops at that evidence boundary without inventing downstream failures.</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
import { useRef, useState, type KeyboardEvent } from 'react';
|
||||
import { MarkdownText } from '../ui/MarkdownText';
|
||||
|
||||
interface RichTextGoalEditorProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
maxLength?: number;
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
type Tool = 'heading' | 'bold' | 'italic' | 'bullet' | 'numbered' | 'quote' | 'code' | 'link';
|
||||
|
||||
const TOOLS: Array<{ id: Tool; label: string; mark: string; title: string }> = [
|
||||
{ id: 'heading', label: 'Heading', mark: 'H2', title: 'Section heading' },
|
||||
{ id: 'bold', label: 'Bold', mark: 'B', title: 'Bold text (Ctrl+B)' },
|
||||
{ id: 'italic', label: 'Italic', mark: 'I', title: 'Italic text (Ctrl+I)' },
|
||||
{ id: 'bullet', label: 'Bullets', mark: '•', title: 'Bulleted list' },
|
||||
{ id: 'numbered', label: 'Numbered', mark: '1.', title: 'Numbered list' },
|
||||
{ id: 'quote', label: 'Quote', mark: '❝', title: 'Block quote' },
|
||||
{ id: 'code', label: 'Code', mark: '</>', title: 'Inline code' },
|
||||
{ id: 'link', label: 'Link', mark: '↗', title: 'Link' },
|
||||
];
|
||||
|
||||
function transformSelection(value: string, start: number, end: number, tool: Tool): { value: string; start: number; end: number } {
|
||||
const selected = value.slice(start, end);
|
||||
const fallback = selected || ({
|
||||
heading: 'Section title', bold: 'important detail', italic: 'supporting note', bullet: 'Acceptance criterion',
|
||||
numbered: 'Implementation step', quote: 'Constraint or source', code: 'command', link: 'reference',
|
||||
} satisfies Record<Tool, string>)[tool];
|
||||
let replacement = fallback;
|
||||
let selectionOffset = 0;
|
||||
|
||||
if (tool === 'bold') { replacement = `**${fallback}**`; selectionOffset = 2; }
|
||||
if (tool === 'italic') { replacement = `_${fallback}_`; selectionOffset = 1; }
|
||||
if (tool === 'code') { replacement = `\`${fallback}\``; selectionOffset = 1; }
|
||||
if (tool === 'link') { replacement = `[${fallback}](https://)`; selectionOffset = 1; }
|
||||
if (tool === 'heading') { replacement = `${start > 0 && value[start - 1] !== '\n' ? '\n' : ''}## ${fallback}`; selectionOffset = 3; }
|
||||
if (tool === 'quote') { replacement = `${start > 0 && value[start - 1] !== '\n' ? '\n' : ''}> ${fallback}`; selectionOffset = 2; }
|
||||
if (tool === 'bullet' || tool === 'numbered') {
|
||||
const prefix = tool === 'bullet' ? '- ' : '1. ';
|
||||
replacement = `${start > 0 && value[start - 1] !== '\n' ? '\n' : ''}${fallback.split('\n').map((line) => `${prefix}${line}`).join('\n')}`;
|
||||
selectionOffset = prefix.length;
|
||||
}
|
||||
|
||||
const next = `${value.slice(0, start)}${replacement}${value.slice(end)}`;
|
||||
const selectedStart = start + selectionOffset + (replacement.startsWith('\n') ? 1 : 0);
|
||||
return { value: next, start: selectedStart, end: selectedStart + fallback.length };
|
||||
}
|
||||
|
||||
export function RichTextGoalEditor({ value, onChange, maxLength = 8000, placeholder }: RichTextGoalEditorProps) {
|
||||
const [mode, setMode] = useState<'compose' | 'preview'>('compose');
|
||||
const editor = useRef<HTMLTextAreaElement>(null);
|
||||
const remaining = maxLength - value.length;
|
||||
|
||||
const applyTool = (tool: Tool) => {
|
||||
const element = editor.current;
|
||||
const start = element?.selectionStart ?? value.length;
|
||||
const end = element?.selectionEnd ?? value.length;
|
||||
const transformed = transformSelection(value, start, end, tool);
|
||||
if (transformed.value.length > maxLength) return;
|
||||
onChange(transformed.value);
|
||||
requestAnimationFrame(() => {
|
||||
editor.current?.focus();
|
||||
editor.current?.setSelectionRange(transformed.start, transformed.end);
|
||||
});
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (!(event.ctrlKey || event.metaKey)) return;
|
||||
if (event.key.toLowerCase() === 'b' || event.key.toLowerCase() === 'i') {
|
||||
event.preventDefault();
|
||||
applyTool(event.key.toLowerCase() === 'b' ? 'bold' : 'italic');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-2xl border border-slate-300 bg-white shadow-[0_14px_38px_rgba(30,41,59,0.06)] transition focus-within:border-teal-500 focus-within:ring-4 focus-within:ring-teal-100/70">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 border-b border-slate-200 bg-slate-50/80 px-2.5 py-2">
|
||||
<div className="flex flex-wrap items-center gap-1" role="toolbar" aria-label="Goal formatting">
|
||||
{TOOLS.map((tool) => (
|
||||
<button
|
||||
key={tool.id}
|
||||
type="button"
|
||||
title={tool.title}
|
||||
aria-label={tool.label}
|
||||
disabled={mode === 'preview'}
|
||||
onClick={() => applyTool(tool.id)}
|
||||
className={`grid h-8 min-w-8 place-items-center rounded-lg px-2 text-xs font-semibold text-slate-600 transition hover:bg-white hover:text-slate-950 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-teal-500 disabled:cursor-not-allowed disabled:opacity-35 ${tool.id === 'italic' ? 'italic' : ''}`}
|
||||
>
|
||||
{tool.mark}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex rounded-lg bg-slate-200/70 p-0.5 text-[11px] font-semibold">
|
||||
<button type="button" onClick={() => setMode('compose')} className={`rounded-md px-2.5 py-1.5 transition ${mode === 'compose' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-800'}`}>Compose</button>
|
||||
<button type="button" onClick={() => setMode('preview')} className={`rounded-md px-2.5 py-1.5 transition ${mode === 'preview' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-800'}`}>Preview</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{mode === 'compose' ? (
|
||||
<textarea
|
||||
ref={editor}
|
||||
value={value}
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={placeholder}
|
||||
className="min-h-56 w-full resize-y border-0 bg-white px-5 py-4 text-[15px] leading-7 text-slate-800 outline-none placeholder:text-slate-400"
|
||||
maxLength={maxLength}
|
||||
aria-describedby="goal-editor-help"
|
||||
/>
|
||||
) : (
|
||||
<div className="min-h-56 px-5 py-4">
|
||||
{value.trim() ? <MarkdownText text={value} /> : <p className="text-sm text-slate-400">Your formatted objective will appear here.</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div id="goal-editor-help" className="flex items-center justify-between gap-3 border-t border-slate-100 px-4 py-2 text-[11px] text-slate-400">
|
||||
<span>Markdown-rich text · headings, emphasis, lists, quotes, code and links</span>
|
||||
<span className={`font-mono tabular-nums ${remaining < 400 ? 'text-amber-600' : ''}`}>{value.length.toLocaleString()}/{maxLength.toLocaleString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -6,6 +6,7 @@ const PAGE_COPY: Record<string, { title: string; eyebrow: string }> = {
|
||||
'/': { title: 'Operations overview', eyebrow: 'System posture' },
|
||||
'/command': { title: 'Command center', eyebrow: 'Executive view' },
|
||||
'/chat': { title: 'Governed workspace', eyebrow: 'Ask CASAN' },
|
||||
'/goals': { title: 'Goal orchestrator', eyebrow: 'Governed outcomes' },
|
||||
'/runs': { title: 'Run observability', eyebrow: 'Execution ledger' },
|
||||
'/governance': { title: 'Governance ledger', eyebrow: 'Policy decisions' },
|
||||
'/security': { title: 'Security signals', eyebrow: 'H4 protection' },
|
||||
|
||||
@@ -27,6 +27,8 @@ const NAVIGATION: Array<{ label: string; items: NavItem[] }> = [
|
||||
] },
|
||||
];
|
||||
|
||||
const MOBILE_NAVIGATION = NAVIGATION[0].items.filter((item) => ['/', '/chat', '/goals'].includes(item.to));
|
||||
|
||||
function Icon({ name }: { name: IconName }) {
|
||||
const paths: Record<IconName, ReactNode> = {
|
||||
grid: <><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></>,
|
||||
@@ -83,7 +85,7 @@ export function Sidebar() {
|
||||
</div>
|
||||
</aside>
|
||||
<nav className="fixed inset-x-3 bottom-3 z-30 flex items-center justify-around rounded-2xl border border-slate-200 bg-white/95 p-2 shadow-xl shadow-slate-900/10 backdrop-blur lg:hidden">
|
||||
{NAVIGATION[0].items.slice(0, 3).map((item) => (
|
||||
{MOBILE_NAVIGATION.map((item) => (
|
||||
<NavLink key={item.to} to={item.to} end={item.to === '/'} className={({ isActive }) => `flex min-w-16 flex-col items-center gap-1 rounded-xl px-2 py-1.5 text-[10px] font-semibold ${isActive ? 'bg-indigo-50 text-indigo-700' : 'text-slate-500'}`}>
|
||||
<Icon name={item.icon} />{item.label.split(' ')[0]}
|
||||
</NavLink>
|
||||
|
||||
@@ -6,10 +6,11 @@ interface MarkdownTextProps {
|
||||
}
|
||||
|
||||
function inlineMarkdown(value: string): ReactNode[] {
|
||||
const tokens = value.split(/(`[^`]+`|\*\*[^*]+\*\*|\[[^\]]+\]\(https?:\/\/[^)]+\))/g);
|
||||
const tokens = value.split(/(`[^`]+`|\*\*[^*]+\*\*|_[^_]+_|\[[^\]]+\]\(https?:\/\/[^)]+\))/g);
|
||||
return tokens.filter(Boolean).map((token, index) => {
|
||||
if (token.startsWith('`') && token.endsWith('`')) return <code key={index} className="rounded bg-slate-100 px-1.5 py-0.5 font-mono text-[0.9em] text-indigo-700">{token.slice(1, -1)}</code>;
|
||||
if (token.startsWith('**') && token.endsWith('**')) return <strong key={index} className="font-semibold text-slate-900">{token.slice(2, -2)}</strong>;
|
||||
if (token.startsWith('_') && token.endsWith('_')) return <em key={index} className="text-slate-700">{token.slice(1, -1)}</em>;
|
||||
const link = token.match(/^\[([^\]]+)\]\((https?:\/\/[^)]+)\)$/);
|
||||
if (link) return <a key={index} href={link[2]} target="_blank" rel="noreferrer" className="font-medium text-indigo-600 underline decoration-indigo-200 underline-offset-2 hover:text-indigo-800">{link[1]}</a>;
|
||||
return token;
|
||||
@@ -20,6 +21,7 @@ export function MarkdownText({ text, compact = false }: MarkdownTextProps) {
|
||||
const lines = text.replace(/\r\n/g, '\n').split('\n');
|
||||
const blocks: ReactNode[] = [];
|
||||
let list: string[] = [];
|
||||
let orderedList: string[] = [];
|
||||
let code: string[] = [];
|
||||
let inCode = false;
|
||||
|
||||
@@ -28,6 +30,11 @@ export function MarkdownText({ text, compact = false }: MarkdownTextProps) {
|
||||
blocks.push(<ul key={`list-${blocks.length}`} className="my-2 space-y-1 pl-5 text-sm leading-6 text-slate-700">{list.map((item, index) => <li key={index} className="list-disc marker:text-indigo-400">{inlineMarkdown(item)}</li>)}</ul>);
|
||||
list = [];
|
||||
};
|
||||
const flushOrderedList = () => {
|
||||
if (orderedList.length === 0) return;
|
||||
blocks.push(<ol key={`ordered-list-${blocks.length}`} className="my-2 space-y-1 pl-5 text-sm leading-6 text-slate-700">{orderedList.map((item, index) => <li key={index} className="list-decimal marker:font-mono marker:text-teal-600">{inlineMarkdown(item)}</li>)}</ol>);
|
||||
orderedList = [];
|
||||
};
|
||||
const flushCode = () => {
|
||||
if (code.length === 0) return;
|
||||
blocks.push(<pre key={`code-${blocks.length}`} className="my-3 overflow-x-auto rounded-xl bg-slate-950 p-4 text-xs leading-5 text-slate-100"><code>{code.join('\n')}</code></pre>);
|
||||
@@ -36,15 +43,22 @@ export function MarkdownText({ text, compact = false }: MarkdownTextProps) {
|
||||
|
||||
lines.forEach((line) => {
|
||||
if (line.trim().startsWith('```')) {
|
||||
flushList();
|
||||
flushList(); flushOrderedList();
|
||||
if (inCode) flushCode();
|
||||
inCode = !inCode;
|
||||
return;
|
||||
}
|
||||
if (inCode) { code.push(line); return; }
|
||||
const bullet = line.match(/^\s*[-*+]\s+(.+)$/);
|
||||
if (bullet) { list.push(bullet[1]); return; }
|
||||
flushList();
|
||||
if (bullet) { flushOrderedList(); list.push(bullet[1]); return; }
|
||||
const ordered = line.match(/^\s*\d+[.)]\s+(.+)$/);
|
||||
if (ordered) { flushList(); orderedList.push(ordered[1]); return; }
|
||||
flushList(); flushOrderedList();
|
||||
const quote = line.match(/^>\s+(.+)$/);
|
||||
if (quote) {
|
||||
blocks.push(<blockquote key={`quote-${blocks.length}`} className="my-3 border-l-2 border-teal-500 bg-teal-50/70 py-2 pl-4 pr-3 text-sm italic leading-6 text-slate-700">{inlineMarkdown(quote[1])}</blockquote>);
|
||||
return;
|
||||
}
|
||||
const heading = line.match(/^(#{1,4})\s+(.+)$/);
|
||||
if (heading) {
|
||||
const size = heading[1].length === 1 ? 'text-lg' : heading[1].length === 2 ? 'text-base' : 'text-sm';
|
||||
@@ -58,6 +72,7 @@ export function MarkdownText({ text, compact = false }: MarkdownTextProps) {
|
||||
}
|
||||
});
|
||||
flushList();
|
||||
flushOrderedList();
|
||||
flushCode();
|
||||
|
||||
return <div className={compact ? 'line-clamp-3' : ''}>{blocks}</div>;
|
||||
|
||||
@@ -70,6 +70,47 @@ export interface SettingsActor {
|
||||
tenant: string;
|
||||
}
|
||||
|
||||
export interface ApprovalDelegation {
|
||||
project?: string;
|
||||
action?: string;
|
||||
level?: string;
|
||||
risk?: string;
|
||||
sensitive?: boolean;
|
||||
requires_approval?: boolean;
|
||||
reason?: string;
|
||||
}
|
||||
|
||||
export interface ApprovalProposal {
|
||||
id: string;
|
||||
status: 'pending' | 'approved' | 'rejected' | 'auto_allowed' | string;
|
||||
project: string;
|
||||
action: string;
|
||||
target: string;
|
||||
risk?: string;
|
||||
sensitive?: boolean;
|
||||
proposer: string;
|
||||
reason: string;
|
||||
payload: Record<string, unknown>;
|
||||
delegation?: ApprovalDelegation;
|
||||
created_at: string;
|
||||
decided_at?: string | null;
|
||||
approver?: string | null;
|
||||
decision_reason?: string | null;
|
||||
}
|
||||
|
||||
export interface ApprovalOversightRecord {
|
||||
seq: number;
|
||||
event: string;
|
||||
proposal_id: string;
|
||||
actor: string;
|
||||
action?: string;
|
||||
target?: string;
|
||||
status?: string;
|
||||
reason?: string;
|
||||
at: string;
|
||||
hash?: string;
|
||||
}
|
||||
|
||||
export interface KillSwitchState {
|
||||
count: number;
|
||||
engaged: Array<{ scope: string; id: string; reason?: string; engaged_at?: string; actor?: string; raw?: string }>;
|
||||
@@ -77,8 +118,8 @@ export interface KillSwitchState {
|
||||
|
||||
export interface ApprovalsState {
|
||||
count: number;
|
||||
proposals: any[];
|
||||
oversight: any[];
|
||||
proposals: ApprovalProposal[];
|
||||
oversight: ApprovalOversightRecord[];
|
||||
audit_verify: { ok: boolean; output: string };
|
||||
}
|
||||
|
||||
@@ -343,6 +384,8 @@ export interface GoalProject {
|
||||
domain: string;
|
||||
domain_root: string;
|
||||
context_roots: string[];
|
||||
manifest?: string;
|
||||
shell_root?: string;
|
||||
}
|
||||
|
||||
export interface ChatReplay {
|
||||
@@ -462,9 +505,9 @@ export const api = {
|
||||
post<{ output: string; status: KillSwitchState }>('kill-switch/clear', body, actorHeaders(actor)),
|
||||
approvals: (actor: SettingsActor, status = 'pending') => getWithHeaders<ApprovalsState>(`approvals?status=${status}`, actorHeaders(actor)),
|
||||
submitApproval: (actor: SettingsActor, body: { action: string; target: string; risk?: string; sensitive?: boolean; reason: string; payload?: Record<string, unknown> }) =>
|
||||
post<{ proposal: any; audit_verify: { ok: boolean; output: string } }>('approvals/submit', body, actorHeaders(actor)),
|
||||
post<{ proposal: ApprovalProposal; audit_verify: { ok: boolean; output: string } }>('approvals/submit', body, actorHeaders(actor)),
|
||||
decideApproval: (actor: SettingsActor, body: { id: string; decision: 'approve' | 'reject'; reason: string; approvalJwt?: string }) =>
|
||||
post<{ proposal: any; applied: any; audit_verify: { ok: boolean; output: string } }>('approvals/decide', body, actorHeaders(actor)),
|
||||
post<{ proposal: ApprovalProposal; applied: Record<string, unknown> | null; audit_verify: { ok: boolean; output: string } }>('approvals/decide', body, actorHeaders(actor)),
|
||||
askChat: (actor: SettingsActor, body: { message: string; chatId?: string; agentId?: string; skillId?: string; modelProvider?: string; modelId?: string; delegationLevel?: number }) =>
|
||||
post<ChatAnswer>('chat/ask', body, actorHeaders(actor)),
|
||||
askChatStream: async (
|
||||
|
||||
@@ -1,10 +1,18 @@
|
||||
import { useState } from 'react';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { api, SettingsActor } from '../lib/api';
|
||||
import { api, type ApprovalProposal, type SettingsActor } from '../lib/api';
|
||||
import { Card, StatusBadge } from '../components/ui/Card';
|
||||
|
||||
const ROLES = ['viewer', 'project-admin', 'approver', 'org-admin', 'auditor'];
|
||||
const STATUS = ['pending', 'approved', 'rejected', 'auto_allowed', 'all'];
|
||||
const STATUS_OPTIONS = [
|
||||
{ value: 'pending', label: 'Needs review' },
|
||||
{ value: 'approved', label: 'Approved' },
|
||||
{ value: 'rejected', label: 'Rejected' },
|
||||
{ value: 'auto_allowed', label: 'Auto allowed' },
|
||||
{ value: 'all', label: 'All decisions' },
|
||||
] as const;
|
||||
|
||||
type ApprovalStatus = (typeof STATUS_OPTIONS)[number]['value'];
|
||||
type Notice = { tone: 'success' | 'error'; text: string };
|
||||
|
||||
function parseValue(raw: string): unknown {
|
||||
try {
|
||||
@@ -14,166 +22,239 @@ function parseValue(raw: string): unknown {
|
||||
}
|
||||
}
|
||||
|
||||
function errorMessage(error: unknown, fallback: string): string {
|
||||
if (typeof error === 'object' && error !== null) {
|
||||
const candidate = error as { message?: string; response?: { data?: { message?: string } } };
|
||||
return candidate.response?.data?.message || candidate.message || fallback;
|
||||
}
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function formatTimestamp(value: string): string {
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return value;
|
||||
return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date);
|
||||
}
|
||||
|
||||
function canReview(actor: SettingsActor): boolean {
|
||||
return actor.role === 'approver' || actor.role === 'org-admin';
|
||||
}
|
||||
|
||||
function canSubmitSettings(actor: SettingsActor): boolean {
|
||||
return actor.role === 'project-admin' || actor.role === 'org-admin';
|
||||
}
|
||||
|
||||
function reviewEligibility(actor: SettingsActor, proposal: ApprovalProposal): { allowed: boolean; reason: string } {
|
||||
if (proposal.status !== 'pending') return { allowed: false, reason: 'Decision recorded' };
|
||||
if (!canReview(actor)) return { allowed: false, reason: 'Independent Reviewer access required' };
|
||||
if (proposal.proposer === actor.actor) return { allowed: false, reason: 'A separate reviewer must decide' };
|
||||
return { allowed: true, reason: 'Ready for independent review' };
|
||||
}
|
||||
|
||||
export function Approvals() {
|
||||
const queryClient = useQueryClient();
|
||||
const [actor, setActor] = useState<SettingsActor>({ actor: 'alice', role: 'project-admin', project: 'default', tenant: 'default' });
|
||||
const [status, setStatus] = useState('pending');
|
||||
const [key, setKey] = useState('security.strict');
|
||||
const [value, setValue] = useState('true');
|
||||
const [status, setStatus] = useState<ApprovalStatus>('pending');
|
||||
const [decisionReason, setDecisionReason] = useState('Reviewed scope, evidence and execution controls');
|
||||
const [settingKey, setSettingKey] = useState('security.strict');
|
||||
const [settingValue, setSettingValue] = useState('true');
|
||||
const [sensitive, setSensitive] = useState(true);
|
||||
const [reason, setReason] = useState('review requested from Control Panel');
|
||||
const [decisionReason, setDecisionReason] = useState('reviewed in approval inbox');
|
||||
const [approvalJwt, setApprovalJwt] = useState('');
|
||||
const [message, setMessage] = useState<string | null>(null);
|
||||
const [requestReason, setRequestReason] = useState('Security-sensitive setting change requested');
|
||||
const [notice, setNotice] = useState<Notice | null>(null);
|
||||
|
||||
const session = useQuery({
|
||||
queryKey: ['session'],
|
||||
queryFn: api.session,
|
||||
staleTime: 0,
|
||||
refetchOnMount: 'always',
|
||||
retry: false,
|
||||
});
|
||||
const actor = session.data;
|
||||
|
||||
const inbox = useQuery({
|
||||
queryKey: ['approvals', actor, status],
|
||||
queryFn: () => api.approvals(actor, status),
|
||||
queryKey: ['approvals', actor?.actor, actor?.role, actor?.project, actor?.tenant, status],
|
||||
queryFn: () => api.approvals(actor as SettingsActor, status),
|
||||
enabled: Boolean(actor),
|
||||
retry: false,
|
||||
refetchOnMount: 'always',
|
||||
});
|
||||
|
||||
const submit = useMutation({
|
||||
mutationFn: () => api.submitApproval(actor, {
|
||||
action: 'settings.write',
|
||||
target: key,
|
||||
risk: sensitive ? 'high' : 'standard',
|
||||
sensitive,
|
||||
reason,
|
||||
payload: { key, value: parseValue(value) },
|
||||
}),
|
||||
onSuccess: (res) => {
|
||||
setMessage(`submitted ${res.proposal.id} status=${res.proposal.status}`);
|
||||
mutationFn: () => {
|
||||
if (!actor) throw new Error('Authenticated session is unavailable.');
|
||||
return api.submitApproval(actor, {
|
||||
action: 'settings.write',
|
||||
target: settingKey.trim(),
|
||||
risk: sensitive ? 'high' : 'standard',
|
||||
sensitive,
|
||||
reason: requestReason.trim(),
|
||||
payload: { key: settingKey.trim(), value: parseValue(settingValue) },
|
||||
});
|
||||
},
|
||||
onSuccess: (response) => {
|
||||
setNotice({ tone: 'success', text: `Request ${response.proposal.id} is ready for independent review.` });
|
||||
setStatus('pending');
|
||||
void queryClient.invalidateQueries({ queryKey: ['approvals'] });
|
||||
},
|
||||
onError: (err: any) => setMessage(err?.response?.data?.message || err.message || 'submit failed'),
|
||||
onError: (error) => setNotice({ tone: 'error', text: errorMessage(error, 'The change request could not be submitted.') }),
|
||||
});
|
||||
|
||||
const decide = useMutation({
|
||||
mutationFn: ({ id, decision }: { id: string; decision: 'approve' | 'reject' }) =>
|
||||
api.decideApproval(actor, { id, decision, reason: decisionReason, approvalJwt: approvalJwt || undefined }),
|
||||
onSuccess: (res) => {
|
||||
setMessage(`${res.proposal.status} ${res.proposal.id}${res.applied ? ` applied v${res.applied.version}` : ''}`);
|
||||
mutationFn: ({ id, decision }: { id: string; decision: 'approve' | 'reject' }) => {
|
||||
if (!actor) throw new Error('Authenticated session is unavailable.');
|
||||
return api.decideApproval(actor, { id, decision, reason: decisionReason.trim() });
|
||||
},
|
||||
onSuccess: (response) => {
|
||||
const verb = response.proposal.status === 'approved' ? 'approved' : 'rejected';
|
||||
setNotice({ tone: 'success', text: `Request ${response.proposal.id} was ${verb}.` });
|
||||
void queryClient.invalidateQueries({ queryKey: ['approvals'] });
|
||||
void queryClient.invalidateQueries({ queryKey: ['settings'] });
|
||||
void queryClient.invalidateQueries({ queryKey: ['goals'] });
|
||||
void queryClient.invalidateQueries({ queryKey: ['goal'] });
|
||||
},
|
||||
onError: (err: any) => setMessage(err?.response?.data?.message || err.message || 'decision failed'),
|
||||
onError: (error) => setNotice({ tone: 'error', text: errorMessage(error, 'The approval decision could not be recorded.') }),
|
||||
});
|
||||
|
||||
if (inbox.isLoading || !inbox.data) return <div className="text-gray-500">Loading…</div>;
|
||||
if (session.isLoading || (actor && inbox.isLoading)) {
|
||||
return (
|
||||
<div className="space-y-4" aria-label="Loading approval inbox">
|
||||
<div className="h-36 animate-pulse rounded-3xl bg-slate-200 motion-reduce:animate-none" />
|
||||
<div className="h-72 animate-pulse rounded-3xl bg-slate-100 motion-reduce:animate-none" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (session.isError || !actor) {
|
||||
return (
|
||||
<div role="alert" className="rounded-2xl border border-rose-200 bg-rose-50 p-5 text-sm text-rose-800">
|
||||
<div className="font-semibold">Your authenticated session could not be loaded.</div>
|
||||
<p className="mt-1">Sign in again, then reopen the approval inbox.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (inbox.isError || !inbox.data) {
|
||||
return (
|
||||
<div role="alert" className="rounded-2xl border border-rose-200 bg-rose-50 p-5 text-sm text-rose-800">
|
||||
<div className="font-semibold">The approval inbox is unavailable for this session.</div>
|
||||
<p className="mt-1">{errorMessage(inbox.error, 'Verify that this identity has monitoring access.')}</p>
|
||||
<button type="button" onClick={() => void inbox.refetch()} className="mt-4 rounded-lg bg-rose-700 px-4 py-2 text-xs font-semibold text-white transition hover:bg-rose-800 focus:outline-none focus:ring-4 focus:ring-rose-200">Try again</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const pendingCount = status === 'pending' ? inbox.data.count : inbox.data.proposals.filter((proposal) => proposal.status === 'pending').length;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card title="Approval identity" right={<StatusBadge value={inbox.data.audit_verify.ok ? 'audit ok' : 'audit fail'} />}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-5 gap-3 text-sm">
|
||||
<label className="space-y-1">
|
||||
<span className="text-gray-500">Actor</span>
|
||||
<input className="w-full rounded border border-gray-300 px-3 py-2" value={actor.actor}
|
||||
onChange={(e) => setActor({ ...actor, actor: e.target.value })} />
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-gray-500">Role</span>
|
||||
<select className="w-full rounded border border-gray-300 px-3 py-2" value={actor.role}
|
||||
onChange={(e) => setActor({ ...actor, role: e.target.value })}>
|
||||
{ROLES.map((r) => <option key={r} value={r}>{r}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-gray-500">Project</span>
|
||||
<input className="w-full rounded border border-gray-300 px-3 py-2" value={actor.project}
|
||||
onChange={(e) => setActor({ ...actor, project: e.target.value })} />
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-gray-500">Tenant</span>
|
||||
<input className="w-full rounded border border-gray-300 px-3 py-2" value={actor.tenant}
|
||||
onChange={(e) => setActor({ ...actor, tenant: e.target.value })} />
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-gray-500">Status</span>
|
||||
<select className="w-full rounded border border-gray-300 px-3 py-2" value={status} onChange={(e) => setStatus(e.target.value)}>
|
||||
{STATUS.map((s) => <option key={s} value={s}>{s}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card title="Submit settings proposal">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
|
||||
<label className="space-y-1">
|
||||
<span className="text-gray-500">Setting key</span>
|
||||
<input className="w-full rounded border border-gray-300 px-3 py-2" value={key} onChange={(e) => setKey(e.target.value)} />
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-gray-500">Value (JSON or string)</span>
|
||||
<input className="w-full rounded border border-gray-300 px-3 py-2" value={value} onChange={(e) => setValue(e.target.value)} />
|
||||
</label>
|
||||
<label className="space-y-1 md:col-span-2">
|
||||
<span className="text-gray-500">Reason</span>
|
||||
<input className="w-full rounded border border-gray-300 px-3 py-2" value={reason} onChange={(e) => setReason(e.target.value)} />
|
||||
</label>
|
||||
<label className="flex items-center gap-2">
|
||||
<input type="checkbox" checked={sensitive} onChange={(e) => setSensitive(e.target.checked)} />
|
||||
<span className="text-gray-700">Security-sensitive / high risk</span>
|
||||
</label>
|
||||
<div>
|
||||
<button className="rounded bg-blue-600 px-4 py-2 text-white disabled:bg-gray-300"
|
||||
disabled={submit.isPending} onClick={() => submit.mutate()}>
|
||||
Submit proposal
|
||||
</button>
|
||||
<div className="space-y-5 pb-6">
|
||||
<header className="overflow-hidden rounded-[1.6rem] border border-slate-200 bg-slate-950 px-6 py-7 text-white shadow-[0_22px_55px_rgba(15,23,42,0.16)] sm:px-8">
|
||||
<div className="flex flex-wrap items-end justify-between gap-6">
|
||||
<div className="max-w-2xl">
|
||||
<p className="text-[10px] font-bold uppercase tracking-[0.2em] text-teal-300">Independent control</p>
|
||||
<h1 className="mt-2 text-3xl font-semibold tracking-[-0.035em]">Approval inbox</h1>
|
||||
<p className="mt-3 text-sm leading-6 text-slate-300">Review governed changes using the identity from your authenticated session. Proposers cannot approve their own request.</p>
|
||||
</div>
|
||||
<div className="grid min-w-72 grid-cols-2 gap-px overflow-hidden rounded-xl border border-white/10 bg-white/10 text-center">
|
||||
<div className="bg-slate-900 px-4 py-3"><div className="font-mono text-2xl font-semibold text-amber-300">{pendingCount}</div><div className="text-[9px] font-bold uppercase tracking-wide text-slate-500">Needs review</div></div>
|
||||
<div className="bg-slate-900 px-4 py-3"><div className="truncate text-sm font-semibold text-white">{actor.actor}</div><div className="mt-1 text-[9px] font-bold uppercase tracking-wide text-teal-300">{actor.role}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
{message && <div className="mt-3 rounded border border-gray-200 bg-gray-50 p-3 text-sm text-gray-700">{message}</div>}
|
||||
</Card>
|
||||
</header>
|
||||
|
||||
<Card title="Inbox">
|
||||
<div className="space-y-3">
|
||||
<label className="block space-y-1 text-sm">
|
||||
<span className="text-gray-500">Decision reason</span>
|
||||
<input className="w-full rounded border border-gray-300 px-3 py-2" value={decisionReason} onChange={(e) => setDecisionReason(e.target.value)} />
|
||||
<Card
|
||||
title="Review queue"
|
||||
right={<div className="flex items-center gap-2"><StatusBadge value={inbox.data.audit_verify.ok ? 'audit ok' : 'audit fail'} /><span className="hidden text-xs text-slate-400 sm:inline">{actor.tenant} / {actor.project}</span></div>}
|
||||
>
|
||||
<div className="flex flex-wrap items-end justify-between gap-4 border-b border-slate-100 pb-5">
|
||||
<label className="block min-w-52 text-sm">
|
||||
<span className="font-semibold text-slate-700">Queue</span>
|
||||
<select value={status} onChange={(event) => setStatus(event.target.value as ApprovalStatus)} className="mt-2 w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm text-slate-800 outline-none transition hover:border-slate-300 focus:border-teal-500 focus:ring-4 focus:ring-teal-100">
|
||||
{STATUS_OPTIONS.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
<label className="block space-y-1 text-sm">
|
||||
<span className="text-gray-500">Approval JWT</span>
|
||||
<input className="w-full rounded border border-gray-300 px-3 py-2 font-mono text-xs" value={approvalJwt} onChange={(e) => setApprovalJwt(e.target.value)} />
|
||||
</label>
|
||||
{inbox.data.proposals.map((p) => (
|
||||
<div key={p.id} className="rounded border border-gray-200 p-4">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<div className="font-medium text-gray-800">{p.id} · {p.action} · {p.target}</div>
|
||||
<div className="text-xs text-gray-500">{p.proposer} · {p.created_at} · {p.delegation?.level} · {p.delegation?.reason}</div>
|
||||
{canReview(actor) && (
|
||||
<label className="block min-w-[280px] flex-1 text-sm sm:max-w-xl">
|
||||
<span className="font-semibold text-slate-700">Decision rationale</span>
|
||||
<input value={decisionReason} onChange={(event) => setDecisionReason(event.target.value)} maxLength={500} className="mt-2 w-full rounded-xl border border-slate-200 px-3 py-2.5 text-sm text-slate-800 outline-none transition hover:border-slate-300 focus:border-teal-500 focus:ring-4 focus:ring-teal-100" />
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{notice && <div aria-live="polite" className={`mt-4 rounded-xl border p-3 text-sm font-medium ${notice.tone === 'success' ? 'border-emerald-200 bg-emerald-50 text-emerald-800' : 'border-rose-200 bg-rose-50 text-rose-800'}`}>{notice.text}</div>}
|
||||
|
||||
<div className="mt-5 space-y-3">
|
||||
{inbox.data.proposals.map((proposal) => {
|
||||
const eligibility = reviewEligibility(actor, proposal);
|
||||
const isCurrentDecision = decide.isPending && decide.variables?.id === proposal.id;
|
||||
return (
|
||||
<article key={proposal.id} className="rounded-2xl border border-slate-200 bg-white p-4 transition hover:border-slate-300 hover:shadow-[0_12px_28px_rgba(15,23,42,0.055)] sm:p-5">
|
||||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center gap-2"><StatusBadge value={proposal.status} /><span className="font-mono text-[10px] text-slate-400">{proposal.id}</span>{proposal.risk && <span className="rounded-full bg-slate-100 px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-slate-500">{proposal.risk} risk</span>}</div>
|
||||
<h2 className="mt-3 break-words text-base font-semibold text-slate-950">{proposal.action}</h2>
|
||||
<p className="mt-1 break-words text-sm text-slate-600">{proposal.target}</p>
|
||||
</div>
|
||||
<div className="text-right text-xs text-slate-400"><div>{formatTimestamp(proposal.created_at)}</div><div className="mt-1">Project <span className="font-mono text-slate-600">{proposal.project}</span></div></div>
|
||||
</div>
|
||||
<StatusBadge value={p.status} />
|
||||
</div>
|
||||
<div className="mt-2 text-sm text-gray-600">{p.reason}</div>
|
||||
<pre className="mt-2 overflow-auto rounded bg-gray-50 p-2 text-xs text-gray-700">{JSON.stringify(p.payload, null, 2)}</pre>
|
||||
{p.status === 'pending' && (
|
||||
<div className="mt-3 flex gap-2">
|
||||
<button className="rounded bg-green-600 px-3 py-2 text-sm text-white disabled:bg-gray-300"
|
||||
disabled={decide.isPending} onClick={() => decide.mutate({ id: p.id, decision: 'approve' })}>
|
||||
Approve
|
||||
</button>
|
||||
<button className="rounded border border-gray-300 px-3 py-2 text-sm text-gray-700 disabled:text-gray-300"
|
||||
disabled={decide.isPending} onClick={() => decide.mutate({ id: p.id, decision: 'reject' })}>
|
||||
Reject
|
||||
</button>
|
||||
|
||||
<div className="mt-4 grid gap-3 rounded-xl bg-slate-50 p-3 text-xs sm:grid-cols-[minmax(150px,0.35fr)_minmax(0,1fr)]">
|
||||
<div><div className="font-semibold uppercase tracking-wide text-slate-400">Requested by</div><div className="mt-1 font-mono text-slate-700">{proposal.proposer}</div></div>
|
||||
<div><div className="font-semibold uppercase tracking-wide text-slate-400">Reason</div><div className="mt-1 leading-5 text-slate-700">{proposal.reason}</div></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<details className="mt-3 rounded-xl border border-slate-200 bg-white">
|
||||
<summary className="cursor-pointer px-3 py-2.5 text-xs font-semibold text-slate-600 transition hover:bg-slate-50">Inspect request payload</summary>
|
||||
<pre className="max-h-72 overflow-auto border-t border-slate-200 bg-slate-950 p-4 text-xs leading-5 text-slate-100">{JSON.stringify(proposal.payload, null, 2)}</pre>
|
||||
</details>
|
||||
|
||||
{proposal.status === 'pending' && (
|
||||
<div className="mt-4 flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 pt-4">
|
||||
<span className={`text-xs font-medium ${eligibility.allowed ? 'text-emerald-700' : 'text-amber-700'}`}>{eligibility.reason}</span>
|
||||
{eligibility.allowed && (
|
||||
<div className="flex gap-2">
|
||||
<button type="button" disabled={decide.isPending || decisionReason.trim().length < 5} onClick={() => decide.mutate({ id: proposal.id, decision: 'reject' })} className="rounded-lg border border-rose-200 bg-white px-3.5 py-2 text-xs font-semibold text-rose-700 transition hover:bg-rose-50 focus:outline-none focus:ring-4 focus:ring-rose-100 disabled:cursor-not-allowed disabled:opacity-40">{isCurrentDecision && decide.variables?.decision === 'reject' ? 'Rejecting…' : 'Reject'}</button>
|
||||
<button type="button" disabled={decide.isPending || decisionReason.trim().length < 5} onClick={() => decide.mutate({ id: proposal.id, decision: 'approve' })} className="rounded-lg bg-emerald-700 px-4 py-2 text-xs font-semibold text-white transition hover:bg-emerald-800 focus:outline-none focus:ring-4 focus:ring-emerald-100 disabled:cursor-not-allowed disabled:bg-slate-300">{isCurrentDecision && decide.variables?.decision === 'approve' ? 'Approving…' : 'Approve'}</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
|
||||
{inbox.data.proposals.length === 0 && (
|
||||
<div className="rounded-2xl border border-dashed border-slate-200 bg-slate-50 px-5 py-10 text-center">
|
||||
<div className="text-sm font-semibold text-slate-700">No requests in this queue</div>
|
||||
<p className="mt-1 text-xs text-slate-500">New governed requests will appear here for the authenticated reviewer.</p>
|
||||
</div>
|
||||
))}
|
||||
{inbox.data.proposals.length === 0 && <div className="text-sm text-gray-500">No proposals for this status.</div>}
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card title="Oversight log">
|
||||
<div className="space-y-2 max-h-96 overflow-auto">
|
||||
{inbox.data.oversight.slice().reverse().map((o: any) => (
|
||||
<div key={`${o.seq}-${o.hash}`} className="rounded border border-gray-200 p-3 text-sm">
|
||||
<div className="font-medium text-gray-800">{o.event} · {o.proposal_id}</div>
|
||||
<div className="text-xs text-gray-500">{o.actor} · {o.at} · hash {String(o.hash).slice(0, 12)}</div>
|
||||
<div className="text-xs text-gray-600 mt-1">{o.reason}</div>
|
||||
{canSubmitSettings(actor) && (
|
||||
<details className="overflow-hidden rounded-2xl border border-slate-200 bg-white">
|
||||
<summary className="cursor-pointer px-5 py-4 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">Create a settings change request</summary>
|
||||
<div className="grid gap-4 border-t border-slate-200 p-5 text-sm md:grid-cols-2">
|
||||
<label><span className="font-semibold text-slate-700">Setting key</span><input value={settingKey} onChange={(event) => setSettingKey(event.target.value)} className="mt-2 w-full rounded-xl border border-slate-200 px-3 py-2.5 outline-none focus:border-teal-500 focus:ring-4 focus:ring-teal-100" /></label>
|
||||
<label><span className="font-semibold text-slate-700">Value (JSON or text)</span><input value={settingValue} onChange={(event) => setSettingValue(event.target.value)} className="mt-2 w-full rounded-xl border border-slate-200 px-3 py-2.5 outline-none focus:border-teal-500 focus:ring-4 focus:ring-teal-100" /></label>
|
||||
<label className="md:col-span-2"><span className="font-semibold text-slate-700">Reason</span><input value={requestReason} onChange={(event) => setRequestReason(event.target.value)} maxLength={500} className="mt-2 w-full rounded-xl border border-slate-200 px-3 py-2.5 outline-none focus:border-teal-500 focus:ring-4 focus:ring-teal-100" /></label>
|
||||
<label className="flex items-center gap-2 text-slate-700"><input type="checkbox" checked={sensitive} onChange={(event) => setSensitive(event.target.checked)} className="h-4 w-4 rounded border-slate-300 text-teal-700 focus:ring-teal-500" />Security-sensitive / high risk</label>
|
||||
<div className="flex justify-end"><button type="button" disabled={submit.isPending || settingKey.trim().length === 0 || requestReason.trim().length < 5} onClick={() => submit.mutate()} className="rounded-xl bg-slate-950 px-4 py-2.5 text-xs font-semibold text-white transition hover:bg-teal-700 focus:outline-none focus:ring-4 focus:ring-teal-100 disabled:cursor-not-allowed disabled:bg-slate-300">{submit.isPending ? 'Submitting…' : 'Submit for review'}</button></div>
|
||||
</div>
|
||||
</details>
|
||||
)}
|
||||
|
||||
<details className="overflow-hidden rounded-2xl border border-slate-200 bg-white">
|
||||
<summary className="cursor-pointer px-5 py-4 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">Oversight log · {inbox.data.oversight.length} records</summary>
|
||||
<div className="max-h-96 space-y-2 overflow-auto border-t border-slate-200 p-4">
|
||||
{inbox.data.oversight.slice().reverse().map((record) => (
|
||||
<div key={`${record.seq}-${record.hash ?? record.proposal_id}`} className="rounded-xl border border-slate-200 p-3 text-sm">
|
||||
<div className="font-medium text-slate-800">{record.event} · {record.proposal_id}</div>
|
||||
<div className="mt-1 text-xs text-slate-400">{record.actor} · {formatTimestamp(record.at)}{record.hash ? ` · hash ${record.hash.slice(0, 12)}` : ''}</div>
|
||||
{record.reason && <div className="mt-1 text-xs leading-5 text-slate-600">{record.reason}</div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
</details>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,14 +1,22 @@
|
||||
import { useState } from 'react';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { Link, useSearchParams } from 'react-router-dom';
|
||||
import { api, type GoalJob, type SettingsActor } from '../lib/api';
|
||||
import { api, type GoalJob, type GoalProject, type SettingsActor } from '../lib/api';
|
||||
import { Card, StatusBadge } from '../components/ui/Card';
|
||||
import { TraceExplorer } from '../components/trace/TraceExplorer';
|
||||
import { MarkdownText } from '../components/ui/MarkdownText';
|
||||
import { GovernedOutcomePulse, ModelInteractionDiagram } from '../components/goals/ModelInteractionDiagram';
|
||||
import { RichTextGoalEditor } from '../components/goals/RichTextGoalEditor';
|
||||
|
||||
const DEFAULT_ACTOR: SettingsActor = { actor: 'local-operator', role: 'org-admin', project: 'default', tenant: 'default' };
|
||||
const TERMINAL = new Set<GoalJob['status']>(['completed', 'degraded', 'failed', 'requires_approval']);
|
||||
const PROJECT_ID = /^[a-z][a-z0-9-]{1,62}$/;
|
||||
const PROJECT_NAME = /^[\p{L}\p{N}][\p{L}\p{N} .&()'_-]{1,99}$/u;
|
||||
|
||||
const EXAMPLES = [
|
||||
'Audit the authentication flow, identify production risks, and propose a verified remediation plan.',
|
||||
'Design a release plan with rollback, observability, security controls, and measurable acceptance criteria.',
|
||||
'Review the current architecture against the requirements and return a traceable implementation backlog.',
|
||||
];
|
||||
|
||||
function errorMessage(error: unknown): string {
|
||||
if (typeof error === 'object' && error !== null) {
|
||||
@@ -18,28 +26,139 @@ function errorMessage(error: unknown): string {
|
||||
return 'Goal orchestration could not start.';
|
||||
}
|
||||
|
||||
function WorkerCard({ title, subtitle, status, detail, provider, model }: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
status: string;
|
||||
detail: string;
|
||||
provider: string;
|
||||
model: string;
|
||||
function formatTimestamp(value: string): string {
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return value;
|
||||
return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date);
|
||||
}
|
||||
|
||||
function WorkspacePanel({
|
||||
projects,
|
||||
selectedId,
|
||||
onSelect,
|
||||
loading,
|
||||
error,
|
||||
creating,
|
||||
onCreatingChange,
|
||||
newProjectId,
|
||||
newProjectDomain,
|
||||
onProjectIdChange,
|
||||
onProjectDomainChange,
|
||||
onCreate,
|
||||
createPending,
|
||||
createError,
|
||||
}: {
|
||||
projects: GoalProject[];
|
||||
selectedId: string;
|
||||
onSelect: (value: string) => void;
|
||||
loading: boolean;
|
||||
error: boolean;
|
||||
creating: boolean;
|
||||
onCreatingChange: (value: boolean) => void;
|
||||
newProjectId: string;
|
||||
newProjectDomain: string;
|
||||
onProjectIdChange: (value: string) => void;
|
||||
onProjectDomainChange: (value: string) => void;
|
||||
onCreate: () => void;
|
||||
createPending: boolean;
|
||||
createError: unknown;
|
||||
}) {
|
||||
const busy = status === 'running';
|
||||
const selected = projects.find((project) => project.project_id === selectedId);
|
||||
const validProject = PROJECT_ID.test(newProjectId.trim()) && PROJECT_NAME.test(newProjectDomain.trim());
|
||||
return (
|
||||
<div className="relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
|
||||
{busy && <div className="absolute inset-x-0 top-0 h-0.5 overflow-hidden bg-blue-100"><div className="h-full w-1/3 animate-pulse rounded-full bg-blue-500" /></div>}
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div><h3 className="font-semibold text-slate-900">{title}</h3><p className="mt-1 text-xs text-slate-500">{subtitle}</p></div>
|
||||
<StatusBadge value={status} />
|
||||
<aside className="overflow-hidden rounded-[1.35rem] border border-slate-200 bg-slate-950 text-white shadow-[0_22px_55px_rgba(15,23,42,0.16)]">
|
||||
<div className="border-b border-white/10 px-5 pb-5 pt-5">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-[10px] font-bold uppercase tracking-[0.18em] text-teal-300">Bounded workspace</p>
|
||||
<h2 className="mt-1 text-base font-semibold tracking-tight">Choose the evidence boundary</h2>
|
||||
</div>
|
||||
<span className="rounded-lg bg-white/10 px-2 py-1 font-mono text-[10px] text-slate-300">{projects.length} active</span>
|
||||
</div>
|
||||
<p className="mt-2 max-w-[45ch] text-xs leading-5 text-slate-400">Models receive a redacted snapshot of the selected allowlisted roots. They never receive direct filesystem access.</p>
|
||||
</div>
|
||||
<p className="mt-4 min-h-10 text-sm leading-5 text-slate-600">{detail}</p>
|
||||
<div className="mt-4 border-t border-slate-100 pt-3 text-[11px] text-slate-400">
|
||||
<div className="font-medium text-slate-500">{provider || 'not selected'}</div>
|
||||
<div className="mt-1 break-all font-mono">{model || 'model unavailable'}</div>
|
||||
|
||||
<div className="p-5">
|
||||
<label htmlFor="goal-project" className="text-xs font-semibold text-slate-200">Project</label>
|
||||
<select
|
||||
id="goal-project"
|
||||
value={selectedId}
|
||||
onChange={(event) => onSelect(event.target.value)}
|
||||
disabled={loading || projects.length === 0}
|
||||
className="mt-2 w-full rounded-xl border border-white/15 bg-slate-900 px-3.5 py-3 text-sm text-white outline-none transition hover:border-white/25 focus:border-teal-400 focus:ring-4 focus:ring-teal-400/10 disabled:opacity-50"
|
||||
>
|
||||
{projects.map((project) => <option key={project.project_id} value={project.project_id}>{project.domain} · {project.project_id}</option>)}
|
||||
</select>
|
||||
{error && <p role="alert" className="mt-2 text-xs font-medium text-rose-300">The allowlisted project registry is unavailable.</p>}
|
||||
|
||||
{selected && (
|
||||
<div className="mt-4 space-y-3 rounded-xl border border-white/10 bg-white/[0.045] p-3.5">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="text-xs font-semibold text-white">{selected.domain}</span>
|
||||
<span className="flex items-center gap-1.5 text-[10px] font-semibold text-emerald-300"><i className="h-1.5 w-1.5 rounded-full bg-emerald-400" />Ready</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] font-bold uppercase tracking-wide text-slate-500">Context roots</div>
|
||||
<div className="mt-1 break-all font-mono text-[10px] leading-5 text-slate-300">{selected.context_roots.join(', ')}</div>
|
||||
</div>
|
||||
{selected.manifest && <div className="break-all border-t border-white/10 pt-2 font-mono text-[10px] leading-5 text-slate-500">{selected.manifest}</div>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onCreatingChange(!creating)}
|
||||
className="mt-4 flex w-full items-center justify-between rounded-xl border border-dashed border-slate-600 px-3.5 py-2.5 text-left text-xs font-semibold text-slate-300 transition hover:border-teal-400/70 hover:bg-teal-400/5 hover:text-white focus:outline-none focus:ring-2 focus:ring-teal-400"
|
||||
aria-expanded={creating}
|
||||
>
|
||||
<span>{creating ? 'Close project setup' : 'Create production project shell'}</span>
|
||||
<span aria-hidden="true" className="text-lg font-light leading-none">{creating ? '−' : '+'}</span>
|
||||
</button>
|
||||
|
||||
{creating && (
|
||||
<div className="mt-4 space-y-3 border-t border-white/10 pt-4">
|
||||
<div className="rounded-xl bg-teal-400/10 p-3 text-[11px] leading-5 text-teal-100">
|
||||
Creates an isolated NestJS + React shell, manifest, quality profile, harness, CI workflow and tests under <span className="font-mono">apps/projects/<id></span>. The repository-level <span className="font-mono">.github</span> remains unchanged.
|
||||
</div>
|
||||
<label className="block">
|
||||
<span className="text-[11px] font-semibold text-slate-300">Project ID</span>
|
||||
<input value={newProjectId} onChange={(event) => onProjectIdChange(event.target.value.toLowerCase())} placeholder="customer-portal" maxLength={63} className="mt-1.5 w-full rounded-xl border border-white/15 bg-slate-900 px-3 py-2.5 text-sm text-white outline-none placeholder:text-slate-600 focus:border-teal-400 focus:ring-4 focus:ring-teal-400/10" />
|
||||
{newProjectId && !PROJECT_ID.test(newProjectId.trim()) && <span className="mt-1 block text-[10px] text-amber-300">Use lowercase letters, numbers and hyphens.</span>}
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="text-[11px] font-semibold text-slate-300">Display name</span>
|
||||
<input value={newProjectDomain} onChange={(event) => onProjectDomainChange(event.target.value)} placeholder="Customer Portal" maxLength={100} className="mt-1.5 w-full rounded-xl border border-white/15 bg-slate-900 px-3 py-2.5 text-sm text-white outline-none placeholder:text-slate-600 focus:border-teal-400 focus:ring-4 focus:ring-teal-400/10" />
|
||||
{newProjectDomain && !PROJECT_NAME.test(newProjectDomain.trim()) && <span className="mt-1 block text-[10px] text-amber-300">Use letters, numbers, spaces and common name punctuation.</span>}
|
||||
</label>
|
||||
<button type="button" disabled={!validProject || createPending} onClick={onCreate} className="w-full rounded-xl bg-teal-500 px-4 py-2.5 text-sm font-semibold text-slate-950 transition hover:bg-teal-400 active:translate-y-px disabled:cursor-not-allowed disabled:bg-slate-700 disabled:text-slate-500">
|
||||
{createPending ? 'Building governed shell…' : 'Create and select project'}
|
||||
</button>
|
||||
{Boolean(createError) && <div role="alert" className="rounded-xl border border-rose-400/25 bg-rose-400/10 p-3 text-xs font-medium text-rose-200">{errorMessage(createError)}</div>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
function RecentGoals({ jobs, selectedId, loading, onSelect }: { jobs: GoalJob[]; selectedId: string; loading: boolean; onSelect: (id: string) => void }) {
|
||||
return (
|
||||
<section className="rounded-[1.35rem] border border-slate-200 bg-white p-4 shadow-[0_14px_36px_rgba(15,23,42,0.045)]" aria-labelledby="recent-goals-heading">
|
||||
<div className="flex items-center justify-between gap-3 px-1">
|
||||
<h2 id="recent-goals-heading" className="text-sm font-semibold text-slate-900">Recent objectives</h2>
|
||||
<span className="font-mono text-[10px] text-slate-400">{jobs.length.toString().padStart(2, '0')}</span>
|
||||
</div>
|
||||
<div className="mt-3 space-y-1.5">
|
||||
{jobs.slice(0, 8).map((item) => (
|
||||
<button key={item.id} type="button" onClick={() => onSelect(item.id)} className={`group w-full rounded-xl px-3 py-3 text-left transition focus:outline-none focus:ring-2 focus:ring-teal-500 ${selectedId === item.id ? 'bg-teal-50 shadow-[inset_3px_0_0_#0f766e]' : 'hover:bg-slate-50'}`}>
|
||||
<div className="line-clamp-2 text-xs font-medium leading-5 text-slate-700 group-hover:text-slate-950">{item.goal.replace(/[#*_`>\[\]]/g, '').slice(0, 135)}</div>
|
||||
<div className="mt-2 flex items-center justify-between gap-2"><span className="text-[10px] text-slate-400">{formatTimestamp(item.created_at)}</span><StatusBadge value={item.status} /></div>
|
||||
</button>
|
||||
))}
|
||||
{!loading && jobs.length === 0 && <div className="rounded-xl bg-slate-50 px-4 py-6 text-center"><p className="text-sm font-medium text-slate-700">No objectives yet</p><p className="mt-1 text-xs leading-5 text-slate-400">Your first governed run will appear here.</p></div>}
|
||||
{loading && <div className="space-y-2" aria-label="Loading recent objectives">{[0, 1, 2].map((item) => <div key={item} className="h-16 animate-pulse rounded-xl bg-slate-100 motion-reduce:animate-none" />)}</div>}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -49,21 +168,30 @@ export function Goals() {
|
||||
const [creatingProject, setCreatingProject] = useState(false);
|
||||
const [newProjectId, setNewProjectId] = useState('');
|
||||
const [newProjectDomain, setNewProjectDomain] = useState('');
|
||||
const [approver, setApprover] = useState('goal-reviewer');
|
||||
const [approvalReason, setApprovalReason] = useState('Reviewed patch scope and verification plan');
|
||||
const [actor] = useState(DEFAULT_ACTOR);
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const selectedId = searchParams.get('id') ?? '';
|
||||
const queryClient = useQueryClient();
|
||||
const projectsQuery = useQuery({ queryKey: ['goal-projects', actor], queryFn: () => api.goalProjects(actor) });
|
||||
|
||||
const sessionQuery = useQuery({ queryKey: ['session'], queryFn: api.session, staleTime: 0, refetchOnMount: 'always', retry: false });
|
||||
const actor = sessionQuery.data;
|
||||
|
||||
const projectsQuery = useQuery({
|
||||
queryKey: ['goal-projects', actor?.actor, actor?.role, actor?.tenant],
|
||||
queryFn: () => api.goalProjects(actor as SettingsActor),
|
||||
enabled: Boolean(actor),
|
||||
});
|
||||
const projects = projectsQuery.data?.projects ?? [];
|
||||
const effectiveProject = projectId || projects[0]?.project_id || '';
|
||||
|
||||
const listQuery = useQuery({ queryKey: ['goals', actor], queryFn: () => api.goals(actor, 20) });
|
||||
const listQuery = useQuery({
|
||||
queryKey: ['goals', actor?.actor, actor?.role, actor?.tenant],
|
||||
queryFn: () => api.goals(actor as SettingsActor, 20),
|
||||
enabled: Boolean(actor),
|
||||
});
|
||||
const selectedQuery = useQuery({
|
||||
queryKey: ['goal', actor, selectedId],
|
||||
queryFn: () => api.goal(actor, selectedId),
|
||||
enabled: Boolean(selectedId),
|
||||
queryKey: ['goal', actor?.actor, actor?.role, actor?.tenant, selectedId],
|
||||
queryFn: () => api.goal(actor as SettingsActor, selectedId),
|
||||
enabled: Boolean(actor && selectedId),
|
||||
refetchInterval: (query) => {
|
||||
const current = query.state.data as GoalJob | undefined;
|
||||
return current && TERMINAL.has(current.status) ? false : 1500;
|
||||
@@ -76,16 +204,22 @@ export function Goals() {
|
||||
refetchInterval: (query) => query.state.data?.terminal ? false : 1200,
|
||||
});
|
||||
const start = useMutation({
|
||||
mutationFn: () => api.startGoal({ ...actor, project: effectiveProject }, goal.trim(), effectiveProject),
|
||||
mutationFn: () => {
|
||||
if (!actor) throw new Error('Authenticated session is unavailable.');
|
||||
return api.startGoal({ ...actor, project: effectiveProject }, goal.trim(), effectiveProject);
|
||||
},
|
||||
onSuccess: (job) => {
|
||||
setSearchParams({ id: job.id });
|
||||
setGoal('');
|
||||
queryClient.setQueryData(['goal', actor, job.id], job);
|
||||
queryClient.setQueryData(['goal', actor?.actor, actor?.role, actor?.tenant, job.id], job);
|
||||
void queryClient.invalidateQueries({ queryKey: ['goals'] });
|
||||
},
|
||||
});
|
||||
const createProject = useMutation({
|
||||
mutationFn: () => api.createGoalProject(actor, { projectId: newProjectId.trim(), domain: newProjectDomain.trim() }),
|
||||
mutationFn: () => {
|
||||
if (!actor) throw new Error('Authenticated session is unavailable.');
|
||||
return api.createGoalProject(actor, { projectId: newProjectId.trim(), domain: newProjectDomain.trim() });
|
||||
},
|
||||
onSuccess: (project) => {
|
||||
setProjectId(project.project_id);
|
||||
setNewProjectId('');
|
||||
@@ -96,21 +230,25 @@ export function Goals() {
|
||||
});
|
||||
const approveAndApply = useMutation({
|
||||
mutationFn: async (job: GoalJob) => {
|
||||
if (!actor) throw new Error('Authenticated session is unavailable.');
|
||||
if (!job.approval) throw new Error('Approval proposal is unavailable.');
|
||||
const reviewer: SettingsActor = { actor: approver.trim(), role: 'org-admin', project: job.project, tenant: job.tenant };
|
||||
const reviewer: SettingsActor = { ...actor, project: job.project, tenant: job.tenant };
|
||||
await api.decideApproval(reviewer, { id: job.approval.id, decision: 'approve', reason: approvalReason.trim() });
|
||||
return api.applyGoal(reviewer, job.id);
|
||||
},
|
||||
onSuccess: (job) => {
|
||||
queryClient.setQueryData(['goal', actor, job.id], job);
|
||||
queryClient.setQueryData(['goal', actor?.actor, actor?.role, actor?.tenant, job.id], job);
|
||||
void queryClient.invalidateQueries({ queryKey: ['goals'] });
|
||||
void queryClient.invalidateQueries({ queryKey: ['approvals'] });
|
||||
},
|
||||
});
|
||||
const retryApply = useMutation({
|
||||
mutationFn: (job: GoalJob) => api.applyGoal({ actor: approver.trim(), role: 'org-admin', project: job.project, tenant: job.tenant }, job.id),
|
||||
mutationFn: (job: GoalJob) => {
|
||||
if (!actor) throw new Error('Authenticated session is unavailable.');
|
||||
return api.applyGoal({ ...actor, project: job.project, tenant: job.tenant }, job.id);
|
||||
},
|
||||
onSuccess: (job) => {
|
||||
queryClient.setQueryData(['goal', actor, job.id], job);
|
||||
queryClient.setQueryData(['goal', actor?.actor, actor?.role, actor?.tenant, job.id], job);
|
||||
void queryClient.invalidateQueries({ queryKey: ['goals'] });
|
||||
},
|
||||
});
|
||||
@@ -118,111 +256,155 @@ export function Goals() {
|
||||
const selected = selectedQuery.data;
|
||||
const localStage = selected?.stages.find((stage) => stage.id === 'local-worker');
|
||||
const cloudStage = selected?.stages.find((stage) => stage.id === 'cloud-reviewer');
|
||||
const recent = listQuery.data?.goals ?? [];
|
||||
const reviewerCanDecide = Boolean(actor && (actor.role === 'approver' || actor.role === 'org-admin') && selected && actor.actor !== selected.actor);
|
||||
|
||||
if (sessionQuery.isLoading) {
|
||||
return <div className="h-72 animate-pulse rounded-3xl bg-slate-100 motion-reduce:animate-none" aria-label="Loading authenticated Goal Orchestrator" />;
|
||||
}
|
||||
|
||||
if (sessionQuery.isError || !actor) {
|
||||
return <div role="alert" className="rounded-2xl border border-rose-200 bg-rose-50 p-5 text-sm text-rose-800"><div className="font-semibold">Your authenticated session could not be loaded.</div><p className="mt-1">Sign in again before opening Goal Orchestrator.</p></div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<section className="overflow-hidden rounded-2xl border border-indigo-200/70 bg-gradient-to-br from-slate-950 via-indigo-950 to-indigo-800 p-6 text-white shadow-[0_20px_45px_rgba(30,41,89,0.2)]">
|
||||
<div className="max-w-3xl">
|
||||
<div className="text-[11px] font-bold uppercase tracking-[0.16em] text-indigo-200">Goal orchestrator</div>
|
||||
<h1 className="mt-2 text-2xl font-semibold tracking-tight sm:text-3xl">One objective. Two models. One governed outcome.</h1>
|
||||
<p className="mt-2 text-sm leading-6 text-indigo-100/80">A local worker develops the primary solution. A cloud reviewer challenges it, closes gaps, and returns the final answer through the same H1–H7 controls.</p>
|
||||
<div className="space-y-6 pb-6">
|
||||
<header className="relative overflow-hidden rounded-[1.6rem] border border-slate-200 bg-[#f8faf9] px-6 py-7 shadow-[0_18px_48px_rgba(15,23,42,0.055)] sm:px-8">
|
||||
<div className="absolute inset-y-0 left-0 w-1 bg-teal-600" />
|
||||
<div className="relative flex flex-wrap items-end justify-between gap-6">
|
||||
<div className="max-w-3xl">
|
||||
<p className="text-[10px] font-bold uppercase tracking-[0.2em] text-teal-700">Goal orchestrator · H1—H7 governed</p>
|
||||
<h1 className="mt-2 text-3xl font-semibold leading-tight tracking-[-0.035em] text-slate-950 sm:text-[2.35rem]">Define the outcome. Keep every decision inspectable.</h1>
|
||||
<p className="mt-3 max-w-[68ch] text-sm leading-6 text-slate-600">CASAN frames one objective against a bounded project, challenges it with independent models, and returns an evidence-backed outcome or a human approval request.</p>
|
||||
</div>
|
||||
<div className="grid min-w-64 grid-cols-3 gap-px overflow-hidden rounded-xl border border-slate-200 bg-slate-200 text-center">
|
||||
<div className="bg-white px-3 py-3"><div className="font-mono text-lg font-semibold tabular-nums text-slate-900">{projects.length}</div><div className="text-[9px] font-bold uppercase tracking-wide text-slate-400">Projects</div></div>
|
||||
<div className="bg-white px-3 py-3"><div className="font-mono text-lg font-semibold tabular-nums text-slate-900">{listQuery.data?.count ?? 0}</div><div className="text-[9px] font-bold uppercase tracking-wide text-slate-400">Objectives</div></div>
|
||||
<div className="bg-white px-3 py-3"><div className="mt-0.5 flex justify-center"><span className={`h-2.5 w-2.5 rounded-full ${selected && !TERMINAL.has(selected.status) ? 'animate-pulse bg-teal-500 motion-reduce:animate-none' : 'bg-slate-300'}`} /></div><div className="mt-1 text-[9px] font-bold uppercase tracking-wide text-slate-400">Live run</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="grid items-start gap-5 xl:grid-cols-[minmax(0,1.55fr)_minmax(310px,0.72fr)]">
|
||||
<article className="rounded-[1.35rem] border border-slate-200 bg-white p-5 shadow-[0_16px_42px_rgba(15,23,42,0.055)] sm:p-6">
|
||||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-[10px] font-bold uppercase tracking-[0.18em] text-teal-700">Objective composer</p>
|
||||
<h2 className="mt-1 text-xl font-semibold tracking-tight text-slate-950">What should CASAN accomplish?</h2>
|
||||
<p className="mt-1 text-xs leading-5 text-slate-500">Add constraints, acceptance criteria, links and technical context. Formatting is preserved in the final evidence.</p>
|
||||
</div>
|
||||
<span className="rounded-lg bg-slate-100 px-2.5 py-1.5 font-mono text-[10px] text-slate-500">{effectiveProject || 'no project'}</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-5">
|
||||
<RichTextGoalEditor
|
||||
value={goal}
|
||||
onChange={setGoal}
|
||||
placeholder={'Describe the intended outcome…\n\nInclude:\n- scope and constraints\n- measurable acceptance criteria\n- required verification and rollback'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{EXAMPLES.map((example, index) => <button key={example} type="button" onClick={() => setGoal(example)} className="rounded-lg border border-slate-200 bg-slate-50 px-2.5 py-1.5 text-[11px] font-medium text-slate-500 transition hover:border-teal-300 hover:bg-teal-50 hover:text-teal-800 focus:outline-none focus:ring-2 focus:ring-teal-500">Example {index + 1}</button>)}
|
||||
</div>
|
||||
|
||||
<div className="mt-5 flex flex-wrap items-center justify-between gap-4 border-t border-slate-100 pt-5">
|
||||
<div className="flex max-w-xl items-start gap-2.5 text-xs leading-5 text-slate-500"><span className="mt-1 grid h-4 w-4 shrink-0 place-items-center rounded-full bg-teal-100 text-[9px] font-bold text-teal-700">✓</span><span>Read-only goals return evidence directly. Any proposed write remains blocked until a separate approver reviews the patch.</span></div>
|
||||
<button type="button" disabled={goal.trim().length < 10 || !effectiveProject || start.isPending} onClick={() => start.mutate()} className="group inline-flex items-center gap-2 rounded-xl bg-slate-950 px-5 py-3 text-sm font-semibold text-white shadow-[0_10px_24px_rgba(15,23,42,0.22)] transition hover:-translate-y-0.5 hover:bg-teal-700 hover:shadow-[0_14px_28px_rgba(15,118,110,0.22)] active:translate-y-0 focus:outline-none focus:ring-4 focus:ring-teal-200 disabled:cursor-not-allowed disabled:bg-slate-300 disabled:shadow-none">
|
||||
{start.isPending ? 'Starting governed run…' : 'Run objective'}
|
||||
{!start.isPending && <span aria-hidden="true" className="transition group-hover:translate-x-0.5">→</span>}
|
||||
</button>
|
||||
</div>
|
||||
{start.isError && <div role="alert" className="mt-4 rounded-xl border border-rose-200 bg-rose-50 p-3 text-sm text-rose-700">{errorMessage(start.error)}</div>}
|
||||
</article>
|
||||
|
||||
<div className="space-y-5">
|
||||
<WorkspacePanel
|
||||
projects={projects}
|
||||
selectedId={effectiveProject}
|
||||
onSelect={setProjectId}
|
||||
loading={projectsQuery.isLoading}
|
||||
error={projectsQuery.isError}
|
||||
creating={creatingProject}
|
||||
onCreatingChange={setCreatingProject}
|
||||
newProjectId={newProjectId}
|
||||
newProjectDomain={newProjectDomain}
|
||||
onProjectIdChange={setNewProjectId}
|
||||
onProjectDomainChange={setNewProjectDomain}
|
||||
onCreate={() => createProject.mutate()}
|
||||
createPending={createProject.isPending}
|
||||
createError={createProject.error}
|
||||
/>
|
||||
<RecentGoals jobs={recent} selectedId={selectedId} loading={listQuery.isLoading} onSelect={(id) => setSearchParams({ id })} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Card title="Give CASAN an objective">
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="text-sm font-semibold text-slate-800">Project workspace</span>
|
||||
<button type="button" onClick={() => setCreatingProject((value) => !value)} className="rounded-lg border border-indigo-200 bg-indigo-50 px-3 py-1.5 text-xs font-semibold text-indigo-700 transition hover:border-indigo-300 hover:bg-indigo-100 focus:outline-none focus:ring-2 focus:ring-indigo-400">
|
||||
{creatingProject ? 'Cancel' : '+ New project'}
|
||||
</button>
|
||||
</div>
|
||||
<span className="mt-1 block text-xs leading-5 text-slate-500">Only server-registered, allowlisted roots are available. Models receive a bounded redacted snapshot—not filesystem access.</span>
|
||||
<select value={effectiveProject} onChange={(event) => setProjectId(event.target.value)} disabled={projectsQuery.isLoading || projects.length === 0} className="mt-2 w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm outline-none transition focus:border-indigo-400 focus:ring-4 focus:ring-indigo-100 disabled:bg-slate-100">
|
||||
{projects.map((project) => <option key={project.project_id} value={project.project_id}>{project.domain} · {project.project_id}</option>)}
|
||||
</select>
|
||||
{projectsQuery.isError && <span role="alert" className="mt-2 block text-xs font-medium text-rose-700">Could not load the allowlisted project registry.</span>}
|
||||
{effectiveProject && <span className="mt-2 block font-mono text-[11px] text-slate-400">Context roots: {projects.find((project) => project.project_id === effectiveProject)?.context_roots.join(', ')}</span>}
|
||||
{creatingProject && (
|
||||
<div className="mt-4 rounded-2xl border border-indigo-200 bg-indigo-50/60 p-4">
|
||||
<div className="text-sm font-semibold text-indigo-950">Register a new governed workspace</div>
|
||||
<p className="mt-1 text-xs leading-5 text-indigo-800/75">CASAN creates an empty directory under <span className="font-mono">apps/projects/<project-id></span>. Absolute paths and external roots are never accepted.</p>
|
||||
<div className="mt-4 grid gap-3 sm:grid-cols-2">
|
||||
<label><span className="text-xs font-semibold text-slate-700">Project ID</span><input value={newProjectId} onChange={(event) => setNewProjectId(event.target.value)} placeholder="customer-portal" maxLength={64} className="mt-1 w-full rounded-xl border border-slate-300 bg-white px-3 py-2.5 text-sm outline-none transition focus:border-indigo-400 focus:ring-4 focus:ring-indigo-100" /></label>
|
||||
<label><span className="text-xs font-semibold text-slate-700">Display name</span><input value={newProjectDomain} onChange={(event) => setNewProjectDomain(event.target.value)} placeholder="Customer Portal" maxLength={100} className="mt-1 w-full rounded-xl border border-slate-300 bg-white px-3 py-2.5 text-sm outline-none transition focus:border-indigo-400 focus:ring-4 focus:ring-indigo-100" /></label>
|
||||
</div>
|
||||
<div className="mt-4 flex justify-end"><button type="button" disabled={!/^[A-Za-z][A-Za-z0-9._-]{2,63}$/.test(newProjectId.trim()) || newProjectDomain.trim().length < 3 || createProject.isPending} onClick={() => createProject.mutate()} className="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:bg-slate-300">{createProject.isPending ? 'Creating…' : 'Create and select'}</button></div>
|
||||
{createProject.isError && <div role="alert" className="mt-3 rounded-xl border border-rose-200 bg-rose-50 p-3 text-xs font-medium text-rose-700">{errorMessage(createProject.error)}</div>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<textarea
|
||||
value={goal}
|
||||
onChange={(event) => setGoal(event.target.value)}
|
||||
placeholder="Ví dụ: Thiết kế kế hoạch đưa ứng dụng OKR hiện tại lên production, có rollback và tiêu chí nghiệm thu rõ ràng."
|
||||
className="min-h-32 w-full resize-y rounded-xl border border-slate-300 px-4 py-3 text-sm leading-6 text-slate-800 outline-none transition focus:border-indigo-400 focus:ring-4 focus:ring-indigo-100"
|
||||
maxLength={8000}
|
||||
/>
|
||||
<div className="mt-3 flex flex-wrap items-center justify-between gap-3">
|
||||
<p className="text-xs text-slate-500">Read-only goals receive the same evidence snapshot in both models. Side-effect requests become approval proposals and never write automatically.</p>
|
||||
<button
|
||||
type="button"
|
||||
disabled={goal.trim().length < 10 || !effectiveProject || start.isPending}
|
||||
onClick={() => start.mutate()}
|
||||
className="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:bg-slate-300"
|
||||
>
|
||||
{start.isPending ? 'Starting…' : 'Solve objective'}
|
||||
</button>
|
||||
</div>
|
||||
{start.isError && <div role="alert" className="mt-3 rounded-xl border border-rose-200 bg-rose-50 p-3 text-sm text-rose-700">{errorMessage(start.error)}</div>}
|
||||
</Card>
|
||||
{selectedQuery.isLoading && selectedId && <div className="grid gap-4" aria-label="Loading selected objective"><div className="h-24 animate-pulse rounded-2xl bg-slate-200 motion-reduce:animate-none" /><div className="h-96 animate-pulse rounded-3xl bg-slate-900/90 motion-reduce:animate-none" /></div>}
|
||||
{selectedQuery.isError && <div role="alert" className="rounded-2xl border border-rose-200 bg-rose-50 p-5 text-sm text-rose-800">The selected objective could not be loaded. Choose another objective from the recent list.</div>}
|
||||
|
||||
{selected && (
|
||||
<>
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
<WorkerCard title="Local worker" subtitle="Private first-pass solution" status={localStage?.status ?? 'queued'} detail={localStage?.detail ?? 'Waiting'} provider={localStage?.provider ?? selected.local_provider} model={localStage?.model ?? selected.local_model} />
|
||||
<WorkerCard title="Cloud reviewer" subtitle="Independent critique and refinement" status={cloudStage?.status ?? 'queued'} detail={cloudStage?.detail ?? 'Waiting'} provider={cloudStage?.provider ?? selected.cloud_provider} model={cloudStage?.model ?? selected.cloud_model} />
|
||||
<section className="space-y-5" aria-labelledby="selected-objective-title">
|
||||
<div className="flex flex-wrap items-start justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-5 py-4">
|
||||
<div className="min-w-0">
|
||||
<div className="flex flex-wrap items-center gap-2"><span className="text-[10px] font-bold uppercase tracking-[0.16em] text-teal-700">Active outcome</span><span className="text-slate-300">/</span><span className="font-mono text-[10px] text-slate-400">{selected.id.slice(0, 8)}</span></div>
|
||||
<h2 id="selected-objective-title" className="mt-1 line-clamp-2 max-w-4xl text-lg font-semibold tracking-tight text-slate-950">{selected.goal.replace(/[#*_`>\[\]]/g, '').split('\n')[0]}</h2>
|
||||
<div className="mt-1.5 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-slate-400"><span>{selected.workspace?.domain ?? selected.project}</span><span>{formatTimestamp(selected.created_at)}</span><span>{selected.local_provider} + {selected.cloud_provider}</span></div>
|
||||
</div>
|
||||
<StatusBadge value={selected.status} />
|
||||
</div>
|
||||
|
||||
<ModelInteractionDiagram goal={selected} localStage={localStage} cloudStage={cloudStage} trace={traceQuery.data} />
|
||||
|
||||
<Card title="Governed outcome" right={<StatusBadge value={selected.status} />}>
|
||||
<Card className="!rounded-[1.35rem]" title="Governed outcome" right={<StatusBadge value={selected.status} />}>
|
||||
<GovernedOutcomePulse goal={selected} trace={traceQuery.data} />
|
||||
{selected.workspace && <div className="mb-4 flex flex-wrap items-center gap-2 rounded-xl border border-indigo-200 bg-indigo-50 p-3 text-xs text-indigo-900"><strong>{selected.workspace.domain}</strong><span>·</span><span className="font-mono">{selected.workspace.project_id}</span>{selected.context_manifest && <><span>·</span><span>{selected.context_manifest.files} files / {selected.context_manifest.characters} chars</span>{selected.context_manifest.truncated && <StatusBadge value="bounded snapshot" />}</>}</div>}
|
||||
<div className="rounded-xl border border-slate-200 bg-slate-50 p-4">
|
||||
<div className="text-xs font-semibold uppercase tracking-[0.12em] text-slate-400">Objective</div>
|
||||
<div className="mt-2"><MarkdownText text={selected.goal} /></div>
|
||||
<div className="mt-5 grid gap-4 xl:grid-cols-[minmax(250px,0.58fr)_minmax(0,1.42fr)]">
|
||||
<div className="rounded-2xl bg-slate-50 p-4">
|
||||
<div className="text-[10px] font-bold uppercase tracking-[0.14em] text-slate-400">Original objective</div>
|
||||
<div className="mt-2"><MarkdownText text={selected.goal} /></div>
|
||||
{selected.workspace && <div className="mt-4 border-t border-slate-200 pt-3"><div className="text-[10px] font-bold uppercase tracking-wide text-slate-400">Evidence boundary</div><div className="mt-1 text-xs font-semibold text-slate-700">{selected.workspace.domain}</div>{selected.context_manifest && <div className="mt-1 font-mono text-[10px] text-slate-400">{selected.context_manifest.files} files · {selected.context_manifest.characters.toLocaleString()} chars{selected.context_manifest.truncated ? ' · bounded' : ''}</div>}</div>}
|
||||
</div>
|
||||
<div className="min-w-0 rounded-2xl border border-slate-200 p-5">
|
||||
<div className="text-[10px] font-bold uppercase tracking-[0.14em] text-teal-700">Final response</div>
|
||||
{selected.result ? <div className="mt-2"><MarkdownText text={selected.result} /></div> : <div className="mt-3 flex items-center gap-3 rounded-xl bg-teal-50 p-4 text-sm text-teal-900"><span className="h-2.5 w-2.5 animate-pulse rounded-full bg-teal-500 motion-reduce:animate-none" />Models are working. Evidence refreshes automatically.</div>}
|
||||
{selected.error && <div className="mt-4 rounded-xl border border-rose-200 bg-rose-50 p-3 text-sm text-rose-700">{selected.error}</div>}
|
||||
</div>
|
||||
</div>
|
||||
{selected.result ? <div className="mt-5"><MarkdownText text={selected.result} /></div> : (
|
||||
<div className="mt-5 flex items-center gap-3 rounded-xl border border-blue-200 bg-blue-50 p-4 text-sm text-blue-800">
|
||||
<span className="h-2.5 w-2.5 animate-pulse rounded-full bg-blue-500" />
|
||||
Models are working. This page refreshes automatically.
|
||||
|
||||
{selected.approval && selected.status === 'requires_approval' && (
|
||||
<div className="mt-5 rounded-2xl border border-amber-200 bg-amber-50 p-5 text-sm text-amber-950">
|
||||
<div className="flex flex-wrap items-start justify-between gap-3"><div><div className="font-semibold">Reviewed patch awaiting a separate approver</div><p className="mt-1 leading-6">Proposal <span className="font-mono">{selected.approval.id}</span> was created by <span className="font-mono">{selected.actor}</span>. Current session: <span className="font-mono">{actor.actor}</span> ({actor.role}).</p></div><Link to="/approvals" className="text-xs font-semibold text-amber-800 underline decoration-amber-300 underline-offset-4 hover:text-amber-950">Open approval inbox</Link></div>
|
||||
{reviewerCanDecide ? (
|
||||
<>
|
||||
<label className="mt-4 block"><span className="text-xs font-semibold">Decision reason</span><input value={approvalReason} onChange={(event) => setApprovalReason(event.target.value)} maxLength={500} className="mt-1 w-full rounded-lg border border-amber-300 bg-white px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-amber-500" /></label>
|
||||
<div className="mt-4 flex flex-wrap gap-2"><button type="button" disabled={approveAndApply.isPending || retryApply.isPending || approvalReason.trim().length < 5} onClick={() => approveAndApply.mutate(selected)} className="rounded-lg bg-amber-800 px-4 py-2 text-xs font-semibold text-white transition hover:bg-amber-900 disabled:cursor-not-allowed disabled:bg-amber-300">{approveAndApply.isPending ? 'Approving, applying and verifying…' : 'Approve, apply & verify'}</button><button type="button" disabled={approveAndApply.isPending || retryApply.isPending} onClick={() => retryApply.mutate(selected)} className="rounded-lg border border-amber-300 bg-white px-3 py-2 text-xs font-semibold text-amber-900 transition hover:bg-amber-100 disabled:text-amber-300">{retryApply.isPending ? 'Applying…' : 'Retry approved patch'}</button></div>
|
||||
</>
|
||||
) : (
|
||||
<div className="mt-4 rounded-xl border border-amber-200 bg-white/70 p-3 text-xs leading-5 text-amber-900">Sign in as an Independent Reviewer who is different from the proposer to record this decision.</div>
|
||||
)}
|
||||
{(approveAndApply.isError || retryApply.isError) && <div role="alert" className="mt-3 rounded-lg border border-rose-200 bg-rose-50 p-3 text-xs font-medium text-rose-700">{errorMessage(approveAndApply.error || retryApply.error)}</div>}
|
||||
</div>
|
||||
)}
|
||||
{selected.error && <div className="mt-4 rounded-xl border border-rose-200 bg-rose-50 p-3 text-sm text-rose-700">{selected.error}</div>}
|
||||
{selected.patch_repair_attempts && selected.patch_repair_attempts.length > 0 && <details open className="mt-4 overflow-hidden rounded-xl border border-amber-200 bg-amber-50/50"><summary className="cursor-pointer px-4 py-3 text-sm font-semibold text-amber-950">H2 patch-repair ledger ({selected.patch_repair_attempts.length})</summary><div className="space-y-2 border-t border-amber-200 p-4">{selected.patch_repair_attempts.map((attempt) => <div key={`${attempt.attempt}-${attempt.model}`} className="rounded-lg border border-amber-100 bg-white px-3 py-2.5 text-xs"><div className="flex flex-wrap items-center justify-between gap-2"><span className="font-semibold text-slate-700">Attempt {attempt.attempt}</span><span className="font-mono text-slate-500">{attempt.provider} · {attempt.model}</span><StatusBadge value={attempt.status} /></div><div className="mt-1.5 break-words font-mono text-[11px] leading-5 text-slate-600">{attempt.reason}</div></div>)}</div></details>}
|
||||
{selected.patch_artifact && <details open={selected.status === 'requires_approval'} className="mt-5 overflow-hidden rounded-xl border border-violet-200 bg-violet-50/40"><summary className="cursor-pointer px-4 py-3 text-sm font-semibold text-violet-950">Reviewed implementation patch · {selected.patch_artifact.files.length} file(s)</summary><div className="border-t border-violet-200 p-4"><div className="mb-3 flex flex-wrap gap-2">{selected.patch_artifact.files.map((file) => <span key={file} className="rounded-full bg-white px-2.5 py-1 font-mono text-[11px] text-violet-800 shadow-sm">{file}</span>)}</div><pre className="max-h-96 overflow-auto rounded-xl bg-slate-950 p-4 text-xs leading-5 text-slate-100">{selected.patch_artifact.preview || 'Patch preview unavailable'}</pre><div className="mt-3 font-mono text-[10px] text-violet-600">SHA-256 {selected.patch_artifact.sha256}</div></div></details>}
|
||||
{selected.approval && selected.status === 'requires_approval' && <div className="mt-4 rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-950"><div className="font-semibold">Reviewed patch awaiting approval</div><p className="mt-1 leading-6">Proposal <span className="font-mono">{selected.approval.id}</span> requires an approver different from proposer <span className="font-mono">{selected.actor}</span>.</p><div className="mt-4 grid gap-3 sm:grid-cols-2"><label><span className="text-xs font-semibold">Approver identity</span><input value={approver} onChange={(event) => setApprover(event.target.value)} className="mt-1 w-full rounded-lg border border-amber-300 bg-white px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-amber-500" /></label><label><span className="text-xs font-semibold">Decision reason</span><input value={approvalReason} onChange={(event) => setApprovalReason(event.target.value)} className="mt-1 w-full rounded-lg border border-amber-300 bg-white px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-amber-500" /></label></div><div className="mt-4 flex flex-wrap gap-2"><button type="button" disabled={approveAndApply.isPending || retryApply.isPending || approver.trim().length < 3 || approver.trim() === selected.actor || approvalReason.trim().length < 5} onClick={() => approveAndApply.mutate(selected)} className="rounded-lg bg-amber-700 px-4 py-2 text-xs font-semibold text-white transition hover:bg-amber-800 disabled:cursor-not-allowed disabled:bg-amber-300">{approveAndApply.isPending ? 'Approving, applying and verifying…' : 'Approve & Apply patch'}</button><button type="button" disabled={approveAndApply.isPending || retryApply.isPending || approver.trim().length < 3} onClick={() => retryApply.mutate(selected)} className="rounded-lg border border-amber-300 bg-white px-3 py-2 text-xs font-semibold text-amber-900 hover:bg-amber-100 disabled:text-amber-300">{retryApply.isPending ? 'Applying…' : 'Retry already-approved patch'}</button><Link to="/approvals" className="inline-flex rounded-lg border border-amber-300 bg-white px-3 py-2 text-xs font-semibold text-amber-900 hover:bg-amber-100">Open approval inbox</Link></div>{(approveAndApply.isError || retryApply.isError) && <div role="alert" className="mt-3 rounded-lg border border-rose-200 bg-rose-50 p-3 text-xs font-medium text-rose-700">{errorMessage(approveAndApply.error || retryApply.error)}</div>}</div>}
|
||||
{selected.verification && selected.verification.length > 0 && <div className="mt-4 rounded-xl border border-emerald-200 bg-emerald-50 p-4"><div className="text-sm font-semibold text-emerald-900">Patch applied and verified</div>{selected.verification.map((check) => <div key={check.command} className="mt-2 flex items-center justify-between gap-3 rounded-lg bg-white px-3 py-2 text-xs"><span className="font-mono text-emerald-800">{check.command}</span><StatusBadge value={check.exit_code === 0 ? 'pass' : 'failed'} /></div>)}</div>}
|
||||
{selected.local_draft && <details className="mt-5 rounded-xl border border-slate-200 p-4"><summary className="cursor-pointer text-sm font-semibold text-slate-700">Inspect local worker draft</summary><div className="mt-4"><MarkdownText text={selected.local_draft} /></div></details>}
|
||||
{selected.reviewer_attempts && selected.reviewer_attempts.length > 0 && <details className="mt-5 rounded-xl border border-slate-200 p-4"><summary className="cursor-pointer text-sm font-semibold text-slate-700">Fallback attempt ledger ({selected.reviewer_attempts.length})</summary><div className="mt-4 space-y-2">{selected.reviewer_attempts.map((attempt) => <div key={attempt.attempt} className="flex flex-wrap items-center justify-between gap-2 rounded-lg bg-slate-50 px-3 py-2 text-xs"><span className="font-semibold text-slate-700">{attempt.attempt}. reviewer</span><span className="font-mono text-slate-500">{attempt.provider} · {attempt.model}</span><StatusBadge value={attempt.status} /></div>)}</div></details>}
|
||||
|
||||
{selected.verification && selected.verification.length > 0 && <div className="mt-5 rounded-2xl border border-emerald-200 bg-emerald-50 p-4"><div className="text-sm font-semibold text-emerald-900">Patch applied and verified</div>{selected.verification.map((check) => <div key={check.command} className="mt-2 flex items-center justify-between gap-3 rounded-lg bg-white px-3 py-2 text-xs"><span className="min-w-0 truncate font-mono text-emerald-800">{check.command}</span><StatusBadge value={check.exit_code === 0 ? 'pass' : 'failed'} /></div>)}</div>}
|
||||
|
||||
<details className="mt-5 overflow-hidden rounded-2xl border border-slate-200 bg-slate-50/60">
|
||||
<summary className="cursor-pointer px-4 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-100">Technical evidence and model ledgers</summary>
|
||||
<div className="space-y-4 border-t border-slate-200 p-4">
|
||||
{selected.patch_repair_attempts && selected.patch_repair_attempts.length > 0 && <div><div className="text-xs font-semibold text-slate-700">Patch-repair ledger</div><div className="mt-2 space-y-2">{selected.patch_repair_attempts.map((attempt) => <div key={`${attempt.attempt}-${attempt.model}`} className="flex flex-wrap items-center justify-between gap-2 rounded-lg bg-white px-3 py-2.5 text-xs"><span className="font-semibold text-slate-700">Attempt {attempt.attempt}</span><span className="font-mono text-slate-500">{attempt.provider} · {attempt.model}</span><StatusBadge value={attempt.status} /></div>)}</div></div>}
|
||||
{selected.patch_artifact && <div><div className="flex flex-wrap items-center justify-between gap-2 text-xs font-semibold text-slate-700"><span>Implementation patch · {selected.patch_artifact.files.length} files</span><span className="font-mono text-[10px] font-normal text-slate-400">{selected.patch_artifact.sha256.slice(0, 16)}…</span></div><div className="mt-2 flex flex-wrap gap-1.5">{selected.patch_artifact.files.map((file) => <span key={file} className="rounded-md bg-white px-2 py-1 font-mono text-[10px] text-slate-600">{file}</span>)}</div><pre className="mt-2 max-h-80 overflow-auto rounded-xl bg-slate-950 p-4 text-xs leading-5 text-slate-100">{selected.patch_artifact.preview || 'Patch preview unavailable'}</pre></div>}
|
||||
{selected.local_draft && <details className="rounded-xl bg-white p-3"><summary className="cursor-pointer text-xs font-semibold text-slate-700">Local worker draft</summary><div className="mt-3"><MarkdownText text={selected.local_draft} /></div></details>}
|
||||
{selected.reviewer_attempts && selected.reviewer_attempts.length > 0 && <div><div className="text-xs font-semibold text-slate-700">Reviewer fallback attempts</div><div className="mt-2 space-y-2">{selected.reviewer_attempts.map((attempt) => <div key={attempt.attempt} className="flex flex-wrap items-center justify-between gap-2 rounded-lg bg-white px-3 py-2 text-xs"><span>{attempt.attempt}. reviewer</span><span className="font-mono text-slate-500">{attempt.provider} · {attempt.model}</span><StatusBadge value={attempt.status} /></div>)}</div></div>}
|
||||
{!selected.patch_artifact && !selected.local_draft && !selected.reviewer_attempts?.length && !selected.patch_repair_attempts?.length && <p className="text-xs text-slate-500">No additional technical evidence has been emitted yet.</p>}
|
||||
</div>
|
||||
</details>
|
||||
</Card>
|
||||
|
||||
<TraceExplorer traceId={selected.trace_id} />
|
||||
</>
|
||||
<details className="overflow-hidden rounded-[1.35rem] border border-slate-200 bg-white">
|
||||
<summary className="cursor-pointer px-5 py-4 text-sm font-semibold text-slate-800 transition hover:bg-slate-50">Inspect complete H1—H7 trace</summary>
|
||||
<div className="border-t border-slate-200 p-4"><TraceExplorer traceId={selected.trace_id} /></div>
|
||||
</details>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<Card title={`Recent objectives (${listQuery.data?.count ?? 0})`}>
|
||||
<div className="space-y-2">
|
||||
{(listQuery.data?.goals ?? []).map((item) => (
|
||||
<button key={item.id} type="button" onClick={() => setSearchParams({ id: item.id })} className={`flex w-full items-center justify-between gap-4 rounded-xl border p-3 text-left transition hover:bg-slate-50 ${selectedId === item.id ? 'border-indigo-300 bg-indigo-50/50' : 'border-slate-200'}`}>
|
||||
<div className="min-w-0 flex-1"><MarkdownText text={item.goal} compact /><div className="mt-1 text-xs text-slate-400">{item.created_at.replace('T', ' ').replace('Z', '')}</div></div>
|
||||
<StatusBadge value={item.status} />
|
||||
</button>
|
||||
))}
|
||||
{!listQuery.isLoading && (listQuery.data?.count ?? 0) === 0 && <p className="py-6 text-center text-sm text-slate-500">No objective has been orchestrated yet.</p>}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user