+ setSearchOpen(false)}
+ sessions={sessions}
+ onNewSession={() => setApplied('新会话')}
+ onRefreshSessions={() => setApplied('刷新')}
+ onOpenSettings={() => setApplied('设置')}
+ onOpenSession={() => setApplied('打开会话')}
+ />
+ )}
+
+ )
+}
+
+createRoot(document.getElementById('root')!).render(
+ beautifului.dev · 8 组件直连验收（light）
+ +
+
+
+ {show('sidebar') && (
+
+ {show('thinking') && (
+
+
+ )}
+
+ {show('streaming') && (
+
+ setApplied(q)}>
+
+
+ )}
+
+ {show('tools') && (
+
+
+ )}
+
+ {show('approval') && (
+
+ setApplied(approved ? '已允许' : '已拒绝')} />
+
+
+ )}
+
+ {show('code') && (
+
+
+ )}
+
+ {show('selection') && (
+
+
+ )}
+
+ {show('loading') && (
+
+
+ )}
+
+
+ {show('sidebar') && (
+
+
+
+
+
+
+
+ setApplied(`${instruction}：${selection.slice(0, 18)}…`)} />
+
+ {applied && {PARA}
+onApply → {applied}
} +
+
+
+
+ )}
+
+ undefined}
+ onOpenWorkspace={() => undefined}
+ onNewSession={() => setApplied('新会话')}
+ onOpenSession={() => setApplied('打开会话')}
+ onRenameSession={() => setApplied('重命名')}
+ onDeleteSession={() => setApplied('删除')}
+ onRefreshSessions={() => setApplied('刷新')}
+ onOpenSearch={() => setSearchOpen(true)}
+ onOpenSettings={() => setApplied('设置')}
+ />
+
+ ` +
+ `
` +
+ `
`
+ )
+ )
+ await sleep(350)
+ const image = await win.webContents.capturePage({ x: 0, y: 0, width: size, height: size })
+ return image.toPNG()
+}
+
+async function run() {
+ const svg = readFileSync(join(ROOT, 'build', 'icon.svg'), 'utf8')
+ const svgDataUrl = 'data:image/svg+xml;base64,' + Buffer.from(svg, 'utf8').toString('base64')
+
+ const win = new BrowserWindow({
+ width: 256,
+ height: 256,
+ show: false,
+ frame: false,
+ transparent: true,
+ webPreferences: { paintWhenInitiallyHidden: true, offscreen: true }
+ })
+
+ const pngs = []
+ for (const size of SIZES) {
+ await win.setSize ? win.setSize(size, size) : null
+ const png = await renderSize(win, svgDataUrl, size)
+ pngs.push({ size, data: png })
+ console.log('rendered', size, `${png.length}B`)
+ }
+
+ writeFileSync(join(ROOT, 'build', 'icon.png'), pngs.find((p) => p.size === 256).data)
+ writeFileSync(join(ROOT, 'build', 'icon.ico'), buildIco(pngs))
+ console.log('written build/icon.ico & build/icon.png')
+ app.exit(0)
+}
+
+app.whenReady().then(run).catch((err) => {
+ console.error(err)
+ app.exit(1)
+})
diff --git a/apps/desktop/scripts/read-dts.cjs b/apps/desktop/scripts/read-dts.cjs
new file mode 100644
index 0000000..535f5ab
--- /dev/null
+++ b/apps/desktop/scripts/read-dts.cjs
@@ -0,0 +1,15 @@
+// 打印 pi SDK 关键类型定义（skills / slash-commands / prompt 参数）
+const fs = require('node:fs')
+const files = [
+ 'dist/core/skills.d.ts',
+ 'dist/core/slash-commands.d.ts',
+ 'dist/modes/interactive/components/skill-invocation-message.d.ts'
+]
+for (const f of files) {
+ console.log('=====', f)
+ try {
+ console.log(fs.readFileSync(f, 'utf8'))
+ } catch (e) {
+ console.log('READ FAIL', e.message)
+ }
+}
diff --git a/apps/desktop/scripts/read-dts2.cjs b/apps/desktop/scripts/read-dts2.cjs
new file mode 100644
index 0000000..af57092
--- /dev/null
+++ b/apps/desktop/scripts/read-dts2.cjs
@@ -0,0 +1,22 @@
+// 打印 ImageContent / PromptTemplate / AgentSessionServices 类型
+const fs = require('node:fs')
+const root = 'C:/Users/21976/Desktop/Develop/agent-store-operations/apps/desktop/node_modules'
+const files = [
+ [root + '/@earendil-works/pi-ai/dist/compat.d.ts', /export (interface|type) (ImageContent|TextContent)[\s\S]*?\n\}/],
+ [root + '/@earendil-works/pi-coding-agent/dist/core/prompt-templates.d.ts', null],
+ [root + '/@earendil-works/pi-coding-agent/dist/core/sdk.d.ts', /export interface AgentSessionServices[\s\S]*?\n\}/]
+]
+for (const [f, re] of files) {
+ console.log('=====', f.split('/').slice(-2).join('/'))
+ try {
+ const s = fs.readFileSync(f, 'utf8')
+ if (re) {
+ const m = s.match(re)
+ console.log(m ? m[0] : '(no match)')
+ } else {
+ console.log(s.slice(0, 2500))
+ }
+ } catch (e) {
+ console.log('READ FAIL', e.message)
+ }
+}
diff --git a/apps/desktop/scripts/repro-empty-workspace.mjs b/apps/desktop/scripts/repro-empty-workspace.mjs
new file mode 100644
index 0000000..6aabd83
--- /dev/null
+++ b/apps/desktop/scripts/repro-empty-workspace.mjs
@@ -0,0 +1,21 @@
+// 验证 pi SDK 对空目录（无会话的工作区）的行为：
+// node scripts/repro-empty-workspace.mjs "C:\path\to\empty\dir"
+import { SessionManager, getAgentDir } from '@earendil-works/pi-coding-agent'
+import { mkdirSync, mkdtempSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+
+const target = process.argv[2] ?? mkdtempSync(join(tmpdir(), 'ws-empty-'))
+mkdirSync(target, { recursive: true })
+console.log('target cwd:', target)
+
+try {
+ const sm = SessionManager.continueRecent(target)
+ console.log('continueRecent OK, sessionFile:', sm.sessionFile ?? '(none)')
+ const list = await SessionManager.list(target)
+ console.log('list count:', list.length)
+} catch (err) {
+ console.error('continueRecent FAILED:', err instanceof Error ? err.message : err)
+ process.exit(1)
+}
+console.log('agentDir:', getAgentDir())
diff --git a/apps/desktop/scripts/repro-event-flow.mjs b/apps/desktop/scripts/repro-event-flow.mjs
new file mode 100644
index 0000000..fc3a8b3
--- /dev/null
+++ b/apps/desktop/scripts/repro-event-flow.mjs
@@ -0,0 +1,103 @@
+// 复现渲染层"输出一闪而过"：用与 agent-service.ts 相同的 SDK 调用链，
+// 订阅全部事件并打印事件序列与消息对象结构。
+import os from 'node:os'
+import {
+ createAgentSessionRuntime,
+ createAgentSessionServices,
+ createAgentSessionFromServices,
+ getAgentDir,
+ SessionManager
+} from '@earendil-works/pi-coding-agent'
+
+const cwd = os.homedir()
+const agentDir = getAgentDir()
+
+const services = await createAgentSessionServices({ cwd, agentDir })
+const factory = async (opts) => {
+ const result = await createAgentSessionFromServices({
+ services,
+ sessionManager: opts.sessionManager,
+ sessionStartEvent: opts.sessionStartEvent
+ })
+ return { ...result, services, diagnostics: services.diagnostics }
+}
+
+const sessionManager = SessionManager.continueRecent(cwd)
+const runtime = await createAgentSessionRuntime(factory, { cwd, agentDir, sessionManager })
+const session = runtime.session
+
+let rebindCount = 0
+runtime.setRebindSession(async (s) => {
+ rebindCount++
+ console.log(`\n>>> REBIND fired (#${rebindCount}) — 渲染层会收到 session_switched，messages.length=${s.messages.length}`)
+})
+
+session.subscribe((event) => {
+ switch (event.type) {
+ case 'message_start':
+ console.log('EVT message_start role=', JSON.stringify(event.message?.role))
+ break
+ case 'message_update': {
+ const inner = event.assistantMessageEvent
+ if (inner) {
+ if (inner.type.endsWith('_delta')) {
+ process.stdout.write(`.`)
+ } else {
+ console.log(`EVT message_update ${inner.type}`)
+ }
+ }
+ break
+ }
+ case 'message_end': {
+ const m = event.message
+ console.log('\nEVT message_end role=', m?.role)
+ console.log(' message keys:', Object.keys(m ?? {}))
+ try {
+ JSON.stringify(m)
+ console.log(' JSON.stringify: OK, length=', JSON.stringify(m).length)
+ } catch (err) {
+ console.log(' JSON.stringify FAILED ->', err.message, '（toCloneable 会变成 null → 渲染层消息变空！）')
+ }
+ if (m?.role === 'assistant') {
+ console.log(' stopReason=', m.stopReason, ' errorMessage=', m.errorMessage)
+ console.log(' content types=', (m.content ?? []).map((b) => b.type).join(','))
+ for (const b of m.content ?? []) {
+ if (b.type === 'text') console.log(' text block:', JSON.stringify(b.text).slice(0, 200))
+ }
+ }
+ break
+ }
+ case 'agent_end':
+ console.log(`\nEVT agent_end willRetry=${event.willRetry} messages=${event.messages?.length}`)
+ break
+ default:
+ console.log('EVT', event.type)
+ }
+})
+
+console.log('--- session:', session.sessionId, 'messages:', session.messages.length)
+console.log('--- model:', session.model?.provider + '/' + session.model?.id)
+console.log('--- sending "hi" ...')
+
+try {
+ await session.prompt('hi')
+ console.log('\n--- prompt resolved')
+} catch (err) {
+ console.log('\n--- prompt THREW:', err?.message)
+}
+
+// 等待 agent_settled 之后的异步收尾
+await new Promise((r) => setTimeout(r, 1500))
+
+console.log('\n=== final session.messages ===')
+for (const [i, m] of session.messages.entries()) {
+ const blocks = Array.isArray(m.content)
+ ? m.content.map((b) => b.type).join(',')
+ : typeof m.content === 'string'
+ ? 'str:' + m.content.slice(0, 30)
+ : '??'
+ console.log(`#${i} ${m.role} [${blocks}]`)
+}
+
+console.log('\nrebindCount=', rebindCount)
+process.exit(0)
diff --git a/apps/desktop/scripts/repro-markdown.mjs b/apps/desktop/scripts/repro-markdown.mjs
new file mode 100644
index 0000000..d37c46a
--- /dev/null
+++ b/apps/desktop/scripts/repro-markdown.mjs
@@ -0,0 +1,41 @@
+// 验证 Markdown.tsx 的 parseBlocks 是否产出空内容
+const INLINE = /^(\s*)([-*+]\s+|\d+[.)]\s+|>\s?|(#{1,3}\s+))?(.*)$/
+
+function parseBlocks(text) {
+ const blocks = []
+ const lines = text.split('\n')
+ let current = null
+ const flush = () => {
+ if (current) blocks.push(current)
+ current = null
+ }
+ for (const line of lines) {
+ const m = line.match(INLINE)
+ if (!m) continue
+ const [, indent, marker, content] = m
+ const isListItem = Boolean(marker && /^([-*+]\s+|\d+[.)]\s+)/.test(marker))
+ const kind = marker
+ ? marker.startsWith('#')
+ ? 'h1'
+ : isListItem
+ ? /^\d/.test(marker) ? 'ol' : 'ul'
+ : marker.startsWith('>') ? 'quote' : null
+ : 'p'
+ if (kind === 'p') {
+ if (!current || current.kind !== 'p') {
+ flush()
+ current = { kind: 'p', lines: [] }
+ }
+ current.lines.push(content)
+ continue
+ }
+ flush()
+ }
+ return blocks
+}
+
+for (const t of ['pong', 'Hello world', '# 标题', '- 列表项', '> 引用', '1. 有序']) {
+ const blocks = parseBlocks(t)
+ const rendered = blocks.map((b) => b.lines.join('\n'))
+ console.log(JSON.stringify(t), '->', JSON.stringify(rendered))
+}
diff --git a/apps/desktop/scripts/repro-render-logic.mjs b/apps/desktop/scripts/repro-render-logic.mjs
new file mode 100644
index 0000000..63834d1
--- /dev/null
+++ b/apps/desktop/scripts/repro-render-logic.mjs
@@ -0,0 +1,81 @@
+// 验证渲染层对 session_switched 历史消息的渲染逻辑：
+// 用与主进程一致的 session.messages 源，跑 MessageItem 的 readBlocks + AssistantBody 判断。
+import os from 'node:os'
+import { createAgentSessionServices, getAgentDir } from '@earendil-works/pi-coding-agent'
+
+const cwd = os.homedir()
+const services = await createAgentSessionServices({ cwd, agentDir: getAgentDir() })
+
+// SessionManager.list + 加载最近会话的等价做法：直接用 services 里加载当前会话
+const session = services.sessionManager
+ ? null
+ : null
+
+// 走 SessionManager 拿最近会话并加载
+const { SessionManager } = await import('@earendil-works/pi-coding-agent')
+const sm = SessionManager.continueRecent(cwd)
+const smAny = sm
+// SessionManager.continueRecent 返回的 manager 需要挂到 session 上才有 messages；
+// 更直接：读它指向的会话文件并解析 message 条目
+const entries = []
+if (typeof smAny.loadEntries === 'function') {
+ entries.push(...(await smAny.loadEntries()))
+}
+console.log('loadEntries available:', typeof smAny.loadEntries === 'function', 'entries:', entries.length)
+
+// 退路：直接解析磁盘上的最近 jsonl（与主进程 toCloneable 后的消息同构）
+import { readdirSync, readFileSync, statSync } from 'node:fs'
+import { join } from 'node:path'
+const dir = join(cwd, '.pi', 'agent', 'sessions', '--C--Users-21976--')
+const files = readdirSync(dir).filter((f) => f.endsWith('.jsonl'))
+files.sort((a, b) => statSync(join(dir, b)).mtimeMs - statSync(join(dir, a)).mtimeMs)
+const latest = files[0]
+console.log('latest session file:', latest)
+
+const lines = readFileSync(join(dir, latest), 'utf8').trim().split('\n')
+const messages = []
+for (const line of lines) {
+ let entry
+ try {
+ entry = JSON.parse(line)
+ } catch {
+ continue
+ }
+ if (entry.type === 'message' && entry.message) messages.push(entry.message)
+}
+
+// ==== 渲染层逻辑复刻（与 MessageItem.tsx 一致）====
+function readBlocks(raw) {
+ if (!raw || typeof raw !== 'object') return []
+ const content = raw.content
+ if (typeof content === 'string') return [{ type: 'text', text: content }]
+ if (Array.isArray(content)) {
+ return content.filter((c) => typeof c === 'object' && c !== null)
+ }
+ return []
+}
+
+for (const [i, m] of messages.entries()) {
+ console.log(`\n=== history msg #${i} role=${m.role} ===`)
+ const blocks = readBlocks(m)
+ let rendered = 0
+ for (const block of blocks) {
+ if (block.type === 'thinking' && typeof block.text === 'string') {
+ console.log(' -> ThinkingBlock (text field)')
+ rendered++
+ continue
+ }
+ if (block.type === 'text' && block.text) {
+ console.log(` -> Markdown("${String(block.text).slice(0, 60)}…")`)
+ rendered++
+ continue
+ }
+ if (block.type === 'toolCall' && block.id) {
+ console.log(' -> ToolCard', block.name)
+ rendered++
+ continue
+ }
+ console.log(' -> **被丢弃** block type =', block.type, 'keys =', Object.keys(block).join(','))
+ }
+ console.log(` rendered ${rendered}/${blocks.length} blocks`)
+}
diff --git a/apps/desktop/src/main/index.ts b/apps/desktop/src/main/index.ts
index f2fd79d..3b21028 100644
--- a/apps/desktop/src/main/index.ts
+++ b/apps/desktop/src/main/index.ts
@@ -1,14 +1,35 @@
-import { app, BrowserWindow, shell } from 'electron'
+import { app, BrowserWindow, ipcMain, Menu, shell } from 'electron'
+import { existsSync } from 'node:fs'
import { join } from 'node:path'
import { registerIpc } from './ipc'
process.env.APP_ROOT = join(__dirname, '..')
-export const VITE_DEV_SERVER_URL = process.env.VITE_DEV_SERVER_URL
+export const VITE_DEV_SERVER_URL = process.env.ELECTRON_RENDERER_URL ?? process.env.VITE_DEV_SERVER_URL
export const RENDERER_DIST = join(process.env.APP_ROOT, 'renderer')
+/** 应用图标（build/icon.ico，由 scripts/make-icons.cjs 从 build/icon.svg 生成） */
+const APP_ICON = join(app.getAppPath(), 'build', 'icon.ico')
+
const agentService = registerIpc()
+/** 窗口控制（自绘标题栏按钮走这三个 IPC；不使用系统 WCO，
+ * 否则 overlay 的原生白色背景会盖住标题栏分隔线） */
+function registerWindowControls(): void {
+ ipcMain.handle('win:minimize', (event) => {
+ BrowserWindow.fromWebContents(event.sender)?.minimize()
+ })
+ ipcMain.handle('win:toggleMaximize', (event) => {
+ const win = BrowserWindow.fromWebContents(event.sender)
+ if (!win) return
+ if (win.isMaximized()) win.unmaximize()
+ else win.maximize()
+ })
+ ipcMain.handle('win:close', (event) => {
+ BrowserWindow.fromWebContents(event.sender)?.close()
+ })
+}
+
async function createWindow(): Promise
-
+ setSearchOpen(true)}
onOpenSettings={() => setSettingsOpen(true)}
- onRefreshSessions={refreshSessions}
+ workspaces={workspaces}
+ activeWorkspace={workspaces.find((w) => w.path === state.sessionState?.workspace)}
+ onOpenWorkspace={openWorkspace}
/>
+ setSettingsOpen(true)}
+ onPermissionMode={setPermissionMode}
+ prefillRef={prefillRef}
+ />
+ }
/>
-
+ setSearchOpen(false)}
+ sessions={sessions}
+ onNewSession={newSession}
+ onRefreshSessions={refreshSessions}
+ onOpenSettings={() => setSettingsOpen(true)}
+ onOpenSession={openSession}
+ />
('up')
+
+ useEffect(() => {
+ if (prevRef.current === value) return
+ const from = prevRef.current
+ prevRef.current = value
+ const fromN = parseInt(from, 10)
+ const toN = parseInt(value, 10)
+ setDir(Number.isFinite(fromN) && Number.isFinite(toN) && toN < fromN ? 'down' : 'up')
+ setOldVal(from)
+ setChars(value)
+ setRolling(true)
+ setShifted(false)
+
+ let raf2 = 0
+ const raf1 = requestAnimationFrame(() => {
+ raf2 = requestAnimationFrame(() => setShifted(true))
+ })
+ const done = setTimeout(() => {
+ setRolling(false)
+ setOldVal(value)
+ setShifted(false)
+ }, ROLL_MS)
+
+ return () => {
+ cancelAnimationFrame(raf1)
+ cancelAnimationFrame(raf2)
+ clearTimeout(done)
+ }
+ }, [value])
+
+ return (
+ <>
+ {Array.from({ length: chars.length }, (_, i) => {
+ const o = oldVal[i] ?? ''
+ const n = chars[i] ?? ''
+ if (!rolling || o === n) return {n}
+ const top = dir === 'down' ? n : o
+ const bottom = dir === 'down' ? o : n
+ const restY = dir === 'down' ? '0' : '-1em'
+ const startY = dir === 'down' ? '-1em' : '0'
+ return (
+
+
+ {top}
+ {bottom}
+
+
+ )
+ })}
+
+ )
+}
+
+function Ico({ path, size = 14, sw = 2 }: { path: ReactNode; size?: number; sw?: number }): ReactNode {
+ return (
+
+ )
+}
+
+const OPTION_APPROVE = 0
+
+export function ApprovalCard({
request,
onResolve
}: {
request: ApprovalRequest
- onResolve: (approved: boolean) => void
-}): JSX.Element {
- const ref = useRef(null)
- const [remaining, setRemaining] = useState(APPROVAL_TIMEOUT_S)
-
- useEffect(() => {
- const start = Date.now()
- const timer = setInterval(() => {
- const left = Math.max(0, APPROVAL_TIMEOUT_S - Math.floor((Date.now() - start) / 1000))
- setRemaining(left)
- if (left === 0) clearInterval(timer)
- }, 1000)
- return () => clearInterval(timer)
- }, [request.id])
-
- useEffect(() => {
- const el = ref.current
- if (!el) return
- let tween: { kill(): void } | null = null
- let cancelled = false
- void import('gsap').then((gsapModule) => {
- if (cancelled) return
- tween = gsapModule.gsap.fromTo(
- el,
- { opacity: 0, y: 16, scale: 0.97 },
- { opacity: 1, y: 0, scale: 1, duration: 0.3, ease: 'back.out(1.6)' }
- )
- })
- return () => {
- cancelled = true
- tween?.kill()
- }
- }, [])
-
- const argsText = (() => {
- try {
- return JSON.stringify(request.args, null, 2)
- } catch {
- return String(request.args)
- }
- })()
-
- return (
- (null)
+ const [sent, setSent] = useState(null)
+ const submitTimer = useRef | null>(null)
+ const settled = useRef(false)
+
+ useEffect(
+ () => () => {
+ if (submitTimer.current) clearTimeout(submitTimer.current)
+ },
+ []
+ )
+
+ const settle = (approved: boolean, note: string): void => {
+ if (settled.current) return
+ settled.current = true
+ setSent(note)
+ if (submitTimer.current) clearTimeout(submitTimer.current)
+ onResolve(request.id, approved)
+ }
+
+ const pick = (index: number): void => {
+ if (sent) return
+ setPicked(index)
+ // radio 自动前进：480ms 后提交（官方 single-choice 行为）
+ if (submitTimer.current) clearTimeout(submitTimer.current)
+ submitTimer.current = setTimeout(() => {
+ settle(index === OPTION_APPROVE, index === OPTION_APPROVE ? '已允许执行' : '已拒绝')
+ }, 480)
+ }
+
+ if (sent) {
+ const ok = sent === '已允许执行'
+ return (
+
-
- )
-}
-
-export function ApprovalStack({
- requests,
- onResolve
-}: {
- requests: ApprovalRequest[]
onResolve: (id: string, approved: boolean) => void
-}): JSX.Element | null {
- if (requests.length === 0) return null
+}): ReactNode {
+ const [picked, setPicked] = useState
-
- {argsText && argsText !== 'null' && (
-
-
-
-
- 敏感操作，需要你的确认
- {request.toolName}
-
-
-
- {argsText.length > 600 ? `${argsText.slice(0, 600)}…` : argsText}
-
- )}
-
-
-
-
-
+
+
+ {ok ? (
+
+ ) : (
+
+ )}
+
+ {sent}
+
+
+ )
+ }
+
return (
-
- {requests.map((request) => (
- onResolve(request.id, approved)} />
- ))}
+ ())
+ for (const request of requests) seenRef.current.set(request.id, request)
+ const [leaving, setLeaving] = useState([])
+
+ useEffect(() => {
+ const gone: ApprovalRequest[] = []
+ for (const [id, request] of seenRef.current) {
+ if (!requests.some((r) => r.id === id)) gone.push(request)
+ }
+ if (gone.length === 0) return
+ for (const g of gone) seenRef.current.delete(g.id)
+ setLeaving((cur) => [...cur.filter((l) => !gone.some((g) => g.id === l.id)), ...gone])
+ const timers = gone.map((g) =>
+ setTimeout(() => {
+ setLeaving((cur) => cur.filter((l) => l.id !== g.id))
+ }, 1000)
+ )
+ return () => timers.forEach(clearTimeout)
+ }, [requests])
+
+ return leaving
+}
+
+export function BottomSlot({
+ approvals,
+ onResolve,
+ composer
+}: {
+ approvals: ApprovalRequest[]
+ onResolve: (id: string, approved: boolean) => void
+ composer: ReactNode
+}): ReactNode {
+ const leaving = useLeavingApprovals(approvals)
+ const showApproval = approvals.length > 0 || leaving.length > 0
+
+ return (
+
+
)
}
diff --git a/apps/desktop/src/renderer/src/components/BottomSlot.tsx b/apps/desktop/src/renderer/src/components/BottomSlot.tsx
new file mode 100644
index 0000000..bde63ce
--- /dev/null
+++ b/apps/desktop/src/renderer/src/components/BottomSlot.tsx
@@ -0,0 +1,93 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+import type { ApprovalRequest } from '@shared/types'
+import { ApprovalCard } from './ApprovalCard'
+
+/**
+ * 底部插槽（抽屉）：审批卡出现时从 Chatbox 位置升起替换输入框，
+ * 结算后输入框滑回。两行用 grid-template-rows 0fr↔1fr 过渡做真实高度动画，
+ * 交叉淡入淡出；Composer 始终挂载（草稿不丢）。已结算的卡片以结算胶囊态
+ * 多停留约一秒再撤出，避免「啪」一下消失。
+ */
+
+const ROWS_TRANSITION = 'grid-template-rows 400ms cubic-bezier(0.22, 1, 0.36, 1)'
+const FADE_TRANSITION = 'opacity 220ms ease, transform 400ms cubic-bezier(0.22, 1, 0.36, 1)'
+
+/** 跟踪从 requests 里消失的审批：缓存原件让卡片以结算态多停留一拍 */
+function useLeavingApprovals(requests: ApprovalRequest[]): ApprovalRequest[] {
+ const seenRef = useRef(new Map
+
+
+
+ {/* 问题本体即标题（官方形态：14px medium） */}
+
+ {(['允许执行', '拒绝执行'] as const).map((option, i) => {
+ const on = picked === i
+ return (
+
+ )
+ })}
+
+
+
+ {/* footer — step nav (rolling counter) + pill actions（官方底栏 1:1） */}
+
+ 「{request.toolName}」请求执行敏感操作
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Chatbox 行：审批升起时收起（高度 0 + 下沉淡出） */}
+
+ )
+}
diff --git a/apps/desktop/src/renderer/src/components/ChatView.tsx b/apps/desktop/src/renderer/src/components/ChatView.tsx
index a00e179..897d9a4 100644
--- a/apps/desktop/src/renderer/src/components/ChatView.tsx
+++ b/apps/desktop/src/renderer/src/components/ChatView.tsx
@@ -1,8 +1,9 @@
import { useEffect, useRef } from 'react'
-import type { JSX } from 'react'
-import { AlertTriangle, RotateCw, Store } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { LuRotateCw, LuTriangleAlert } from 'react-icons/lu'
import type { ApprovalRequest, ToolState, UiMessage } from '../hooks/useAgent'
-import { MessageItem } from './MessageItem'
+import { AssistantTurn, MessageItem } from './MessageItem'
+import { SelectionActions } from './SelectionActions'
const SUGGESTIONS = [
'帮我分析一下今天该关注哪些品类热点',
@@ -10,24 +11,26 @@ const SUGGESTIONS = [
'查询最近一次上架任务的执行结果'
]
-function EmptyState({ onPick }: { onPick: (text: string) => void }): JSX.Element {
+/** 空状态：大标题 + 建议词（beautifului Streaming Text 的 follow-ups 行样式） */
+function EmptyState({ onPick }: { onPick: (text: string) => void }): ReactNode {
return (
+
+
+ {/* 审批抽屉行：从输入框位置升起（高度 1fr + 上浮淡入） */}
+
+
+
+ {composer}
+
+
+
+
+
+
+
+
+ {[...approvals, ...leaving.filter((l) => !approvals.some((a) => a.id === l.id))].map((request) => (
+
+
+
+ ))}
+
-
-
- 店铺运营 Agent
-- 流程固定、编排灵活。描述你的目标，Agent 会按 SOP 调用工具完成；也可以随时切为手动逐步执行。 +
今天想做点什么？
++ 描述你的目标，Agent 会按 SOP 调用工具完成；也可以随时切为手动逐步执行。
-
+
{SUGGESTIONS.map((s) => (
))}
@@ -36,6 +39,47 @@ function EmptyState({ onPick }: { onPick: (text: string) => void }): JSX.Element
)
}
+/** 连续 assistant 消息（pi 每个工具轮次一条）合并为一个回合渲染，
+ * 整轮思考 + 工具调用共享一张 beautifului ToolChips 卡。 */
+function renderTurns(
+ messages: UiMessage[],
+ tools: Record,
+ streaming: boolean,
+ pendingApprovals: ApprovalRequest[]
+): ReactNode[] {
+ const items: ReactNode[] = []
+ let i = 0
+ while (i < messages.length) {
+ const message = messages[i]
+ if (message.role === 'assistant') {
+ let j = i + 1
+ while (j < messages.length && messages[j].role === 'assistant') j += 1
+ items.push(
+
@@ -56,7 +101,8 @@ export function ChatView({
pendingApprovals: ApprovalRequest[]
onDismissError: () => void
onPickSuggestion: (text: string) => void
-}): JSX.Element {
+ onApplySelection: (instruction: string, selection: string) => void
+}): ReactNode {
const scrollRef = useRef(null)
const pinnedRef = useRef(true)
@@ -80,13 +126,13 @@ export function ChatView({
return (
{(error || sessionError) && (
-
-
+
{sessionError ? (
<>
= {
+ kw: 'text-accent-ink',
+ str: 'text-orange',
+ com: 'text-ink-3',
+ id: 'font-medium text-ink',
+ plain: ''
+}
+
+function looksLikeDiff(code: string, lang: string): boolean {
+ if (lang === 'diff' || lang === 'patch') return true
+ const lines = code.split('\n').filter((l) => l.trim() && !l.startsWith('@@'))
+ if (!lines.length) return false
+ const marked = lines.filter((l) => /^[+-]/.test(l)).length
+ return marked / lines.length > 0.6
+}
+
+function isDiffLine(line: string): 'add' | 'del' | 'ctx' | 'hunk' {
+ if (line.startsWith('@@')) return 'hunk'
+ if (line.startsWith('+')) return 'add'
+ if (line.startsWith('-')) return 'del'
+ return 'ctx'
+}
+
+/** Shiki 词元行（Markdown.tsx 异步算好传入）；无 token 时回退内置简易分词 */
+export type ShikiToken = { content: string; color?: string; fontStyle?: number }
+export type ShikiLine = ShikiToken[]
+
+export function CodeBlock({
+ code,
+ lang = '',
+ filename,
+ tokens
+}: {
+ code: string
+ lang?: string
+ filename?: string
+ tokens?: ShikiLine[] | null
+}): ReactNode {
+ const source = useMemo(() => code.replace(/\n$/, ''), [code])
+ const language = lang.toLowerCase()
+ const diff = looksLikeDiff(source, language)
+ const [copied, setCopied] = useState(false)
+
+ useEffect(() => {
+ if (!copied) return
+ const t = setTimeout(() => setCopied(false), 1600)
+ return () => clearTimeout(t)
+ }, [copied])
+
+ const copy = (): void => {
+ void navigator.clipboard.writeText(source).then(() => setCopied(true))
+ }
+
+ const title = filename ?? ((language && language !== 'diff' ? language : '') || (diff ? 'diff' : 'code'))
+
+ return (
+ > }): void => {
+ let text = ''
+ for (let i = 0; i < event.results.length; i += 1) text += event.results[i][0].transcript
+ if (text.trim()) onTextRef.current(text.trim())
+ }
+ rec.onend = (): void => setListening(false)
+ rec.onerror = (): void => setListening(false)
+ recRef.current = rec
+ rec.start()
+ setListening(true)
+ } catch {
+ setListening(false)
+ }
+ }
+
+ return { supported, listening, toggle }
+}
+
+
+/** 输入框锚定菜单：portal 到 body 固定定位（BottomSlot 的 overflow-hidden 会裁剪普通弹层） */
+function ComposerMenu({
+ anchor,
+ align,
+ onClose,
+ children
+}: {
+ anchor: { top: number; left: number; right: number }
+ align: 'left' | 'right'
+ onClose: () => void
+ children: ReactNode
+}): ReactNode {
+ return createPortal(
+ <>
+
+
}): JSX.Element {
const [value, setValue] = useState('')
+ const [modelOpen, setModelOpen] = useState(false)
+ const [modelPos, setModelPos] = useState<{ top: number; left: number; right: number } | null>(null)
+ const [permOpen, setPermOpen] = useState(false)
+ const [permPos, setPermPos] = useState<{ top: number; left: number; right: number } | null>(null)
+ const [catalog, setCatalog] = useState(null)
+ const [catalogLoading, setCatalogLoading] = useState(false)
+ const [attachments, setAttachments] = useState([])
+ const [picking, setPicking] = useState(false)
+ const [resources, setResources] = useState(null)
+ const [files, setFiles] = useState(null)
+ const [activeIdx, setActiveIdx] = useState(0)
const textareaRef = useRef(null)
+ const catalogLoadedRef = useRef(false)
+
+ const localCommands = useMemo(
+ () => [
+ { id: 'new', label: '/new', hint: '新会话', run: onNewSession },
+ { id: 'settings', label: '/settings', hint: '打开设置', run: onOpenSettings },
+ { id: 'stop', label: '/stop', hint: '停止生成', run: onStop, enabled: streaming },
+ { id: 'clear', label: '/clear', hint: '清空输入', run: () => setValue('') }
+ ],
+ [onNewSession, onOpenSettings, onStop, streaming]
+ )
+
+ // "/" 命令面板：输入以 / 开头且当前词无空格时触发
+ const trimmed = value.trimStart()
+ const slashExec = trimmed === value ? /^\/(\S*)$/.exec(trimmed) : null
+ const slashQuery = slashExec ? (slashExec[1] ?? '').toLowerCase() : null
+
+ // "@ " 引用文件：末个 @ 词令牌触发
+ const atMatch = /@([^\s@]*)$/.exec(value)
+ const atQuery = atMatch ? (atMatch[1] ?? '') : null
+
+ // 资源懒加载：每次打开菜单都刷新（文件/skills 变化即时可见），in-flight 防抖
+ const filesLoadingRef = useRef(false)
+ const resourcesLoadingRef = useRef(false)
+ const atOpen = atQuery !== null
+ const slashOpen = slashQuery !== null
+
+ useEffect(() => {
+ if (!slashOpen || resourcesLoadingRef.current) return
+ resourcesLoadingRef.current = true
+ window.api
+ .listChatResources()
+ .then(setResources)
+ .catch(() => undefined)
+ .finally(() => {
+ resourcesLoadingRef.current = false
+ })
+ }, [slashOpen])
+
+ useEffect(() => {
+ if (!atOpen || filesLoadingRef.current) return
+ filesLoadingRef.current = true
+ window.api
+ .listWorkspaceFiles()
+ .then(setFiles)
+ .catch(() => undefined)
+ .finally(() => {
+ filesLoadingRef.current = false
+ })
+ }, [atOpen])
+
+ // "/" 面板条目：本地命令 + pi 命令模板 + /skill: 技能
+ const commandItems = useMemo(() => {
+ if (slashQuery === null) return []
+ const q = slashQuery.slice(1).toLowerCase()
+ const match = (s: string): boolean => s.toLowerCase().includes(q) || q === ''
+ const items: Array<{ key: string; insert: string; label: string; hint: string; group: string; run?: () => void; enabled?: boolean }> = []
+ for (const cmd of localCommands) {
+ if (match(cmd.label.slice(1))) items.push({ key: `local-${cmd.id}`, insert: '', label: cmd.label, hint: cmd.hint, group: '命令', run: cmd.run, enabled: cmd.enabled })
+ }
+ for (const cmd of resources?.commands ?? []) {
+ if (match(cmd.name)) items.push({ key: `prompt-${cmd.name}`, insert: `/${cmd.name} `, label: `/${cmd.name}`, hint: cmd.description || '命令模板', group: '命令' })
+ }
+ for (const skill of resources?.skills ?? []) {
+ if (match(`skill:${skill.name}`) || match(skill.name)) {
+ items.push({ key: `skill-${skill.name}`, insert: `/skill:${skill.name} `, label: `/skill:${skill.name}`, hint: skill.description || '技能', group: '技能' })
+ }
+ }
+ return items.slice(0, 12)
+ }, [slashQuery, localCommands, resources])
+
+ // "@ " 文件条目
+ const fileItems = useMemo(() => {
+ if (atQuery === null || !files) return []
+ const q = atQuery.toLowerCase()
+ return files
+ .filter((f) => f.path.toLowerCase().includes(q))
+ .sort((a, b) => {
+ const an = a.name.toLowerCase().startsWith(q) ? 0 : 1
+ const bn = b.name.toLowerCase().startsWith(q) ? 0 : 1
+ return an - bn || a.path.length - b.path.length || a.path.localeCompare(b.path)
+ })
+ .slice(0, 8)
+ }, [atQuery, files])
+
+ const menuOpen = !modelOpen && (commandItems.length > 0 || fileItems.length > 0)
+ const menuCount = commandItems.length + fileItems.length
+
+ // ---- 排队消息（steering 先于 followUp 送达；「立即」= 置顶优先送达）----
+ const [queueOverride, setQueueOverride] = useState<{ steering: string[]; followUp: string[] } | null>(null)
+ useEffect(() => {
+ if (!queueOverride) return
+ if (
+ queue.steering.join('\u0000') === queueOverride.steering.join('\u0000') &&
+ queue.followUp.join('\u0000') === queueOverride.followUp.join('\u0000')
+ ) {
+ setQueueOverride(null)
+ }
+ }, [queue, queueOverride])
+ const effectiveQueue = queueOverride ?? queue
+
+ const queueItems = useMemo(
+ () => [
+ ...effectiveQueue.steering.map((text) => ({ text, from: 'steering' as const })),
+ ...effectiveQueue.followUp.map((text) => ({ text, from: 'followUp' as const }))
+ ],
+ [effectiveQueue]
+ )
+
+ /** 应用本地新顺序并下发；600ms 内忽略回推的 queue_update，避免行闪烁 */
+ const commitQueue = (items: Array<{ text: string; from: 'steering' | 'followUp' }>): void => {
+ const steering = items.filter((i) => i.from === 'steering').map((i) => i.text)
+ const followUp = items.filter((i) => i.from === 'followUp').map((i) => i.text)
+ setQueueOverride({ steering, followUp })
+ window.setTimeout(() => setQueueOverride(null), 600)
+ void window.api.setQueue(steering, followUp).catch(() => undefined)
+ }
+
+ const removeQueued = (index: number): void => {
+ const items = [...queueItems]
+ items.splice(index, 1)
+ commitQueue(items)
+ }
+
+ const promoteQueued = (index: number): void => {
+ if (index === 0) return
+ const items = [...queueItems]
+ const [item] = items.splice(index, 1)
+ items.unshift(item)
+ commitQueue(items)
+ }
+
+ const reorderQueued = (from: number, to: number): void => {
+ if (from === to) return
+ const items = [...queueItems]
+ const [moved] = items.splice(from, 1)
+ items.splice(to, 0, moved)
+ commitQueue(items)
+ }
+
+ const saveQueuedEdit = (index: number, text: string): void => {
+ const trimmedText = text.trim()
+ if (!trimmedText) return
+ const items = [...queueItems]
+ items[index] = { ...items[index], text: trimmedText }
+ commitQueue(items)
+ }
+
+ const [editingIdx, setEditingIdx] = useState(null)
+ const [editValue, setEditValue] = useState('')
+ const dragFromRef = useRef(null)
+ const [dragOverIdx, setDragOverIdx] = useState(null)
+
+ // 命令/文件菜单：覆盖层（不占布局，避免聊天区上下跳动）
+ const barRef = useRef(null)
+ const [menuPos, setMenuPos] = useState<{ top: number; left: number; width: number } | null>(null)
+ useEffect(() => {
+ if (menuOpen) {
+ const rect = barRef.current?.getBoundingClientRect()
+ if (rect) setMenuPos({ top: rect.top, left: rect.left, width: rect.width })
+ } else {
+ setMenuPos(null)
+ }
+ }, [menuOpen])
+ const closeMenu = (): void => {
+ if (atMatch) setValue(value.replace(/@[^\s@]*$/, ''))
+ else if (slashQuery !== null) setValue('')
+ }
+
+ useEffect(() => setActiveIdx(0), [value])
// 空状态建议词点击 → 填入输入框并聚焦
useEffect(() => {
@@ -38,73 +334,550 @@ export function Composer({
el.style.height = `${Math.min(el.scrollHeight, 200)}px`
}, [value])
+ const modelBtnRef = useRef(null)
+ const permBtnRef = useRef(null)
+
+ const anchorOf = (el: HTMLElement | null): { top: number; left: number; right: number } | null => {
+ if (!el) return null
+ const rect = el.getBoundingClientRect()
+ return { top: rect.top, left: rect.left, right: window.innerWidth - rect.right }
+ }
+
+ const openModelMenu = (): void => {
+ if (modelOpen) {
+ setModelOpen(false)
+ return
+ }
+ setModelPos(anchorOf(modelBtnRef.current))
+ setModelOpen((open) => {
+ if (!open && !catalogLoadedRef.current) {
+ catalogLoadedRef.current = true
+ setCatalogLoading(true)
+ window.api
+ .getModelCatalog()
+ .then(setCatalog)
+ .catch(() => undefined)
+ .finally(() => setCatalogLoading(false))
+ }
+ return true
+ })
+ }
+
+ const togglePermMenu = (): void => {
+ if (permOpen) {
+ setPermOpen(false)
+ return
+ }
+ setPermPos(anchorOf(permBtnRef.current))
+ setPermOpen(true)
+ }
+
+ const pickMenuItem = (index: number): void => {
+ if (index < commandItems.length) {
+ const item = commandItems[index]
+ setValue('')
+ textareaRef.current?.focus()
+ if (item.insert) {
+ setValue(item.insert)
+ textareaRef.current?.focus()
+ return
+ }
+ if (item.enabled !== false) item.run?.()
+ return
+ }
+ const file = fileItems[index - commandItems.length]
+ if (!file) return
+ setValue((current) => current.replace(/@[^\s@]*$/, `@${file.path} `))
+ textareaRef.current?.focus()
+ }
+
+ const addAttachments = (): void => {
+ if (picking) return
+ setPicking(true)
+ window.api
+ .pickAttachments()
+ .then((picked) => {
+ setAttachments((cur) => {
+ const seen = new Set(cur.map((a) => a.path))
+ return [...cur, ...picked.filter((p) => !seen.has(p.path))]
+ })
+ })
+ .catch(() => undefined)
+ .finally(() => setPicking(false))
+ }
+
const submit = (): void => {
+ if (disabled) return
const text = value.trim()
- if (!text || disabled) return
- onSend(text)
+ const images = attachments.filter((a) => a.data && a.mimeType.startsWith('image/'))
+ const fileRefs = attachments.filter((a) => !(a.data && a.mimeType.startsWith('image/')))
+ if (!text && images.length === 0) return
+ const refLines = fileRefs.map((f) => `@${f.path}`)
+ const full = refLines.length > 0 ? `${text}${text ? '\n\n' : ''}${refLines.join('\n')}` : text
+ onSend(full, images.map((img) => ({ mimeType: img.mimeType, data: img.data })))
setValue('')
+ setAttachments([])
+ }
+
+ const onKeyDown = (e: React.KeyboardEvent): void => {
+ if (e.nativeEvent.isComposing) return
+ if (menuOpen && menuCount > 0) {
+ if (e.key === 'ArrowDown') {
+ e.preventDefault()
+ setActiveIdx((i) => (i + 1) % menuCount)
+ return
+ }
+ if (e.key === 'ArrowUp') {
+ e.preventDefault()
+ setActiveIdx((i) => (i - 1 + menuCount) % menuCount)
+ return
+ }
+ if (e.key === 'Enter' || e.key === 'Tab') {
+ e.preventDefault()
+ pickMenuItem(activeIdx)
+ return
+ }
+ if (e.key === 'Escape') {
+ e.preventDefault()
+ setValue(atMatch ? value.replace(/@[^\s@]*$/, '') : '')
+ return
+ }
+ }
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault()
+ submit()
+ }
+ }
+
+ const dictation = useDictation((text) => setValue((current) => (current ? `${current} ${text}` : text)))
+
+ const permMeta = PERMISSION_MODES.find((m) => m.id === permissionMode) ?? PERMISSION_MODES[0]
+
+ // 快捷切换只列已配置凭据的服务商；全量目录（含未配置）去「管理模型与密钥」里看
+ const providers = catalog?.providers.filter((p) => (p.hasApiKey || p.isOAuth) && p.models.length > 0) ?? []
+ const canSend = !disabled && (value.trim().length > 0 || attachments.some((a) => a.data && a.mimeType.startsWith('image/')))
+
+ // 菜单分段偏移（键盘高亮跨段连续）
+ const commandEnd = commandItems.length
+
+ const renderMenuItem = (item: (typeof commandItems)[number], index: number): ReactNode => {
+ return (
+
+ )
}
return (
Agent 会话初始化失败
- {sessionError}
+ {sessionError}
) : (
{error}
@@ -95,7 +141,7 @@ export function ChatView({
@@ -103,27 +149,19 @@ export function ChatView({
)}
{retry && (
-
-
)
}
diff --git a/apps/desktop/src/renderer/src/components/CodeBlock.tsx b/apps/desktop/src/renderer/src/components/CodeBlock.tsx
new file mode 100644
index 0000000..374ca23
--- /dev/null
+++ b/apps/desktop/src/renderer/src/components/CodeBlock.tsx
@@ -0,0 +1,196 @@
+import { useEffect, useMemo, useState, type ReactNode } from 'react'
+
+/** 行号代码块（beautifului.dev Code Block）。
+ * 头部：代码图标 + 文件名/语言 + Copy；主体：20px 行号列 + hairline 分隔 +
+ * 语法着色（关键字 accent-ink、字符串 orange、行内标识符加粗 ink）。
+ * 内容是 unified diff（```diff 或 +/- 行占多数）时整块渲染为红绿对照。 */
+
+const KEYWORDS = new Set(
+ `export async function const let var await if else return import from class new for while try catch finally throw typeof interface type enum public private protected static extends implements null true false undefined this super yield of in as void delete instanceof default switch case break continue do`.split(
+ /\s+/
+ )
+)
+
+type Token = { text: string; kind: 'kw' | 'str' | 'com' | 'id' | 'plain' }
+
+/** 单行词法着色：注释 → 字符串 → 词元。可选括号分支会匹配空串，
+ * 必须跳过零长度匹配前进一位，否则 lastIndex 不动造成死循环。 */
+function tokenizeLine(line: string, lang: string): Token[] {
+ const commentRe = lang === 'py' || lang === 'python' || lang === 'sh' || lang === 'bash' || lang === 'yaml' ? /#.*$/ : null
+ const re = /("(?:[^"\\]|\\.)*"?|'(?:[^'\\]|\\.)*'?|`(?:[^`\\]|\\.)*`?|(\/\/.*$)?|(\b[A-Za-z_$][\w$]*\b)|(\b\d[\w.]*\b))/g
+ const tokens: Token[] = []
+ let last = 0
+ let m: RegExpExecArray | null
+ const commentMatch = line.match(commentRe ?? /$^/)
+ const commentStart = commentMatch?.index ?? Infinity
+ while ((m = re.exec(line))) {
+ if (m[0] === '') {
+ re.lastIndex += 1
+ continue
+ }
+ if (m.index >= commentStart) break
+ if (m.index > last) tokens.push({ text: line.slice(last, m.index), kind: 'plain' })
+ const [raw, lineComment, word, num] = m
+ if (lineComment) tokens.push({ text: raw, kind: 'com' })
+ else if (raw && (raw[0] === '"' || raw[0] === "'" || raw[0] === '`')) tokens.push({ text: raw, kind: 'str' })
+ else if (word) {
+ const after = line.slice(re.lastIndex).match(/^\s*\(/)
+ tokens.push({ text: raw, kind: KEYWORDS.has(word) ? 'kw' : after ? 'id' : 'plain' })
+ } else if (num) tokens.push({ text: raw, kind: 'plain' })
+ else tokens.push({ text: raw, kind: 'plain' })
+ last = re.lastIndex
+ }
+ if (last < commentStart && last < line.length) tokens.push({ text: line.slice(last), kind: 'plain' })
+ if (commentStart !== Infinity) tokens.push({ text: line.slice(commentStart), kind: 'com' })
+ return tokens
+}
+
+const TOKEN_CLASS: Record
+
)}
{hasContent ? (
+
+ {/* 划选消息文本后浮出的操作条 */}
+
- {messages.map((message) => (
-
) : (
@@ -131,6 +169,9 @@ export function ChatView({
)}
+ {/* 头部：文件名 + Copy */}
+
+ )
+}
+
+/** unified diff 视图：红删绿增、@@ 保持上下文行号 */
+function DiffBody({ code }: { code: string }): ReactNode {
+ return (
+
+
+
+ {title}
+
+
+
+
+ {/* 主体 */}
+ {diff ? (
+
+
+ )}
+
+
+ {source.split('\n').map((line, i) => {
+ const lineTokens = tokens?.[i]
+ return (
+
+
+ {i + 1}
+
+ )
+ })}
+
+ {lineTokens
+ ? lineTokens.map((token, j) => (
+
+ {token.content}
+
+ ))
+ : tokenizeLine(line, language).map((token, j) => (
+
+ {token.text}
+
+ ))}
+
+
+ {code.split('\n').map((line, i) => {
+ const kind = isDiffLine(line)
+ return (
+
+ )
+}
diff --git a/apps/desktop/src/renderer/src/components/Composer.tsx b/apps/desktop/src/renderer/src/components/Composer.tsx
index e795dcb..d9b58c5 100644
--- a/apps/desktop/src/renderer/src/components/Composer.tsx
+++ b/apps/desktop/src/renderer/src/components/Composer.tsx
@@ -1,25 +1,321 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
import type { JSX, RefObject } from 'react'
-import { ArrowUp, CornerDownLeft, Square } from 'lucide-react'
+import { LuCheck, LuClipboardList, LuFilePen, LuFileText, LuGripVertical, LuHand, LuPencil, LuShieldCheck, LuTrash2, LuX } from 'react-icons/lu'
+import type { AttachmentInfo, ChatResources, ModelCatalog, ModelInfo, PermissionMode, WorkspaceFile } from '@shared/types'
+
+/**
+ * Prompt Bar（beautifului.dev #prompt-bar）：
+ * 14px 圆角容器 + 五列网格（+/输入/模型/语音/发送），focus 边框加深。
+ * "/" 命令面板：应用内动作 + pi 文件命令模板 + /skill: 技能（发送时由 SDK 展开）；
+ * "@" 引用工作区文件；"+" 添加附件（图片为真实 ImageContent，其他文件以 @path 引用）。
+ */
+
+interface LocalCommand {
+ id: string
+ label: string
+ hint: string
+ run: () => void
+ enabled?: boolean
+}
+
+/** 语音识别（Chromium 内核；不支持/失败时静默降级为禁用态） */
+function useDictation(onText: (text: string) => void): {
+ supported: boolean
+ listening: boolean
+ toggle: () => void
+} {
+ const [listening, setListening] = useState(false)
+ const recRef = useRef<{ start: () => void; stop: () => void } | null>(null)
+ const onTextRef = useRef(onText)
+ onTextRef.current = onText
+
+ const SR = (
+ globalThis as unknown as { webkitSpeechRecognition?: new () => never; SpeechRecognition?: new () => never }
+ ).SpeechRecognition
+
+ const supported = Boolean(SR)
+
+ const toggle = (): void => {
+ if (!SR) return
+ if (listening) {
+ recRef.current?.stop()
+ return
+ }
+ try {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const rec = new (SR as any)()
+ rec.lang = 'zh-CN'
+ rec.interimResults = false
+ rec.continuous = false
+ rec.onresult = (event: { results: ArrayLike
+ {kind === 'add' ? '+' : kind === 'del' ? '−' : ' '}
+ {kind === 'hunk' ? line : line.slice(kind === 'ctx' ? 0 : 1)}
+
+ )
+ })}
+
+ {children}
+
+ ,
+ document.body
+ )
+}
+
+/** 权限模式菜单（参考 ZCode：变更前确认 / 自动编辑 / 计划模式 / 完全访问） */
+const PERMISSION_MODES: Array<{ id: PermissionMode; label: string; desc: string; icon: typeof LuHand }> = [
+ { id: 'confirm', label: '变更前确认', desc: '改文件前先问我。', icon: LuHand },
+ { id: 'autoEdit', label: '自动编辑', desc: '自动编辑文件。', icon: LuFilePen },
+ { id: 'plan', label: '计划模式', desc: '编辑前先出计划。', icon: LuClipboardList },
+ { id: 'full', label: '完全访问', desc: '减少确认次数。', icon: LuShieldCheck }
+]
export function Composer({
streaming,
- queuedCount,
+ queue,
disabled,
+ model,
+ permissionMode = 'confirm',
onSend,
onStop,
+ onNewSession,
+ onSetModel,
+ onOpenSettings,
+ onPermissionMode,
prefillRef
}: {
streaming: boolean
- queuedCount: number
+ /** 排队消息（steering 先于 followUp 送达） */
+ queue: { steering: string[]; followUp: string[] }
disabled: boolean
- onSend: (text: string) => void
+ model?: ModelInfo
+ permissionMode?: PermissionMode
+ onSend: (text: string, images?: { mimeType: string; data: string }[]) => void
onStop: () => void
+ onNewSession: () => void
+ onSetModel: (providerId: string, modelId: string) => void
+ onOpenSettings: () => void
+ onPermissionMode: (mode: PermissionMode) => void
/** 供空状态建议词点击后填入 */
prefillRef: RefObject
-
-