@sanqianx/claude-ai-workbench 0.13.2 → 0.13.3

package/packages/ui/index.d.ts

@@ -1,18 +1,18 @@
-import type { ClaudeWorkbenchClient } from "@claude-ai-workbench/client";
-import type { WorkbenchContext } from "@claude-ai-workbench/contracts";
-
-export interface ClaudeWorkbenchPaneElement extends HTMLElement {
-  client: ClaudeWorkbenchClient | null;
-  adapter: ClaudeWorkbenchClient | null;
-  context: WorkbenchContext | null;
-  readonly controller: unknown;
-  destroy(): void;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "claude-workbench-pane": ClaudeWorkbenchPaneElement;
-  }
-}
-
-export {};
+import type { ClaudeWorkbenchClient } from "@claude-ai-workbench/client";
+import type { WorkbenchContext } from "@claude-ai-workbench/contracts";
+
+export interface ClaudeWorkbenchPaneElement extends HTMLElement {
+  client: ClaudeWorkbenchClient | null;
+  adapter: ClaudeWorkbenchClient | null;
+  context: WorkbenchContext | null;
+  readonly controller: unknown;
+  destroy(): void;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "claude-workbench-pane": ClaudeWorkbenchPaneElement;
+  }
+}
+
+export {};

package/packages/ui/index.js

