Emil_Shanaty/zhila
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

P2c: in-app choir agent with proposals and approval

Browse Source
This commit is contained in:
Emil
2026-11-01 02:27:44 +03:00
parent 0df07577a1
commit 2ecb8822de
20 changed files with 2236 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/package.json
+1
View File
@@ -15,6 +15,7 @@
"faces-smoke": "node scripts/faces-smoke.mjs",
"arrangement-smoke": "node scripts/arrangement-smoke.mjs",
"render-ui-smoke": "node scripts/render-ui-smoke.mjs",
"agent-ui-smoke": "node scripts/agent-ui-smoke.mjs",
"restored-smoke": "node scripts/restored-smoke.mjs"
},
"devDependencies": {
ui/scripts/agent-ui-smoke.mjs
+40
View File
@@ -0,0 +1,40 @@
import { chromium } from 'playwright-core';
const chrome = process.env.CHROME_PATH ?? '/home/emil/.cache/ms-playwright/chromium-1248/chrome-linux64/chrome';
const browser = await chromium.launch({ executablePath: chrome, args: ['--no-sandbox'] });
const page = await browser.newPage({ viewport: { width: 1600, height: 1000 }, deviceScaleFactor: 1 });
const errors = [];
page.on('pageerror', (error) => errors.push(error.message));
page.on('console', (message) => { if (message.type() === 'error') errors.push(message.text()); });
await page.goto('http://127.0.0.1:5173/', { waitUntil: 'load' });
await page.waitForTimeout(2200);
await page.locator('.room', { hasText: 'choir' }).click();
await page.waitForTimeout(400);
await page.locator('.choir-form input').fill('raise the tempo a little');
await page.locator('.choir-send').click();
await page.waitForSelector('.choir-proposal', { timeout: 20000 });
const proposal = (await page.locator('.choir-proposal').last().textContent())?.replace(/\s+/g, ' ').trim();
await page.locator('.choir-proposal-actions button').first().click();
await page.waitForFunction(
() => document.querySelector('.choir-readout')?.textContent?.includes('132'),
null,
{ timeout: 20000 }
);
await page.waitForTimeout(600);
await page.screenshot({ path: '../preview-p2-agent.png' });
const report = await page.evaluate(() => ({
readout: document.querySelector('.choir-readout')?.textContent?.replace(/\s+/g, ' ').trim(),
messages: [...document.querySelectorAll('.choir-message')].map((el) => el.textContent?.replace(/\s+/g, ' ').trim()),
proposals: document.querySelectorAll('.choir-proposal').length,
wire: [...document.querySelectorAll('.wire-label')].map((el) => el.textContent).slice(-8),
choir: document.querySelector('.choir-head h1')?.textContent
}));
console.log(JSON.stringify({ proposal, report, errors }, null, 2));
const failures = [];
if (!proposal?.includes('tempo')) failures.push('no tempo proposal');
if (!report.readout?.includes('132')) failures.push('tempo did not move in the readout');
if (!report.messages.some((line) => line?.includes('Applied'))) failures.push('no applied message');
if (report.proposals !== 0) failures.push('proposal was not resolved');
if (errors.length) failures.push('console errors');
await browser.close();
if (failures.length) { console.error('AGENT UI SMOKE FAILED: ' + failures.join('; ')); process.exit(1); }
console.log('agent UI smoke passed');
ui/src/App.svelte
+61 -6
View File
@@ -14,6 +14,8 @@
CoreSummary,
Event,
HelloMessage,
AgentMessage,
AgentProposal,
MeterFrame,
Seal,
State,
@@ -23,6 +25,7 @@
WireEntry
} from './lib/types';
import { VEINS } from './lib/types';
import Choir from './components/Choir.svelte';
const WIRE_URL = import.meta.env.VITE_ZHILA_WS ?? 'ws://127.0.0.1:4317';
const TOKEN = import.meta.env.VITE_ZHILA_TOKEN ?? 'dev';
@@ -33,13 +36,16 @@
let selected: VeinId = $state('bass');
let entries: WireEntry[] = $state([]);
let hello: HelloMessage | null = $state(null);
let view: 'nave' | 'quarry' = $state('nave');
let view: 'nave' | 'quarry' | 'choir' = $state('nave');
let selectedCoreId: string | null = $state(null);
let selectedFace: number = $state(-1);
let selectedRow: number = $state(0);
let importing: boolean = $state(false);
let rendering: boolean = $state(false);
let lastRender: string | null = $state(null);
let agentMessages: AgentMessage[] = $state([]);
let agentProposals: AgentProposal[] = $state([]);
let agentBusy: boolean = $state(false);
let bridge: Bridge | null = null;
let entryId = 0;
let snapshotLogged = false;
@@ -114,6 +120,15 @@
} else if (event.kind === 'rendered') {
lastRender = event.path;
addEntry('recv', 'render', `${event.duration_sec.toFixed(1)} s · ${event.path}`);
} else if (event.kind === 'agent_message') {
agentMessages = [...agentMessages.slice(-60), event.message];
} else if (event.kind === 'agent_proposal') {
agentProposals = [
...agentProposals,
{ id: event.id, description: event.description, commands: event.commands }
];
} else if (event.kind === 'agent_resolved') {
agentProposals = agentProposals.filter((proposal) => proposal.id !== event.id);
}
}
@@ -221,6 +236,26 @@
void run({ type: 'copy_section', from, to });
}
async function askAgent(text: string) {
if (!bridge || agentBusy) return;
agentBusy = true;
try {
await run({ type: 'agent_ask', text });
} finally {
agentBusy = false;
}
}
async function approveAgent(id: number) {
if (!bridge) return;
await run({ type: 'agent_approve', id });
}
async function rejectAgent(id: number) {
if (!bridge) return;
await run({ type: 'agent_reject', id });
}
async function renderProject() {
if (!bridge || rendering) return;
rendering = true;
@@ -297,7 +332,10 @@
onMeter,
onEvent,
onError,
onImported
onImported,
onAgentHistory: (messages) => {
agentMessages = messages;
}
});
bridge.connect();
window.addEventListener('keydown', onKey);
@@ -324,13 +362,19 @@
quarry
</button>
<span class="rail-rule" aria-hidden="true"></span>
<button class="room" class:is-on={view === 'choir'} aria-pressed={view === 'choir'} onclick={() => (view = 'choir')}>
choir
</button>
<span class="rail-rule" aria-hidden="true"></span>
<span class="room is-on"><span class="mode-dot" aria-hidden="true"></span>hand</span>
<span class="rail-note">
{view === 'quarry'
? `${project?.cores.length ?? 0} core${(project?.cores.length ?? 0) === 1 ? '' : 's'}`
: project
? `${project.veins.length} veins`
: 'five veins'}
: view === 'choir'
? `${agentMessages.length} line${agentMessages.length === 1 ? '' : 's'}`
: project
? `${project.veins.length} veins`
: 'five veins'}
</span>
</div>
<div class="rail-right">
@@ -355,7 +399,7 @@
<main class="hero">
{#if view === 'nave'}
<Descent state={project} {meter} {selected} onselect={select} {strike} />
{:else}
{:else if view === 'quarry'}
<Quarry
cores={project?.cores ?? []}
pattern={project?.pattern ?? null}
@@ -377,6 +421,17 @@
onclearsection={clearSection}
oncopysection={copySection}
/>
{:else}
<Choir
messages={agentMessages}
proposals={agentProposals}
busy={agentBusy}
project={project}
{meter}
onask={askAgent}
onapprove={approveAgent}
onreject={rejectAgent}
/>
{/if}
<Wire {entries} {status} onreconnect={reconnect} />
<EnginePanel state={project} {meter} {status} session={hello?.session ?? '—'} ongain={setGain} />
ui/src/app.css
+314
View File
@@ -1731,6 +1731,281 @@ button.room {
font-weight: 400;
}
/* — choir — */
.choir {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
padding: 22px calc(var(--panel-r) + 20px) 0 calc(var(--panel-l) + 22px);
background:
radial-gradient(ellipse at 50% 0%, rgba(232, 64, 42, 0.05), transparent 55%),
var(--resin);
animation: fade 0.7s 0.05s ease both;
}
.choir-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
padding-bottom: 13px;
border-bottom: 1px solid rgba(155, 133, 121, 0.12);
}
.choir-head h1 {
margin: 0;
font-family: var(--font-display);
font-size: 30px;
font-style: italic;
font-weight: 300;
line-height: 1;
color: var(--bone);
}
.choir-head p {
margin: 5px 0 0;
font-size: 8.5px;
letter-spacing: 0.12em;
color: var(--ash-2);
}
.choir-readout {
display: flex;
gap: 12px;
font-size: 8px;
letter-spacing: 0.08em;
color: var(--ash);
font-variant-numeric: tabular-nums;
}
.choir-log {
flex: 1;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 15px;
padding: 20px 4px 18px 0;
scrollbar-width: thin;
scrollbar-color: rgba(155, 133, 121, 0.3) transparent;
}
.choir-empty {
max-width: 530px;
margin: 7vh auto 0;
font-family: var(--font-display);
font-size: 22px;
font-style: italic;
font-weight: 300;
line-height: 1.5;
text-align: center;
color: var(--ash);
}
.choir-message {
max-width: 760px;
}
.choir-role {
display: block;
margin-bottom: 4px;
font-size: 8px;
letter-spacing: 0.16em;
color: var(--ash-2);
}
.choir-message p {
margin: 0;
font-family: var(--font-display);
font-size: 20px;
font-weight: 300;
line-height: 1.45;
color: var(--bone);
}
.choir-message.is-user {
align-self: flex-end;
max-width: 560px;
text-align: right;
}
.choir-message.is-user .choir-role {
color: var(--ash-2);
}
.choir-message.is-user p {
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.7;
color: var(--ash);
}
.choir-proposal {
max-width: 760px;
padding: 12px 0 0;
border-top: 1px solid rgba(232, 64, 42, 0.38);
}
.choir-proposal-head {
display: flex;
justify-content: space-between;
font-size: 8px;
letter-spacing: 0.12em;
color: var(--ash-2);
}
.choir-proposal p {
margin: 7px 0 9px;
font-family: var(--font-display);
font-size: 18px;
font-style: italic;
font-weight: 300;
line-height: 1.45;
color: var(--bone);
}
.choir-moves {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.choir-move {
padding: 3px 6px;
border: 1px solid rgba(155, 133, 121, 0.2);
font-size: 8.5px;
color: var(--ash);
}
.choir-proposal-actions {
display: flex;
gap: 8px;
margin-top: 10px;
}
.choir-proposal-actions button,
.choir-form button {
padding: 6px 10px;
border: 1px solid rgba(155, 133, 121, 0.25);
font-size: 9px;
letter-spacing: 0.04em;
color: var(--bone);
}
.choir-proposal-actions button:first-child {
border-color: rgba(232, 64, 42, 0.5);
color: var(--ember);
}
.choir-proposal-actions button:hover:not(:disabled),
.choir-form button:hover:not(:disabled) {
border-color: var(--ember);
}
.choir-proposal-actions button:disabled,
.choir-form button:disabled {
opacity: 0.35;
cursor: default;
}
.choir-live {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 9px 0;
border-top: 1px solid rgba(155, 133, 121, 0.12);
}
.choir-sections {
display: flex;
gap: 3px;
}
.choir-section {
display: inline-flex;
align-items: baseline;
gap: 5px;
padding: 3px 6px;
border: 1px solid rgba(155, 133, 121, 0.16);
font-size: 8px;
color: var(--ash-2);
font-variant-numeric: tabular-nums;
}
.choir-section b {
font-family: var(--font-display);
font-size: 14px;
font-style: italic;
font-weight: 300;
color: var(--ash);
}
.choir-section.is-on {
border-color: var(--ember);
color: var(--bone);
}
.choir-section.is-on b {
color: var(--ember);
}
.choir-veins {
display: flex;
gap: 9px;
}
.choir-vein {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 8px;
color: var(--ash-2);
}
.choir-vein i {
display: block;
width: 3px;
height: 16px;
background: linear-gradient(to top, rgba(232, 64, 42, 0.85) calc(var(--level) * 100%), rgba(155, 133, 121, 0.12) calc(var(--level) * 100%));
}
.choir-form {
display: flex;
gap: 7px;
padding: 11px 0 14px;
border-top: 1px solid rgba(155, 133, 121, 0.12);
}
.choir-form input {
flex: 1;
min-width: 0;
padding: 8px 10px;
border: 1px solid rgba(155, 133, 121, 0.24);
background: transparent;
color: var(--bone);
font-family: var(--font-mono);
font-size: 11px;
}
.choir-form input:focus {
outline: none;
border-color: rgba(232, 64, 42, 0.55);
}
.choir-form input::placeholder {
color: var(--ash-2);
}
.choir-listen {
border-color: rgba(232, 64, 42, 0.42) !important;
color: var(--ember) !important;
}
/* — responsive — */
@media (max-width: 1240px) {
@@ -1780,6 +2055,16 @@ button.room {
width: 100%;
padding: 20px 18px 24px;
}
.choir {
position: relative;
inset: auto;
width: 100%;
min-height: 80vh;
padding: 20px 18px 0;
}
.choir-log {
min-height: 300px;
}
.quarry-grid {
grid-template-columns: 1fr;
}
@@ -1940,6 +2225,35 @@ button.room {
.quarry {
padding: 18px 14px 22px;
}
.choir {
min-height: 82vh;
padding: 18px 14px 0;
}
.choir-head {
flex-wrap: wrap;
}
.choir-readout {
display: none;
}
.choir-message p {
font-size: 18px;
}
.choir-message.is-user p {
font-size: 10.5px;
}
.choir-live {
flex-wrap: wrap;
}
.choir-veins {
gap: 6px;
}
.choir-form {
gap: 5px;
}
.choir-form button {
padding: 6px 8px;
font-size: 8.5px;
}
.quarry-head h1 {
font-size: 26px;
}
ui/src/components/Choir.svelte
+146
View File
@@ -0,0 +1,146 @@
<svelte:options runes={true} />
<script lang="ts">
import type { AgentMessage, AgentProposal, MeterFrame, Pattern, State } from '../lib/types';
import { VEINS } from '../lib/types';
import { commandLabel } from '../lib/format';
let {
messages,
proposals,
busy,
project,
meter,
onask,
onapprove,
onreject
}: {
messages: AgentMessage[];
proposals: AgentProposal[];
busy: boolean;
project: State | null;
meter: MeterFrame;
onask: (text: string) => void;
onapprove: (id: number) => void;
onreject: (id: number) => void;
} = $props();
let text = $state('');
let log: HTMLDivElement | null = $state(null);
$effect(() => {
messages.length;
proposals.length;
if (log) log.scrollTop = log.scrollHeight;
});
function notes(pattern: Pattern): number {
return pattern.rows.reduce(
(total, row) => total + row.velocities.filter((velocity) => velocity > 0).length,
0
);
}
function send() {
const value = text.trim();
if (!value || busy) return;
text = '';
onask(value);
}
function listen() {
if (!busy) onask('Listen to the room. What do you hear?');
}
function handleKey(event: KeyboardEvent) {
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
send();
}
}
</script>
<div class="choir">
<header class="choir-head">
<div>
<h1>choir</h1>
<p>the second performer · same verbs · proposals need a hand</p>
</div>
<div class="choir-readout">
<span>{project?.transport.playing ? 'playing' : 'still'}</span>
<span>{Math.round(project?.transport.bpm ?? 128)} bpm</span>
<span>{project?.transport.loop_bars ?? 8} bars</span>
<span>{project?.cores.length ?? 0} cores</span>
</div>
</header>
<div class="choir-log" bind:this={log}>
{#if messages.length === 0}
<p class="choir-empty">
Ask the choir to listen, to lift the bass, to open section B, or to render the eight bars.
It hears the levels; project edits arrive as proposals.
</p>
{/if}
{#each messages as message}
<div class="choir-message" class:is-user={message.role === 'user'}>
<span class="choir-role">{message.role === 'agent' ? 'choir' : message.role}</span>
<p>{message.text}</p>
</div>
{/each}
{#each proposals as proposal}
<div class="choir-proposal">
<div class="choir-proposal-head">
<span>proposal</span>
<span>{proposal.commands.length} move{proposal.commands.length === 1 ? '' : 's'}</span>
</div>
<p>{proposal.description}</p>
<div class="choir-moves">
{#each proposal.commands as command}
<span class="choir-move">{commandLabel(command)}</span>
{/each}
</div>
<div class="choir-proposal-actions">
<button onclick={() => onapprove(proposal.id)} disabled={busy}>approve</button>
<button onclick={() => onreject(proposal.id)} disabled={busy}>reject</button>
</div>
</div>
{/each}
</div>
<div class="choir-live">
<div class="choir-sections" aria-label="sections">
{#each project?.arrangement ?? [] as section, index}
<span class="choir-section" class:is-on={index === project?.active_section}>
<b>{String.fromCharCode(65 + index)}</b>
{notes(section)}
</span>
{/each}
</div>
<div class="choir-veins" aria-label="levels">
{#each VEINS as vein, index}
<span class="choir-vein">
<i style={`--level:${meter.veins[index] ?? 0}`}></i>
{vein.slice(0, 3)}
</span>
{/each}
</div>
</div>
<form
class="choir-form"
onsubmit={(event) => {
event.preventDefault();
send();
}}
>
<button type="button" class="choir-listen" onclick={listen} disabled={busy}>listen</button>
<input
bind:value={text}
onkeydown={handleKey}
placeholder={busy ? 'the choir is listening…' : 'ask the choir…'}
disabled={busy}
aria-label="ask the choir"
/>
<button type="submit" class="choir-send" disabled={busy || !text.trim()}>send</button>
</form>
</div>
ui/src/lib/bridge.ts
+6
View File
@@ -7,6 +7,7 @@ import type {
MeterFrame,
Seal,
ServerMessage,
AgentMessage,
State,
Status
} from './types';
@@ -20,6 +21,7 @@ export interface BridgeHandlers {
onEvent: (event: Event) => void;
onError: (message: string) => void;
onImported?: (core: CoreSummary) => void;
onAgentHistory?: (messages: AgentMessage[]) => void;
}
interface Pending {
@@ -190,6 +192,10 @@ export class Bridge {
case 'event':
this.handlers.onEvent(message.event);
break;
case 'agent_history': {
this.handlers.onAgentHistory?.(message.messages);
break;
}
case 'imported': {
const pending = this.imports.get(message.id);
if (!pending) break;
ui/src/lib/format.ts
+4
View File
@@ -38,6 +38,10 @@ export function commandLabel(command: Command): string {
case 'clear_section': return `clear section ${String.fromCharCode(65 + command.index)}`;
case 'copy_section': return `copy ${String.fromCharCode(65 + command.from)} → ${String.fromCharCode(65 + command.to)}`;
case 'render': return 'render wav';
case 'agent_ask': return `choir: ${command.text.slice(0, 42)}`;
case 'agent_approve': return `approve ${command.id}`;
case 'agent_reject': return `reject ${command.id}`;
case 'agent_reset': return 'reset choir';
case 'undo': return 'undo';
case 'redo': return 'redo';
case 'get_snapshot': return 'snapshot';
ui/src/lib/types.ts
+27 -2
View File
@@ -85,7 +85,10 @@ export type Event =
| { kind: 'history'; can_undo: boolean; can_redo: boolean }
| { kind: 'core_faces'; core: CoreSummary }
| { kind: 'arrangement'; sections: Pattern[]; active: number }
| { kind: 'rendered'; path: string; duration_sec: number };
| { kind: 'rendered'; path: string; duration_sec: number }
| { kind: 'agent_message'; message: AgentMessage }
| { kind: 'agent_proposal'; id: number; description: string; commands: Command[] }
| { kind: 'agent_resolved'; id: number; applied: boolean };
export type Command =
| { type: 'get_snapshot' }
@@ -102,6 +105,10 @@ export type Command =
| { type: 'clear_section'; index: number }
| { type: 'copy_section'; from: number; to: number }
| { type: 'render' }
| { type: 'agent_ask'; text: string }
| { type: 'agent_approve'; id: number }
| { type: 'agent_reject'; id: number }
| { type: 'agent_reset' }
| { type: 'undo' }
| { type: 'redo' };
@@ -147,7 +154,25 @@ export interface ImportedMessage {
core: CoreSummary;
}
export type ServerMessage = HelloMessage | SnapshotMessage | EventMessage | ResultMessage | ErrorMessage | ImportedMessage;
export type AgentRole = 'user' | 'agent' | 'system';
export interface AgentMessage {
role: AgentRole;
text: string;
}
export interface AgentProposal {
id: number;
description: string;
commands: Command[];
}
export interface AgentHistoryMessage {
type: 'agent_history';
messages: AgentMessage[];
}
export type ServerMessage = HelloMessage | SnapshotMessage | EventMessage | ResultMessage | ErrorMessage | ImportedMessage | AgentHistoryMessage;
export interface MeterFrame {
bar: number;