@@ -1,51 +1,51 @@
-(function (global) {
-  'use strict';
-  if (!global.customElements || !global.HTMLElement) return;
-
-  const Core = global.ClaudeWorkbenchCore || (typeof require === 'function' ? require('../core') : null);
-  const esc = value => String(value == null ? '' : value).replace(/[&<>"']/g, char => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[char]));
-  const css = `
-    :host{display:block;min-width:0;height:100%;min-height:320px;color:var(--caw-text,#172231);font:13px/1.45 Inter,ui-sans-serif,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif}*{box-sizing:border-box}button,textarea,select,input{font:inherit;color:inherit}button{cursor:pointer}.shell{height:100%;min-height:320px;display:grid;grid-template-rows:54px minmax(0,1fr) auto;overflow:hidden;border:1px solid var(--caw-line,#d7dfe8);border-radius:14px;background:var(--caw-panel,#fff)}.head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 13px;border-bottom:1px solid var(--caw-line,#d7dfe8)}.identity,.actions,.foot,.permission{display:flex;align-items:center}.identity{min-width:0;gap:9px}.dot{width:9px;height:9px;border-radius:50%;background:var(--caw-muted,#687789)}.dot.connected{background:var(--caw-good,#2f7d64)}.dot.running{background:var(--caw-accent,#4f6f8f);box-shadow:0 0 0 4px var(--caw-accent-soft);animation:pulse 1.2s infinite}.dot.error{background:var(--caw-bad,#af4b4b)}@keyframes pulse{50%{opacity:.4}}.title{font-weight:750}.sub{color:var(--caw-muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip{padding:4px 8px;border:1px solid var(--caw-line);border-radius:999px;background:var(--caw-panel-2);color:var(--caw-muted);font-size:10px}.actions{gap:6px}.icon,.send,.small{border:1px solid var(--caw-line);border-radius:8px;background:var(--caw-panel-2)}.icon{width:32px;height:32px}.messages{min-height:0;overflow:auto;padding:14px;background:var(--caw-panel-2)}.empty{height:100%;display:grid;place-items:center;text-align:center;color:var(--caw-muted)}.line{margin:0 0 10px}.bubble{max-width:94%;padding:9px 11px;border:1px solid var(--caw-line);border-radius:10px;background:var(--caw-panel);white-space:pre-wrap;overflow-wrap:anywhere}.user{display:flex;justify-content:flex-end}.user .bubble{max-width:86%;background:var(--caw-accent-soft)}.thinking .bubble{color:var(--caw-muted);font-style:italic;border-style:dashed}.error .bubble{color:var(--caw-bad);background:var(--caw-bad-soft)}.status{text-align:center;color:var(--caw-muted);font-size:11px}.tool{max-width:94%;border:1px solid var(--caw-line);border-radius:10px;background:var(--caw-panel);overflow:hidden}.tool summary{padding:9px 11px;font-weight:700}.tool pre{margin:0;padding:10px;background:#101923;color:#dae6f2;overflow:auto;font-size:11px}.result{padding:9px;border-top:1px solid var(--caw-line);white-space:pre-wrap}.permission{justify-content:space-between;gap:12px;padding:10px;border-top:1px solid var(--caw-line);background:var(--caw-warn-soft)}.permission div{min-width:0}.permission span{display:block;color:var(--caw-muted);font-size:11px;overflow-wrap:anywhere}.permission .actions{flex:none}.small{padding:6px 9px}.allow{border-color:transparent;background:var(--caw-accent);color:#fff}.deny{color:var(--caw-bad)}.composer{border-top:1px solid var(--caw-line)}.input{display:flex;align-items:flex-end;gap:8px;padding:9px 9px 5px}.input textarea{flex:1;min-height:40px;max-height:150px;resize:vertical;padding:9px;border:1px solid var(--caw-line);border-radius:9px;background:var(--caw-panel-2);outline:0}.send{width:40px;height:40px;border:0;background:var(--caw-accent);color:#fff}.send.stop{background:var(--caw-bad)}.foot{justify-content:space-between;padding:0 9px 9px;color:var(--caw-muted);font-size:10px}.foot select{padding:4px;border:1px solid var(--caw-line);border-radius:7px;background:var(--caw-panel-2)}
-  `;
-
-  class SessionHistoryPopover extends HTMLElement {
-    constructor(){super();this.attachShadow({mode:'open'});this._sessions=[];this._active='';}
-    set sessions(value){this._sessions=Array.isArray(value)?value:[];this.render()} set activeSessionId(value){this._active=value||'';this.render()}
-    connectedCallback(){this.render()}
-    render(){this.shadowRoot.innerHTML=`<style>:host{position:absolute;right:0;top:39px;z-index:20;width:min(340px,85vw);max-height:360px;overflow:auto;padding:7px;border:1px solid var(--caw-line);border-radius:11px;background:var(--caw-panel);box-shadow:var(--caw-shadow)}button{width:100%;padding:9px;margin-bottom:4px;text-align:left;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--caw-text);cursor:pointer}button:hover,button.on{border-color:var(--caw-line);background:var(--caw-panel-2)}small{display:block;margin-top:4px;color:var(--caw-muted)}</style>${this._sessions.length?this._sessions.map(s=>`<button class="${s.sessionId===this._active?'on':''}" data-id="${esc(s.sessionId)}">${esc(s.title||s.sessionId)}<small>${esc(s.model||s.aiProfileId||'')}</small></button>`).join(''):'<small>No sessions</small>'}`;this.shadowRoot.querySelectorAll('button').forEach(button=>button.onclick=()=>this.dispatchEvent(new CustomEvent('session-select',{bubbles:true,composed:true,detail:{sessionId:button.dataset.id}})));}
-  }
-
-  class ClaudeWorkbenchPane extends HTMLElement {
-    constructor(){super();this.attachShadow({mode:'open'});this._client=null;this._context=null;this._controller=null;this._state=Core.createState();this._history=false;this._queued=false;}
-    connectedCallback(){this.ensure();this.render();if(this._context)this._controller.setContext(this._context)}
-    disconnectedCallback(){if(!this.hasAttribute('preserve-controller'))this.destroy()}
-    set client(value){this._client=value;this.ensure();this._controller.setAdapter(value);if(this.isConnected&&this._context)this._controller.setContext(this._context)} get client(){return this._client}
-    set adapter(value){this.client=value} get adapter(){return this.client}
-    set context(value){this._context=value?{...value,contextId:value.contextId||value.projectId}:null;this.ensure();if(this.isConnected)this._controller.setContext(this._context);this.schedule()} get context(){return this._context}
-    get controller(){this.ensure();return this._controller}
-    ensure(){if(this._controller)return;if(!Core)throw new Error('ClaudeWorkbenchCore must be loaded first');this._controller=Core.createController({adapter:this._client,onChange:state=>{this._state=state;this.schedule();this.dispatchEvent(new CustomEvent('workbench-state-change',{detail:state}));this.dispatchEvent(new CustomEvent('running-change',{detail:{running:state.turnRunning,context:state.context}}));}})}
-    schedule(){if(!this.isConnected||this._queued)return;this._queued=true;queueMicrotask(()=>{this._queued=false;const old=this.shadowRoot.querySelector('.messages');const bottom=!old||old.scrollHeight-old.scrollTop-old.clientHeight<90;const draft=this.shadowRoot.querySelector('textarea')?.value||'';this.render();const input=this.shadowRoot.querySelector('textarea');if(input)input.value=draft;const next=this.shadowRoot.querySelector('.messages');if(bottom&&next)next.scrollTop=next.scrollHeight})}
-    line(item){if(item.kind==='status')return`<div class="line status">${esc(item.text)}</div>`;if(item.kind==='tool')return`<details class="line tool" ${item.status==='running'?'open':''}><summary>${esc(item.name||'tool')} · ${esc(item.status||'running')}</summary><pre>${esc(JSON.stringify(item.input||{},null,2))}</pre>${item.result!=null?`<div class="result">${esc(item.result)}</div>`:''}</details>`;return`<div class="line ${esc(item.kind)}"><div class="bubble">${esc(item.text||item.message||'')}</div></div>`}
-    render(){const c=this._context||{};const s=this._state;const usage=s.tokenUsage||{};const percent=usage.hasUsage&&usage.total?Math.min(100,usage.used/usage.total*100):0;const status=s.error?'error':s.turnRunning?'running':s.session.connectionState==='connected'?'connected':'';this.shadowRoot.innerHTML=`<style>${css}</style><section class="shell"><header class="head"><div class="identity"><i class="dot ${status}"></i><div><div class="title">Claude Workbench</div><div class="sub">${esc(c.displayName||'No context')} · ${esc(s.session.connectionState)}</div></div><span class="chip">${esc(s.session.aiProfileId||c.aiProfileId||'No profile')}</span></div><div class="actions" style="position:relative"><button class="icon" data-a="history" title="Session history">◷</button><button class="icon" data-a="new" title="New session">＋</button><button class="icon" data-a="settings" title="AI Profiles">⚙</button>${this._history?'<session-history-popover></session-history-popover>':''}</div></header><main class="messages">${s.lines.length?s.lines.map(item=>this.line(item)).join(''):`<div class="empty"><div><strong>${c.contextId?'Start a conversation':'Select a context'}</strong><br>${c.contextId?'This session is isolated to the active context.':'The host supplies WorkbenchContext.'}</div></div>`}</main><div>${s.permission?`<div class="permission"><div><strong>${esc(s.permission.toolName)} requests permission</strong><span>${esc(s.permission.input?.file_path||s.permission.input?.command||s.permission.message||'')}</span></div><div class="actions"><button class="small deny" data-a="deny">Deny</button><button class="small allow" data-a="allow">Allow</button></div></div>`:''}<div class="composer"><div class="input"><textarea placeholder="Ask Claude Code…" ${!c.contextId||s.requestPending||s.permission?'disabled':''}></textarea><button class="send ${s.turnRunning?'stop':''}" data-a="${s.turnRunning?'stop':'send'}">${s.turnRunning?'■':'↑'}</button></div><div class="foot"><select data-a="mode"><option value="default">Default</option><option value="acceptEdits">Accept Edits</option><option value="plan">Plan</option><option value="bypassPermissions">Bypass</option></select><span>${usage.hasUsage?percent.toFixed(1)+'%':'—'} · ${esc(s.session.model||'Claude Code')}</span></div></div></div></section>`;const history=this.shadowRoot.querySelector('session-history-popover');if(history){history.sessions=s.sessions;history.activeSessionId=s.sessionId}this.bind()}
-    bind(){const q=a=>this.shadowRoot.querySelector(`[data-a="${a}"]`);q('history')?.addEventListener('click',()=>{this._history=!this._history;this.schedule()});q('new')?.addEventListener('click',()=>this.run(()=>this._controller.newSession()));q('settings')?.addEventListener('click',()=>this.dispatchEvent(new CustomEvent('open-profile-settings',{bubbles:true,composed:true,detail:{context:this._context}})));q('allow')?.addEventListener('click',()=>this.run(()=>this._controller.resolvePermission(true)));q('deny')?.addEventListener('click',()=>this.run(()=>this._controller.resolvePermission(false)));q('stop')?.addEventListener('click',()=>this.run(()=>this._controller.abort()));q('mode')?.addEventListener('change',event=>this.run(()=>this._controller.setPermissionMode(event.target.value)));this.shadowRoot.querySelector('session-history-popover')?.addEventListener('session-select',event=>{this._history=false;this.run(()=>this._controller.restoreSession(event.detail.sessionId))});const input=this.shadowRoot.querySelector('textarea');const send=()=>{const value=input?.value.trim();if(value){input.value='';this.run(()=>this._controller.send(value))}};q('send')?.addEventListener('click',send);input?.addEventListener('keydown',event=>{if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();send()}})}
-    async run(fn){try{await fn()}catch(error){this.dispatchEvent(new CustomEvent('workbench-error',{bubbles:true,composed:true,detail:{error}}))}}
-    destroy(){this._controller?.destroy();this._controller=null}
-  }
-
-  class AiProfileSettings extends HTMLElement {
-    constructor(){super();this.attachShadow({mode:'open'});this._client=null;this._profiles=[];this._selected='';this._status='Loading profiles…'}
-    set client(value){this._client=value;if(this.isConnected)this.refresh()} get client(){return this._client}
-    connectedCallback(){this.render();this.refresh()}
-    async refresh(){if(!this._client){this._status='Client not configured';this.render();return}try{this._profiles=await this._client.listProfiles();if(!this._selected)this._selected=this._profiles[0]?.id||'';this._status=`${this._profiles.length} profile(s)`}catch(error){this._status=error.message}this.render()}
-    current(){return this._profiles.find(p=>p.id===this._selected)||{id:'',name:'',provider:'',runtime:'claude-code',protocol:'anthropic-compatible',baseUrl:'',credentialRef:'',models:{default:''},contextWindow:200000,timeoutMs:300000,enabled:true}}
-    render(){const p=this.current();this.shadowRoot.innerHTML=`<style>:host{display:block;height:100%;min-height:440px;color:var(--caw-text);font:12px Inter,"Segoe UI",sans-serif}*{box-sizing:border-box}button,input,select{font:inherit;color:inherit}.shell{height:100%;display:grid;grid-template-columns:210px 1fr;border:1px solid var(--caw-line);border-radius:13px;overflow:hidden;background:var(--caw-panel)}aside{padding:10px;background:var(--caw-panel-2);border-right:1px solid var(--caw-line);overflow:auto}aside button{width:100%;padding:9px;margin-bottom:5px;text-align:left;border:1px solid var(--caw-line);border-radius:8px;background:var(--caw-panel)}aside button.on{border-color:var(--caw-accent)}main{display:grid;grid-template-rows:auto 1fr auto;min-width:0}header,footer{display:flex;justify-content:space-between;align-items:center;padding:13px;border-bottom:1px solid var(--caw-line)}footer{border-top:1px solid var(--caw-line);border-bottom:0}.form{padding:14px;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:11px;align-content:start}label{display:grid;gap:5px;color:var(--caw-muted)}input,select{padding:8px;border:1px solid var(--caw-line);border-radius:8px;background:var(--caw-panel-2)}.wide{grid-column:1/-1}.actions{display:flex;gap:7px}button{padding:7px 9px;border:1px solid var(--caw-line);border-radius:8px;background:var(--caw-panel-2);cursor:pointer}.primary{color:#fff;background:var(--caw-accent);border-color:transparent}@media(max-width:700px){.shell{grid-template-columns:1fr}aside{display:none}.form{grid-template-columns:1fr}.wide{grid-column:auto}}</style><section class="shell"><aside><h3>AI Profiles</h3>${this._profiles.map(item=>`<button class="${item.id===this._selected?'on':''}" data-id="${esc(item.id)}"><strong>${esc(item.name||item.id)}</strong><br><small>${esc(item.provider)} · ${item.credentialConfigured?'credential set':'no credential'}</small></button>`).join('')}<button data-a="new">＋ New profile</button></aside><main><header><div><strong>${esc(p.name||'New profile')}</strong><br><small>${esc(this._status)}</small></div><div class="actions"><button data-a="credential">Credential</button><button data-a="test">Real runtime test</button></div></header><form class="form" id="profile"><label>ID<input name="id" value="${esc(p.id)}" required></label><label>Name<input name="name" value="${esc(p.name)}" required></label><label>Provider<input name="provider" value="${esc(p.provider)}" required></label><label>Runtime<select name="runtime"><option value="claude-code">Claude Code</option></select></label><label>Protocol<select name="protocol"><option value="anthropic-compatible">Anthropic compatible</option><option value="openai-compatible" ${p.protocol==='openai-compatible'?'selected':''}>OpenAI compatible</option></select></label><label>Base URL<input name="baseUrl" value="${esc(p.baseUrl)}" required></label><label class="wide">Default model<input name="model" value="${esc(p.models?.default||'')}" required></label><label>Context window<input name="contextWindow" type="number" value="${Number(p.contextWindow||200000)}"></label><label>Timeout ms<input name="timeoutMs" type="number" value="${Number(p.timeoutMs||300000)}"></label></form><footer><span>${p.credentialConfigured?'Secret stored on server':'Credential required'}</span><div class="actions"><button data-a="delete">Delete</button><button class="primary" data-a="save">Save</button></div></footer></main></section>`;this.bind()}
-    draft(){const f=new FormData(this.shadowRoot.querySelector('#profile'));const model=String(f.get('model')||'').trim();return{...this.current(),id:String(f.get('id')||'').trim(),name:String(f.get('name')||'').trim(),provider:String(f.get('provider')||'').trim(),runtime:'claude-code',protocol:String(f.get('protocol')),baseUrl:String(f.get('baseUrl')||'').trim(),credentialRef:this.current().credentialRef||`credential:${String(f.get('id')||'').trim()}`,models:{default:model,fast:model,reasoning:model,coding:model,largeContext:model},contextWindow:Number(f.get('contextWindow')),timeoutMs:Number(f.get('timeoutMs')),enabled:true}}
-    bind(){this.shadowRoot.querySelectorAll('[data-id]').forEach(button=>button.onclick=()=>{this._selected=button.dataset.id;this.render()});this.shadowRoot.querySelector('[data-a="new"]')?.addEventListener('click',()=>{this._selected='';this._profiles=[];this._status='Create a new profile';this.render()});this.shadowRoot.querySelector('[data-a="save"]')?.addEventListener('click',()=>this.action(async()=>{const profile=await this._client.saveProfile(this.draft());this._selected=profile.id;this.dispatchEvent(new CustomEvent('profile-save',{bubbles:true,composed:true,detail:{profile}}));await this.refresh()}));this.shadowRoot.querySelector('[data-a="delete"]')?.addEventListener('click',()=>this.action(async()=>{if(!this.current().id)return;await this._client.deleteProfile(this.current().id);this._selected='';await this.refresh()}));this.shadowRoot.querySelector('[data-a="credential"]')?.addEventListener('click',()=>this.action(async()=>{const id=this.draft().id;if(!id)throw new Error('Save a profile ID first');const secret=global.prompt?.(`Set credential for ${id}. It will be sent once to the local server and never displayed again.`);if(secret){await this._client.setCredential(id,secret);await this.refresh()}}));this.shadowRoot.querySelector('[data-a="test"]')?.addEventListener('click',()=>this.action(async()=>{const id=this.current().id;if(!id)throw new Error('Save the profile first');const result=await this._client.testProfile(id);this._status=result.runtimeVerified?`REAL PASS · ${result.model} · ${result.durationMs}ms`:'FAILED · runtime not verified';this.dispatchEvent(new CustomEvent('profile-test',{bubbles:true,composed:true,detail:result}));this.render()}))}
-    async action(fn){try{this._status='Working…';this.render();await fn()}catch(error){this._status=error.message;this.dispatchEvent(new CustomEvent('workbench-error',{bubbles:true,composed:true,detail:{error}}));this.render()}}
-  }
-
-  if(!customElements.get('session-history-popover'))customElements.define('session-history-popover',SessionHistoryPopover);
-  if(!customElements.get('claude-workbench-pane'))customElements.define('claude-workbench-pane',ClaudeWorkbenchPane);
-  if(!customElements.get('ai-profile-settings'))customElements.define('ai-profile-settings',AiProfileSettings);
-  global.ClaudeWorkbenchPane=ClaudeWorkbenchPane;global.AiProfileSettings=AiProfileSettings;global.SessionHistoryPopover=SessionHistoryPopover;
-})(typeof window !== 'undefined' ? window : globalThis);
+(function (global) {
+  'use strict';
+  if (!global.customElements || !global.HTMLElement) return;
+
+  const Core = global.ClaudeWorkbenchCore || (typeof require === 'function' ? require('../core') : null);
+  const esc = value => String(value == null ? '' : value).replace(/[&<>"']/g, char => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[char]));
+  const css = `
+    :host{display:block;min-width:0;height:100%;min-height:320px;color:var(--caw-text,#172231);font:13px/1.45 Inter,ui-sans-serif,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif}*{box-sizing:border-box}button,textarea,select,input{font:inherit;color:inherit}button{cursor:pointer}.shell{height:100%;min-height:320px;display:grid;grid-template-rows:54px minmax(0,1fr) auto;overflow:hidden;border:1px solid var(--caw-line,#d7dfe8);border-radius:14px;background:var(--caw-panel,#fff)}.head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 13px;border-bottom:1px solid var(--caw-line,#d7dfe8)}.identity,.actions,.foot,.permission{display:flex;align-items:center}.identity{min-width:0;gap:9px}.dot{width:9px;height:9px;border-radius:50%;background:var(--caw-muted,#687789)}.dot.connected{background:var(--caw-good,#2f7d64)}.dot.running{background:var(--caw-accent,#4f6f8f);box-shadow:0 0 0 4px var(--caw-accent-soft);animation:pulse 1.2s infinite}.dot.error{background:var(--caw-bad,#af4b4b)}@keyframes pulse{50%{opacity:.4}}.title{font-weight:750}.sub{color:var(--caw-muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip{padding:4px 8px;border:1px solid var(--caw-line);border-radius:999px;background:var(--caw-panel-2);color:var(--caw-muted);font-size:10px}.actions{gap:6px}.icon,.send,.small{border:1px solid var(--caw-line);border-radius:8px;background:var(--caw-panel-2)}.icon{width:32px;height:32px}.messages{min-height:0;overflow:auto;padding:14px;background:var(--caw-panel-2)}.empty{height:100%;display:grid;place-items:center;text-align:center;color:var(--caw-muted)}.line{margin:0 0 10px}.bubble{max-width:94%;padding:9px 11px;border:1px solid var(--caw-line);border-radius:10px;background:var(--caw-panel);white-space:pre-wrap;overflow-wrap:anywhere}.user{display:flex;justify-content:flex-end}.user .bubble{max-width:86%;background:var(--caw-accent-soft)}.thinking .bubble{color:var(--caw-muted);font-style:italic;border-style:dashed}.error .bubble{color:var(--caw-bad);background:var(--caw-bad-soft)}.status{text-align:center;color:var(--caw-muted);font-size:11px}.tool{max-width:94%;border:1px solid var(--caw-line);border-radius:10px;background:var(--caw-panel);overflow:hidden}.tool summary{padding:9px 11px;font-weight:700}.tool pre{margin:0;padding:10px;background:#101923;color:#dae6f2;overflow:auto;font-size:11px}.result{padding:9px;border-top:1px solid var(--caw-line);white-space:pre-wrap}.permission{justify-content:space-between;gap:12px;padding:10px;border-top:1px solid var(--caw-line);background:var(--caw-warn-soft)}.permission div{min-width:0}.permission span{display:block;color:var(--caw-muted);font-size:11px;overflow-wrap:anywhere}.permission .actions{flex:none}.small{padding:6px 9px}.allow{border-color:transparent;background:var(--caw-accent);color:#fff}.deny{color:var(--caw-bad)}.composer{border-top:1px solid var(--caw-line)}.input{display:flex;align-items:flex-end;gap:8px;padding:9px 9px 5px}.input textarea{flex:1;min-height:40px;max-height:150px;resize:vertical;padding:9px;border:1px solid var(--caw-line);border-radius:9px;background:var(--caw-panel-2);outline:0}.send{width:40px;height:40px;border:0;background:var(--caw-accent);color:#fff}.send.stop{background:var(--caw-bad)}.foot{justify-content:space-between;padding:0 9px 9px;color:var(--caw-muted);font-size:10px}.foot select{padding:4px;border:1px solid var(--caw-line);border-radius:7px;background:var(--caw-panel-2)}
+  `;
+
+  class SessionHistoryPopover extends HTMLElement {
+    constructor(){super();this.attachShadow({mode:'open'});this._sessions=[];this._active='';}
+    set sessions(value){this._sessions=Array.isArray(value)?value:[];this.render()} set activeSessionId(value){this._active=value||'';this.render()}
+    connectedCallback(){this.render()}
+    render(){this.shadowRoot.innerHTML=`<style>:host{position:absolute;right:0;top:39px;z-index:20;width:min(340px,85vw);max-height:360px;overflow:auto;padding:7px;border:1px solid var(--caw-line);border-radius:11px;background:var(--caw-panel);box-shadow:var(--caw-shadow)}button{width:100%;padding:9px;margin-bottom:4px;text-align:left;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--caw-text);cursor:pointer}button:hover,button.on{border-color:var(--caw-line);background:var(--caw-panel-2)}small{display:block;margin-top:4px;color:var(--caw-muted)}</style>${this._sessions.length?this._sessions.map(s=>`<button class="${s.sessionId===this._active?'on':''}" data-id="${esc(s.sessionId)}">${esc(s.title||s.sessionId)}<small>${esc(s.model||s.aiProfileId||'')}</small></button>`).join(''):'<small>No sessions</small>'}`;this.shadowRoot.querySelectorAll('button').forEach(button=>button.onclick=()=>this.dispatchEvent(new CustomEvent('session-select',{bubbles:true,composed:true,detail:{sessionId:button.dataset.id}})));}
+  }
+
+  class ClaudeWorkbenchPane extends HTMLElement {
+    constructor(){super();this.attachShadow({mode:'open'});this._client=null;this._context=null;this._controller=null;this._state=Core.createState();this._history=false;this._queued=false;}
+    connectedCallback(){this.ensure();this.render();if(this._context)this._controller.setContext(this._context)}
+    disconnectedCallback(){if(!this.hasAttribute('preserve-controller'))this.destroy()}
+    set client(value){this._client=value;this.ensure();this._controller.setAdapter(value);if(this.isConnected&&this._context)this._controller.setContext(this._context)} get client(){return this._client}
+    set adapter(value){this.client=value} get adapter(){return this.client}
+    set context(value){this._context=value?{...value,contextId:value.contextId||value.projectId}:null;this.ensure();if(this.isConnected)this._controller.setContext(this._context);this.schedule()} get context(){return this._context}
+    get controller(){this.ensure();return this._controller}
+    ensure(){if(this._controller)return;if(!Core)throw new Error('ClaudeWorkbenchCore must be loaded first');this._controller=Core.createController({adapter:this._client,onChange:state=>{this._state=state;this.schedule();this.dispatchEvent(new CustomEvent('workbench-state-change',{detail:state}));this.dispatchEvent(new CustomEvent('running-change',{detail:{running:state.turnRunning,context:state.context}}));}})}
+    schedule(){if(!this.isConnected||this._queued)return;this._queued=true;queueMicrotask(()=>{this._queued=false;const old=this.shadowRoot.querySelector('.messages');const bottom=!old||old.scrollHeight-old.scrollTop-old.clientHeight<90;const draft=this.shadowRoot.querySelector('textarea')?.value||'';this.render();const input=this.shadowRoot.querySelector('textarea');if(input)input.value=draft;const next=this.shadowRoot.querySelector('.messages');if(bottom&&next)next.scrollTop=next.scrollHeight})}
+    line(item){if(item.kind==='status')return`<div class="line status">${esc(item.text)}</div>`;if(item.kind==='tool')return`<details class="line tool" ${item.status==='running'?'open':''}><summary>${esc(item.name||'tool')} · ${esc(item.status||'running')}</summary><pre>${esc(JSON.stringify(item.input||{},null,2))}</pre>${item.result!=null?`<div class="result">${esc(item.result)}</div>`:''}</details>`;return`<div class="line ${esc(item.kind)}"><div class="bubble">${esc(item.text||item.message||'')}</div></div>`}
+    render(){const c=this._context||{};const s=this._state;const usage=s.tokenUsage||{};const percent=usage.hasUsage&&usage.total?Math.min(100,usage.used/usage.total*100):0;const status=s.error?'error':s.turnRunning?'running':s.session.connectionState==='connected'?'connected':'';this.shadowRoot.innerHTML=`<style>${css}</style><section class="shell"><header class="head"><div class="identity"><i class="dot ${status}"></i><div><div class="title">Claude Workbench</div><div class="sub">${esc(c.displayName||'No context')} · ${esc(s.session.connectionState)}</div></div><span class="chip">${esc(s.session.aiProfileId||c.aiProfileId||'No profile')}</span></div><div class="actions" style="position:relative"><button class="icon" data-a="history" title="Session history">◷</button><button class="icon" data-a="new" title="New session">＋</button><button class="icon" data-a="settings" title="AI Profiles">⚙</button>${this._history?'<session-history-popover></session-history-popover>':''}</div></header><main class="messages">${s.lines.length?s.lines.map(item=>this.line(item)).join(''):`<div class="empty"><div><strong>${c.contextId?'Start a conversation':'Select a context'}</strong><br>${c.contextId?'This session is isolated to the active context.':'The host supplies WorkbenchContext.'}</div></div>`}</main><div>${s.permission?`<div class="permission"><div><strong>${esc(s.permission.toolName)} requests permission</strong><span>${esc(s.permission.input?.file_path||s.permission.input?.command||s.permission.message||'')}</span></div><div class="actions"><button class="small deny" data-a="deny">Deny</button><button class="small allow" data-a="allow">Allow</button></div></div>`:''}<div class="composer"><div class="input"><textarea placeholder="Ask Claude Code…" ${!c.contextId||s.requestPending||s.permission?'disabled':''}></textarea><button class="send ${s.turnRunning?'stop':''}" data-a="${s.turnRunning?'stop':'send'}">${s.turnRunning?'■':'↑'}</button></div><div class="foot"><select data-a="mode"><option value="default">Default</option><option value="acceptEdits">Accept Edits</option><option value="plan">Plan</option><option value="bypassPermissions">Bypass</option></select><span>${usage.hasUsage?percent.toFixed(1)+'%':'—'} · ${esc(s.session.model||'Claude Code')}</span></div></div></div></section>`;const history=this.shadowRoot.querySelector('session-history-popover');if(history){history.sessions=s.sessions;history.activeSessionId=s.sessionId}this.bind()}
+    bind(){const q=a=>this.shadowRoot.querySelector(`[data-a="${a}"]`);q('history')?.addEventListener('click',()=>{this._history=!this._history;this.schedule()});q('new')?.addEventListener('click',()=>this.run(()=>this._controller.newSession()));q('settings')?.addEventListener('click',()=>this.dispatchEvent(new CustomEvent('open-profile-settings',{bubbles:true,composed:true,detail:{context:this._context}})));q('allow')?.addEventListener('click',()=>this.run(()=>this._controller.resolvePermission(true)));q('deny')?.addEventListener('click',()=>this.run(()=>this._controller.resolvePermission(false)));q('stop')?.addEventListener('click',()=>this.run(()=>this._controller.abort()));q('mode')?.addEventListener('change',event=>this.run(()=>this._controller.setPermissionMode(event.target.value)));this.shadowRoot.querySelector('session-history-popover')?.addEventListener('session-select',event=>{this._history=false;this.run(()=>this._controller.restoreSession(event.detail.sessionId))});const input=this.shadowRoot.querySelector('textarea');const send=()=>{const value=input?.value.trim();if(value){input.value='';this.run(()=>this._controller.send(value))}};q('send')?.addEventListener('click',send);input?.addEventListener('keydown',event=>{if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();send()}})}
+    async run(fn){try{await fn()}catch(error){this.dispatchEvent(new CustomEvent('workbench-error',{bubbles:true,composed:true,detail:{error}}))}}
+    destroy(){this._controller?.destroy();this._controller=null}
+  }
+
+  class AiProfileSettings extends HTMLElement {
+    constructor(){super();this.attachShadow({mode:'open'});this._client=null;this._profiles=[];this._selected='';this._status='Loading profiles…'}
+    set client(value){this._client=value;if(this.isConnected)this.refresh()} get client(){return this._client}
+    connectedCallback(){this.render();this.refresh()}
+    async refresh(){if(!this._client){this._status='Client not configured';this.render();return}try{this._profiles=await this._client.listProfiles();if(!this._selected)this._selected=this._profiles[0]?.id||'';this._status=`${this._profiles.length} profile(s)`}catch(error){this._status=error.message}this.render()}
+    current(){return this._profiles.find(p=>p.id===this._selected)||{id:'',name:'',provider:'',runtime:'claude-code',protocol:'anthropic-compatible',baseUrl:'',credentialRef:'',models:{default:''},contextWindow:200000,timeoutMs:300000,enabled:true}}
+    render(){const p=this.current();this.shadowRoot.innerHTML=`<style>:host{display:block;height:100%;min-height:440px;color:var(--caw-text);font:12px Inter,"Segoe UI",sans-serif}*{box-sizing:border-box}button,input,select{font:inherit;color:inherit}.shell{height:100%;display:grid;grid-template-columns:210px 1fr;border:1px solid var(--caw-line);border-radius:13px;overflow:hidden;background:var(--caw-panel)}aside{padding:10px;background:var(--caw-panel-2);border-right:1px solid var(--caw-line);overflow:auto}aside button{width:100%;padding:9px;margin-bottom:5px;text-align:left;border:1px solid var(--caw-line);border-radius:8px;background:var(--caw-panel)}aside button.on{border-color:var(--caw-accent)}main{display:grid;grid-template-rows:auto 1fr auto;min-width:0}header,footer{display:flex;justify-content:space-between;align-items:center;padding:13px;border-bottom:1px solid var(--caw-line)}footer{border-top:1px solid var(--caw-line);border-bottom:0}.form{padding:14px;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:11px;align-content:start}label{display:grid;gap:5px;color:var(--caw-muted)}input,select{padding:8px;border:1px solid var(--caw-line);border-radius:8px;background:var(--caw-panel-2)}.wide{grid-column:1/-1}.actions{display:flex;gap:7px}button{padding:7px 9px;border:1px solid var(--caw-line);border-radius:8px;background:var(--caw-panel-2);cursor:pointer}.primary{color:#fff;background:var(--caw-accent);border-color:transparent}@media(max-width:700px){.shell{grid-template-columns:1fr}aside{display:none}.form{grid-template-columns:1fr}.wide{grid-column:auto}}</style><section class="shell"><aside><h3>AI Profiles</h3>${this._profiles.map(item=>`<button class="${item.id===this._selected?'on':''}" data-id="${esc(item.id)}"><strong>${esc(item.name||item.id)}</strong><br><small>${esc(item.provider)} · ${item.credentialConfigured?'credential set':'no credential'}</small></button>`).join('')}<button data-a="new">＋ New profile</button></aside><main><header><div><strong>${esc(p.name||'New profile')}</strong><br><small>${esc(this._status)}</small></div><div class="actions"><button data-a="credential">Credential</button><button data-a="test">Real runtime test</button></div></header><form class="form" id="profile"><label>ID<input name="id" value="${esc(p.id)}" required></label><label>Name<input name="name" value="${esc(p.name)}" required></label><label>Provider<input name="provider" value="${esc(p.provider)}" required></label><label>Runtime<select name="runtime"><option value="claude-code">Claude Code</option></select></label><label>Protocol<select name="protocol"><option value="anthropic-compatible">Anthropic compatible</option><option value="openai-compatible" ${p.protocol==='openai-compatible'?'selected':''}>OpenAI compatible</option></select></label><label>Base URL<input name="baseUrl" value="${esc(p.baseUrl)}" required></label><label class="wide">Default model<input name="model" value="${esc(p.models?.default||'')}" required></label><label>Context window<input name="contextWindow" type="number" value="${Number(p.contextWindow||200000)}"></label><label>Timeout ms<input name="timeoutMs" type="number" value="${Number(p.timeoutMs||300000)}"></label></form><footer><span>${p.credentialConfigured?'Secret stored on server':'Credential required'}</span><div class="actions"><button data-a="delete">Delete</button><button class="primary" data-a="save">Save</button></div></footer></main></section>`;this.bind()}
+    draft(){const f=new FormData(this.shadowRoot.querySelector('#profile'));const model=String(f.get('model')||'').trim();return{...this.current(),id:String(f.get('id')||'').trim(),name:String(f.get('name')||'').trim(),provider:String(f.get('provider')||'').trim(),runtime:'claude-code',protocol:String(f.get('protocol')),baseUrl:String(f.get('baseUrl')||'').trim(),credentialRef:this.current().credentialRef||`credential:${String(f.get('id')||'').trim()}`,models:{default:model,fast:model,reasoning:model,coding:model,largeContext:model},contextWindow:Number(f.get('contextWindow')),timeoutMs:Number(f.get('timeoutMs')),enabled:true}}
+    bind(){this.shadowRoot.querySelectorAll('[data-id]').forEach(button=>button.onclick=()=>{this._selected=button.dataset.id;this.render()});this.shadowRoot.querySelector('[data-a="new"]')?.addEventListener('click',()=>{this._selected='';this._profiles=[];this._status='Create a new profile';this.render()});this.shadowRoot.querySelector('[data-a="save"]')?.addEventListener('click',()=>this.action(async()=>{const profile=await this._client.saveProfile(this.draft());this._selected=profile.id;this.dispatchEvent(new CustomEvent('profile-save',{bubbles:true,composed:true,detail:{profile}}));await this.refresh()}));this.shadowRoot.querySelector('[data-a="delete"]')?.addEventListener('click',()=>this.action(async()=>{if(!this.current().id)return;await this._client.deleteProfile(this.current().id);this._selected='';await this.refresh()}));this.shadowRoot.querySelector('[data-a="credential"]')?.addEventListener('click',()=>this.action(async()=>{const id=this.draft().id;if(!id)throw new Error('Save a profile ID first');const secret=global.prompt?.(`Set credential for ${id}. It will be sent once to the local server and never displayed again.`);if(secret){await this._client.setCredential(id,secret);await this.refresh()}}));this.shadowRoot.querySelector('[data-a="test"]')?.addEventListener('click',()=>this.action(async()=>{const id=this.current().id;if(!id)throw new Error('Save the profile first');const result=await this._client.testProfile(id);this._status=result.runtimeVerified?`REAL PASS · ${result.model} · ${result.durationMs}ms`:'FAILED · runtime not verified';this.dispatchEvent(new CustomEvent('profile-test',{bubbles:true,composed:true,detail:result}));this.render()}))}
+    async action(fn){try{this._status='Working…';this.render();await fn()}catch(error){this._status=error.message;this.dispatchEvent(new CustomEvent('workbench-error',{bubbles:true,composed:true,detail:{error}}));this.render()}}
+  }
+
+  if(!customElements.get('session-history-popover'))customElements.define('session-history-popover',SessionHistoryPopover);
+  if(!customElements.get('claude-workbench-pane'))customElements.define('claude-workbench-pane',ClaudeWorkbenchPane);
+  if(!customElements.get('ai-profile-settings'))customElements.define('ai-profile-settings',AiProfileSettings);
+  global.ClaudeWorkbenchPane=ClaudeWorkbenchPane;global.AiProfileSettings=AiProfileSettings;global.SessionHistoryPopover=SessionHistoryPopover;
+})(typeof window !== 'undefined' ? window : globalThis);

package/packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claude-ai-workbench/ui",
-  "version": "0.13.2",
+  "version": "0.13.3",
   "type": "commonjs",
   "main": "ai-profile-settings.js",
   "browser": "ai-profile-settings.js",
@@ -33,7 +33,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@claude-ai-workbench/core": "0.13.2"
+    "@claude-ai-workbench/core": "0.13.3"
   },
   "engines": {
     "node": ">=18"

package/packages/ui/theme.css

@@ -1,13 +1,13 @@
-:root {
-  --caw-page:#eef2f6; --caw-panel:#fff; --caw-panel-2:#f6f8fb; --caw-panel-3:#e8edf3;
-  --caw-line:#d7dfe8; --caw-line-strong:#bcc8d5; --caw-text:#172231; --caw-muted:#687789;
-  --caw-accent:#4f6f8f; --caw-accent-soft:rgba(79,111,143,.12); --caw-good:#2f7d64;
-  --caw-warn:#9a7428; --caw-warn-soft:rgba(154,116,40,.12); --caw-bad:#af4b4b; --caw-bad-soft:rgba(175,75,75,.11);
-  --caw-shadow:0 18px 56px rgba(24,34,48,.12);
-}
-[data-theme="dark"],.theme-dark {
-  --caw-page:#090e14; --caw-panel:#151d27; --caw-panel-2:#1a2430; --caw-panel-3:#202c39;
-  --caw-line:#2b3949; --caw-line-strong:#3a4a5d; --caw-text:#e6edf5; --caw-muted:#9aa9ba;
-  --caw-accent:#7896aa; --caw-accent-soft:rgba(120,150,170,.13); --caw-good:#76b69c;
-  --caw-warn:#c6a45f; --caw-warn-soft:rgba(198,164,95,.13); --caw-bad:#da7777; --caw-bad-soft:rgba(218,119,119,.12);
-}
+:root {
+  --caw-page:#eef2f6; --caw-panel:#fff; --caw-panel-2:#f6f8fb; --caw-panel-3:#e8edf3;
+  --caw-line:#d7dfe8; --caw-line-strong:#bcc8d5; --caw-text:#172231; --caw-muted:#687789;
+  --caw-accent:#4f6f8f; --caw-accent-soft:rgba(79,111,143,.12); --caw-good:#2f7d64;
+  --caw-warn:#9a7428; --caw-warn-soft:rgba(154,116,40,.12); --caw-bad:#af4b4b; --caw-bad-soft:rgba(175,75,75,.11);
+  --caw-shadow:0 18px 56px rgba(24,34,48,.12);
+}
+[data-theme="dark"],.theme-dark {
+  --caw-page:#090e14; --caw-panel:#151d27; --caw-panel-2:#1a2430; --caw-panel-3:#202c39;
+  --caw-line:#2b3949; --caw-line-strong:#3a4a5d; --caw-text:#e6edf5; --caw-muted:#9aa9ba;
+  --caw-accent:#7896aa; --caw-accent-soft:rgba(120,150,170,.13); --caw-good:#76b69c;
+  --caw-warn:#c6a45f; --caw-warn-soft:rgba(198,164,95,.13); --caw-bad:#da7777; --caw-bad-soft:rgba(218,119,119,.12);
+}

package/src/assets/claude-prompts.json

@@ -1,21 +1,21 @@
-{
-  "schema": "claude-prompts/v1",
-  "prompts": {
-    "initial-analysis": {
-      "description": "Initial project analysis. Claude runs from the KB workspace and reads the source project via PROJECT_PATH.",
-      "model": "sonnet",
-      "permissionMode": "bypassPermissions",
-      "allowedTools": ["Read", "Grep", "Glob"],
-      "systemPrompt": "You are an expert project analyst building a knowledge base. The current working directory is the knowledge-base workspace, not the source project. Read source code from PROJECT_PATH and treat KB_PATH as the write target for knowledge-base drafts and updates. Output STRICT JSON only: no prose and no markdown fences. The JSON must match this shape:\n\n{\n  \"goalDraft\": {\n    \"oneLine\": \"one-sentence description of what this project is\",\n    \"positioning\": \"paragraph describing the project's role and core value\",\n    \"coreValue\": [\"bullet points of core value to developers / teams\"],\n    \"painPoints\": [{\"pain\": \"...\", \"legacyApproach\": \"...\", \"projectApproach\": \"...\"}]\n  },\n  \"analysisDraft\": {\n    \"framework\": \"primary framework / language / stack\",\n    \"modules\": [{\"name\": \"...\", \"responsibility\": \"...\", \"keyFiles\": [\"path/to/file\"]}],\n    \"architecture\": \"paragraph describing the architecture and data flow\",\n    \"evidence\": [{\"claim\": \"...\", \"file\": \"path:line\"}]\n  },\n  \"features\": [{\"slug\": \"kebab-case-slug\", \"name\": \"...\", \"summary\": \"...\"}]\n}\n\nUse the Read, Grep, and Glob tools to investigate PROJECT_PATH. Cite real source file paths in evidence. Do not invent modules that do not exist. Do not modify the source project unless the user explicitly asks for source changes.",
-      "userPrompt": "Analyze the source project at PROJECT_PATH. The current working directory is KB_PATH.\n\nProject context:\n- Slug: {{SLUG}}\n- Source project path: {{PROJECT_PATH}}\n- Knowledge-base path: {{KB_PATH}}\n- Primary language: {{PRIMARY_LANGUAGE}}\n- Knowledge language: {{KNOWLEDGE_LANGUAGE}}\n\nTasks:\n1. Identify the framework, main tech stack, and language distribution.\n2. List the core modules / top-level directories and their responsibilities.\n3. Describe the architecture and data flow at a high level.\n4. Identify 3-6 user-facing features.\n5. Capture 4-8 evidence-backed claims with file:line citations.\n\nWrite the knowledge-base content in {{KNOWLEDGE_LANGUAGE}} where natural, but keep code identifiers, file paths, and JSON keys in English.\n\nReturn ONLY the JSON object described in the system prompt."
-    },
-    "commit-analysis": {
-      "description": "Batch analysis of one or more commits. Claude runs from the KB workspace and reads the source project via PROJECT_PATH.",
-      "model": "sonnet",
-      "permissionMode": "bypassPermissions",
-      "allowedTools": ["Read", "Grep", "Glob", "Bash"],
-      "systemPrompt": "You are a commit analyst building a knowledge base. The current working directory is the knowledge-base workspace, not the source project. Read source code from PROJECT_PATH and treat KB_PATH as the write target for knowledge-base drafts and updates. For each commit provided, output a structured change description. STRICT JSON only: no prose.\n\nOutput shape:\n{\n  \"changes\": [\n    {\n      \"hash\": \"<full-or-short-hash>\",\n      \"subject\": \"<original commit subject>\",\n      \"type\": \"feat|fix|refactor|docs|test|chore|infra\",\n      \"classification\": \"feature|bugfix|infrastructure|documentation|test\",\n      \"summary\": \"one-paragraph description of what changed and why\",\n      \"files\": [\"paths/touched\"],\n      \"evidence\": [{\"claim\": \"...\", \"file\": \"path:line\"}]\n    }\n  ]\n}\n\nUse git commands against PROJECT_PATH and Read for inspecting changed files. Cite real source file paths. Do not modify the source project unless the user explicitly asks for source changes.",
-      "userPrompt": "Analyze the following commits in the source project at PROJECT_PATH. The current working directory is KB_PATH.\n\nProject: {{SLUG}} ({{PROJECT_PATH}})\nKnowledge-base path: {{KB_PATH}}\nCommit range: {{COMMIT_RANGE}}\nCommits to analyze:\n{{COMMIT_HASHES}}\n\nFor each commit, produce one entry in the changes array. Use git commands against {{PROJECT_PATH}} and Read for inspecting changed source files. Summarize in {{KNOWLEDGE_LANGUAGE}}; keep identifiers and paths in English.\n\nReturn ONLY the JSON object."
-    }
-  }
-}
+{
+  "schema": "claude-prompts/v1",
+  "prompts": {
+    "initial-analysis": {
+      "description": "Initial project analysis. Claude runs from the KB workspace and reads the source project via PROJECT_PATH.",
+      "model": "sonnet",
+      "permissionMode": "bypassPermissions",
+      "allowedTools": ["Read", "Grep", "Glob"],
+      "systemPrompt": "You are an expert project analyst building a knowledge base. The current working directory is the knowledge-base workspace, not the source project. Read source code from PROJECT_PATH and treat KB_PATH as the write target for knowledge-base drafts and updates. Output STRICT JSON only: no prose and no markdown fences. The JSON must match this shape:\n\n{\n  \"goalDraft\": {\n    \"oneLine\": \"one-sentence description of what this project is\",\n    \"positioning\": \"paragraph describing the project's role and core value\",\n    \"coreValue\": [\"bullet points of core value to developers / teams\"],\n    \"painPoints\": [{\"pain\": \"...\", \"legacyApproach\": \"...\", \"projectApproach\": \"...\"}]\n  },\n  \"analysisDraft\": {\n    \"framework\": \"primary framework / language / stack\",\n    \"modules\": [{\"name\": \"...\", \"responsibility\": \"...\", \"keyFiles\": [\"path/to/file\"]}],\n    \"architecture\": \"paragraph describing the architecture and data flow\",\n    \"evidence\": [{\"claim\": \"...\", \"file\": \"path:line\"}]\n  },\n  \"features\": [{\"slug\": \"kebab-case-slug\", \"name\": \"...\", \"summary\": \"...\"}]\n}\n\nUse the Read, Grep, and Glob tools to investigate PROJECT_PATH. Cite real source file paths in evidence. Do not invent modules that do not exist. Do not modify the source project unless the user explicitly asks for source changes.",
+      "userPrompt": "Analyze the source project at PROJECT_PATH. The current working directory is KB_PATH.\n\nProject context:\n- Slug: {{SLUG}}\n- Source project path: {{PROJECT_PATH}}\n- Knowledge-base path: {{KB_PATH}}\n- Primary language: {{PRIMARY_LANGUAGE}}\n- Knowledge language: {{KNOWLEDGE_LANGUAGE}}\n\nTasks:\n1. Identify the framework, main tech stack, and language distribution.\n2. List the core modules / top-level directories and their responsibilities.\n3. Describe the architecture and data flow at a high level.\n4. Identify 3-6 user-facing features.\n5. Capture 4-8 evidence-backed claims with file:line citations.\n\nWrite the knowledge-base content in {{KNOWLEDGE_LANGUAGE}} where natural, but keep code identifiers, file paths, and JSON keys in English.\n\nReturn ONLY the JSON object described in the system prompt."
+    },
+    "commit-analysis": {
+      "description": "Batch analysis of one or more commits. Claude runs from the KB workspace and reads the source project via PROJECT_PATH.",
+      "model": "sonnet",
+      "permissionMode": "bypassPermissions",
+      "allowedTools": ["Read", "Grep", "Glob", "Bash"],
+      "systemPrompt": "You are a commit analyst building a knowledge base. The current working directory is the knowledge-base workspace, not the source project. Read source code from PROJECT_PATH and treat KB_PATH as the write target for knowledge-base drafts and updates. For each commit provided, output a structured change description. STRICT JSON only: no prose.\n\nOutput shape:\n{\n  \"changes\": [\n    {\n      \"hash\": \"<full-or-short-hash>\",\n      \"subject\": \"<original commit subject>\",\n      \"type\": \"feat|fix|refactor|docs|test|chore|infra\",\n      \"classification\": \"feature|bugfix|infrastructure|documentation|test\",\n      \"summary\": \"one-paragraph description of what changed and why\",\n      \"files\": [\"paths/touched\"],\n      \"evidence\": [{\"claim\": \"...\", \"file\": \"path:line\"}]\n    }\n  ]\n}\n\nUse git commands against PROJECT_PATH and Read for inspecting changed files. Cite real source file paths. Do not modify the source project unless the user explicitly asks for source changes.",
+      "userPrompt": "Analyze the following commits in the source project at PROJECT_PATH. The current working directory is KB_PATH.\n\nProject: {{SLUG}} ({{PROJECT_PATH}})\nKnowledge-base path: {{KB_PATH}}\nCommit range: {{COMMIT_RANGE}}\nCommits to analyze:\n{{COMMIT_HASHES}}\n\nFor each commit, produce one entry in the changes array. Use git commands against {{PROJECT_PATH}} and Read for inspecting changed source files. Summarize in {{KNOWLEDGE_LANGUAGE}}; keep identifiers and paths in English.\n\nReturn ONLY the JSON object."
+    }
+  }
+}

package/src/backend/http/ai-profile-routes.js

@@ -1,61 +1,61 @@
-const { AI_VENDOR_PRESETS, listVendorPresetNames } = require('../lib/ai-vendor-presets');
-const { listAdapters } = require('../lib/ai-adapter');
-const { sendJson, readBody } = require('./node-helpers');
-
-async function handleAiProfileRoutes(req, res, options = {}) {
-  const store = options.store || options.profileStore;
-  const basePath = options.basePath || '/api/ai-profiles';
-  const vendorPath = options.vendorPath || '/api/ai-vendor-presets';
-  const url = options.url || new URL(req.url, 'http://127.0.0.1');
-  const pathname = url.pathname;
-  if (pathname !== basePath && pathname !== vendorPath && !pathname.startsWith(`${basePath}/`)) return false;
-  if (!store) {
-    sendJson(res, 503, { ok: false, error: 'AI profile store is not available' });
-    return true;
-  }
-
-  try {
-    if (req.method === 'GET' && pathname === basePath) {
-      const publicConfig = store.publicConfig();
-      sendJson(res, 200, {
-        ok: true,
-        ...publicConfig,
-        adapters: listAdapters(),
-      });
-      return true;
-    }
-
-    if (req.method === 'GET' && pathname === vendorPath) {
-      sendJson(res, 200, { ok: true, presets: AI_VENDOR_PRESETS, names: listVendorPresetNames() });
-      return true;
-    }
-
-    if (req.method === 'PUT' && pathname === basePath) {
-      const body = await readBody(req);
-      const saved = store.writeConfig(body);
-      sendJson(res, 200, { ok: true, config: saved });
-      return true;
-    }
-
-    if (req.method === 'POST' && pathname === `${basePath}/test`) {
-      const body = await readBody(req);
-      const result = await store.testProfile({
-        profileId: body.profileId,
-        profile: body.profile,
-        prompt: body.prompt || 'what model are you?',
-      });
-      sendJson(res, 200, result);
-      return true;
-    }
-  } catch (error) {
-    sendJson(res, error.status || 400, { ok: false, error: error.message, errors: error.errors || undefined });
-    return true;
-  }
-
-  sendJson(res, 404, { ok: false, error: 'unknown AI profile route' });
-  return true;
-}
-
-module.exports = {
-  handleAiProfileRoutes,
-};
+const { AI_VENDOR_PRESETS, listVendorPresetNames } = require('../lib/ai-vendor-presets');
+const { listAdapters } = require('../lib/ai-adapter');
+const { sendJson, readBody } = require('./node-helpers');
+
+async function handleAiProfileRoutes(req, res, options = {}) {
+  const store = options.store || options.profileStore;
+  const basePath = options.basePath || '/api/ai-profiles';
+  const vendorPath = options.vendorPath || '/api/ai-vendor-presets';
+  const url = options.url || new URL(req.url, 'http://127.0.0.1');
+  const pathname = url.pathname;
+  if (pathname !== basePath && pathname !== vendorPath && !pathname.startsWith(`${basePath}/`)) return false;
+  if (!store) {
+    sendJson(res, 503, { ok: false, error: 'AI profile store is not available' });
+    return true;
+  }
+
+  try {
+    if (req.method === 'GET' && pathname === basePath) {
+      const publicConfig = store.publicConfig();
+      sendJson(res, 200, {
+        ok: true,
+        ...publicConfig,
+        adapters: listAdapters(),
+      });
+      return true;
+    }
+
+    if (req.method === 'GET' && pathname === vendorPath) {
+      sendJson(res, 200, { ok: true, presets: AI_VENDOR_PRESETS, names: listVendorPresetNames() });
+      return true;
+    }
+
+    if (req.method === 'PUT' && pathname === basePath) {
+      const body = await readBody(req);
+      const saved = store.writeConfig(body);
+      sendJson(res, 200, { ok: true, config: saved });
+      return true;
+    }
+
+    if (req.method === 'POST' && pathname === `${basePath}/test`) {
+      const body = await readBody(req);
+      const result = await store.testProfile({
+        profileId: body.profileId,
+        profile: body.profile,
+        prompt: body.prompt || 'what model are you?',
+      });
+      sendJson(res, 200, result);
+      return true;
+    }
+  } catch (error) {
+    sendJson(res, error.status || 400, { ok: false, error: error.message, errors: error.errors || undefined });
+    return true;
+  }
+
+  sendJson(res, 404, { ok: false, error: 'unknown AI profile route' });
+  return true;
+}
+
+module.exports = {
+  handleAiProfileRoutes,
+};