mirror of
https://github.com/ZSeven-W/openpencil.git
synced 2026-06-01 03:14:29 +07:00
* feat(boolean-operations): implement boolean operations in the editor - Added a new BooleanToolbar component for union, subtract, and intersect operations. - Integrated boolean operations into the layer context menu and keyboard shortcuts. - Enhanced the editor layout to include the boolean toolbar for improved user interaction. - Updated internationalization support with new translation keys for boolean operations. - Bumped version to 0.3.0 to reflect the addition of these features. * refactor(editor): update editor layout and panels for improved functionality - Replaced the PropertyPanel with a new RightPanel that includes both Property and Code panels. - Removed the CodePanel from the main editor layout and integrated it into the RightPanel. - Updated keyboard shortcuts to switch the right panel to the code tab. - Enhanced the LayerPanel with a resizable width feature for better user experience. - Added internationalization support for new right panel labels and code panel features. - Introduced new code generation capabilities for various frameworks in the CodePanel. - Improved overall layout structure for better responsiveness and usability. * feat(electron): implement .op file association and enhance file handling - Added support for .op file association in electron-builder, allowing OpenPencil documents to be opened directly from the file system. - Implemented IPC handlers for opening and reading .op files, ensuring proper loading of document content. - Enhanced the main process to handle file opening events on macOS and single-instance locking on Windows/Linux. - Updated the renderer to listen for file open events and load documents accordingly. - Improved README to reflect new file association feature. * fix(canvas): improve layout accuracy for AI-generated designs - Unify lineHeight default via canonical defaultLineHeight() function - Unify text measurement by removing duplicate estimators in generation-utils - Fix optical centering formula to scale proportionally with fontSize - Round layout positions to whole pixels to prevent sub-pixel artifacts - Recursively sanitize nested x/y in streaming layout containers - Fix input trailing icon alignment using fill_container instead of space_between * feat(canvas): right-align agent badge and add breathing glow border - Agent badge now right-aligned to frame's right edge instead of after label - Added breathing glow border around agent-owned frames during generation - Glow border uses same color and lifecycle as the agent badge - Removed unused BADGE_GAP constant and useDocumentStore import * feat(code-panel): enhance tab scrolling functionality and add scrollbar utility - Introduced left and right scroll buttons for tab navigation in the CodePanel, improving user experience for navigating long tab lists. - Added a custom utility to hide scrollbars for a cleaner interface. - Updated styles for better responsiveness and usability in the CodePanel layout. * fix(docs): update Discord invite links in multiple README files - Replaced outdated Discord invite links with the new link across all language-specific README files. - Ensured consistency in the documentation for community engagement. * feat(code-panel): enhance system prompt for responsive design - Updated the ENHANCE_SYSTEM_PROMPT to emphasize the importance of responsive design in code rewriting. - Added detailed guidelines for converting fixed pixel widths to relative units and using responsive Tailwind breakpoints. - Ensured that the output remains visually faithful on desktop while adapting gracefully across screen sizes. * feat(docs): add WeChat group information to README.zh.md and include group image - Introduced a new section in the Chinese README to provide details about the WeChat group for community engagement. - Added an image representing the WeChat group for better visibility and user interaction. * feat(electron): enhance theme management and title bar overlay for Windows/Linux - Updated the `setTheme` method in the Electron API to accept custom colors for the title bar overlay, improving theme synchronization across platforms. - Adjusted title bar overlay colors for Windows and Linux to ensure proper visibility and aesthetics. - Enhanced the top bar component to read computed CSS colors and apply them dynamically, ensuring a consistent user interface. - Improved handling of theme changes in the application to support background and foreground color customization. * fix(screenshot): update screenshot image for improved clarity and quality * fix(docs): update WeChat group image path in README.zh.md for consistency * fix(ai): fix post-generation validation pipeline and text centering - Fix Agent SDK validation: save temp screenshots inside project dir (.openpencil-tmp/) so Claude Code plan mode can read them, instead of /tmp/ which is outside the project sandbox - Enrich validation tree dump with fill colors, stroke, fontSize, fontWeight, textAlign, cornerRadius, opacity for comprehensive visual analysis - Add multi-round validation with quality scoring (threshold 8/10), 500ms stabilization delay between rounds - Add detailed debug logging to applyValidationFixes showing which nodes were found/skipped and property changes - Fix canvas sync needsTextbox check to also account for textAlign (matching isFixedWidthText in factory), preventing IText↔Textbox thrashing on every sync tick - Auto-center text in vertical+center layouts by expanding to full container width and injecting textAlign:'center' - Force Textbox for non-left-aligned text so textAlign is respected (IText ignores width and computes its own) * fix(canvas): use precise text width estimation for fit-content layout Remove the 14% safety factor from text width estimation when computing fit-content/natural-width text dimensions. IText auto-computes its own width and ignores our setting, so the safety margin only inflated the layout allocation, making text appear left-shifted within its container. * fix(canvas): center fit-content text in horizontal layouts For text nodes with fit-content width in horizontal layouts, set textAlign:'center' to compensate for width estimation inaccuracy. The estimated box is typically wider than the actual rendered text, causing left-aligned text to appear visually shifted. Centering distributes the estimation error evenly on both sides. * feat(ai): show validation details in checklist panel - Accumulate validation log (screenshot, analysis, fixes) instead of overwriting status messages, so the full process is visible - Preserve step thinking content in buildFinalStepTags (was discarded) - Add details field to pipeline items and render in checklist UI - Each validation step now shows: screenshot captured, issues found, quality score, fixes applied * feat(ai): add visual reference pipeline types and integration hooks - Add DesignSystem and VisualReference types to ai-types - Add 'visual-ref' mode to AIDesignRequest and SubTask.htmlReference - Detect visual-ref candidates in chat handlers (landing pages, websites) - Wire visual-ref mode in design-generator and orchestrator - Inject HTML reference snippets into sub-agent prompts * feat(ai): add modular design principles for sub-agent context - Add design-principles module with topic files: color, typography, spacing, composition, components - Selectively load relevant principles based on prompt content - Inject design principles into sub-agent system prompts * feat(ai): implement visual reference pipeline - Add design-system-generator: generates color/typography/spacing tokens - Add design-code-generator: generates HTML/CSS from design system - Add html-renderer: renders HTML to screenshot via html2canvas - Add visual-ref-orchestrator: coordinates the full pipeline (design system → HTML code → screenshot → enrich subtasks) - Add html2canvas dependency for client-side HTML rendering * feat(mcp): default filePath to live canvas and fix cross-platform issues - Default all MCP tool filePath to live://canvas when omitted, so tools operate on the real-time canvas instead of stale files - Remove filePath from required params in all tool schemas (21 interfaces) - Fix mcp-server-manager.ts using process.cwd() which fails in Electron production on Linux — now checks ELECTRON_RESOURCES_PATH first - Fix stopMcpHttpServer using SIGTERM on Windows — use taskkill instead - Force new children reference in applyExternalDocument to ensure canvas sync subscriber always detects MCP-pushed document updates * feat(mcp): enhance design prompt with semantic roles, CJK typography, and layout rules Add comprehensive design knowledge to MCP design prompt for better AI-generated designs: design type detection (mobile vs desktop), full semantic role reference with context-aware defaults, CJK typography rules, expanded text/layout/form guidelines, and detailed post-processing documentation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat(ai): implement intent classification for chat handlers - Replace hardcoded keyword matching with a lightweight LLM call to classify user intent in chat messages. - Introduce a new function `classifyIntent` to determine if the request is for design generation or conversation. - Update design request handling in `useChatHandlers` to utilize the new classification method. - Enhance design prompt documentation to reflect changes in design type detection based on intent rather than keywords. * fix(ai): handle string qualityScore in validation response parsing The LLM sometimes returns qualityScore as a string (e.g. "8" instead of 8), causing it to fall through to 0. Also hide misleading "quality: 0/10" display when the score couldn't be determined, and log raw response for debugging. * fix(ai): increase validation timeout to 90s and fix quality score parsing Agent SDK validation requires spawning a process, reading the image, and analyzing it — 30s was consistently timing out. Also handle string qualityScore values from LLM responses and hide misleading 0/10 display. * fix(ai): fix validation timeout and response parsing - Increase validation timeout from 30s to 180s (Agent SDK needs time for subprocess spawn + OAuth auth + multi-turn image reading) - Strip <tool_use> XML blocks from Agent SDK response before extracting JSON — the tool call XML was confusing the regex, causing qualityScore to parse as 0 despite valid JSON being present - Handle string qualityScore values and hide misleading "quality: 0/10" - Revert unnecessary direct API key approach for validation * fix(ai): prevent node ID collisions between generations When generating new content on a canvas with existing nodes, AI-generated IDs (e.g. brand-spacer) would collide with previous generations. Now captures pre-existing node IDs at generation start and checks against them during upsert sanitization. Remapped IDs are tracked in generationRemappedIds so progressive streaming updates can still find their nodes. * fix(ai): require styleGuide in orchestrator plan and fix validation detail icons - Add fallback default styleGuide when orchestrator LLM omits it - Strengthen prompt to mark styleGuide as REQUIRED - Replace emoji icons in validation details with [done]/[pending]/[error] markers for consistent styling with the checklist design system * feat(server): add port file plugin for server instance discovery - Introduce a new Nitro plugin that writes a port file on server startup to allow the MCP server to discover the running instance, whether it's a development server or Electron. - Implement error handling in the Electron main process for writing the port file, logging any failures. - Update Vite configuration to include additional external dependencies in the rollup configuration. * feat(electron): implement IPC for retrieving pending file paths - Added a new IPC handler `file:getPending` to retrieve and clear the pending file path when the React app mounts. - Updated the Electron API to include `getPendingFile` for renderer access. - Enhanced the `useElectronMenu` hook to load any pending file on application startup. - Updated UI components to reflect changes in file handling and improved user experience. * fix(panels): replace emoji icons with styled icons in validation checklist - Parse [done]/[pending]/[error] prefixes in detail lines and render as styled circle icons matching the parent checklist design system - Replace remaining emoji markers in design-validation.ts with text prefixes - Fix isApplied detection to recognize new [done] Applied marker * refactor(electron): update settings path to use platform-standard app data directory - Changed the settings file path to utilize Electron's user data directory for better cross-platform compatibility. - Updated the settings writing function to ensure the user data directory is created if it doesn't exist. - Added comments to clarify the storage location for different operating systems. - Implemented a fixed partition for localStorage/cookies to maintain data across server port changes. * feat(ai): enhance validation with pre-checks, structural fixes, and border detection - Add design-pre-validation.ts: pure code checks before LLM validation - Invisible container detection (same fill as parent → auto-add border) - Sibling consistency (majority-rule for height/cornerRadius) - Add structural fixes to validation: addChild/removeNode operations - Icon injection via lookupIconByName with server fallback - autoFixParentLayout with child count guard to prevent layout breakage - Add strokeColor/strokeWidth to safe fix properties for border fixes - Simplify intent classification: all design requests use visual-ref pipeline - Fix checklist: "Found N issues" now shows [done] instead of [pending] - Fix qualityScore: only update when > 0 to preserve valid round scores * fix(ai): cherry-pick safe validation improvements, drop aggressive pre-checks Keep: stroke tree dump bug fix (object not array), qualityScore=0 false positive detection, fit_content→fixed safety guard, empty path removal, type-specific sibling consistency, repeated fix filtering, screenshot extraction to design-screenshot.ts. Drop: detectForcedFixedHeight (destroyed input/button heights), MAX_VALIDATION_ROUNDS 5 (too many rounds), removal of quality threshold early stop, section regeneration phase. --------- Co-authored-by: Fini <fini.yang@gmail.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
294 lines
9.7 KiB
TypeScript
294 lines
9.7 KiB
TypeScript
import { defineEventHandler, readBody, setResponseHeaders } from 'h3'
|
|
import type { GroupedModel } from '../../../src/types/agent-settings'
|
|
import { resolveClaudeCli } from '../../utils/resolve-claude-cli'
|
|
import {
|
|
buildClaudeAgentEnv,
|
|
getClaudeAgentDebugFilePath,
|
|
} from '../../utils/resolve-claude-agent-env'
|
|
|
|
interface ConnectBody {
|
|
agent: 'claude-code' | 'codex-cli' | 'opencode' | 'copilot'
|
|
}
|
|
|
|
interface ConnectResult {
|
|
connected: boolean
|
|
models: GroupedModel[]
|
|
error?: string
|
|
notInstalled?: boolean
|
|
}
|
|
|
|
/**
|
|
* POST /api/ai/connect-agent
|
|
* Actively connects to a local CLI tool and fetches its supported models.
|
|
*/
|
|
export default defineEventHandler(async (event) => {
|
|
const body = await readBody<ConnectBody>(event)
|
|
setResponseHeaders(event, { 'Content-Type': 'application/json' })
|
|
|
|
if (!body?.agent) {
|
|
return { connected: false, models: [], error: 'Missing agent field' } satisfies ConnectResult
|
|
}
|
|
|
|
if (body.agent === 'claude-code') {
|
|
return connectClaudeCode()
|
|
}
|
|
|
|
if (body.agent === 'codex-cli') {
|
|
return connectCodexCli()
|
|
}
|
|
|
|
if (body.agent === 'opencode') {
|
|
return connectOpenCode()
|
|
}
|
|
|
|
if (body.agent === 'copilot') {
|
|
return connectCopilot()
|
|
}
|
|
|
|
return { connected: false, models: [], error: `Unknown agent: ${body.agent}` } satisfies ConnectResult
|
|
})
|
|
|
|
/** Connect to Claude Code via Agent SDK and fetch real supported models */
|
|
async function connectClaudeCode(): Promise<ConnectResult> {
|
|
const claudePath = resolveClaudeCli()
|
|
if (!claudePath) {
|
|
return { connected: false, models: [], notInstalled: true, error: 'Claude Code CLI not found' }
|
|
}
|
|
|
|
try {
|
|
const { query } = await import('@anthropic-ai/claude-agent-sdk')
|
|
|
|
const env = buildClaudeAgentEnv()
|
|
const debugFile = getClaudeAgentDebugFilePath()
|
|
|
|
const q = query({
|
|
prompt: '',
|
|
options: {
|
|
maxTurns: 1,
|
|
tools: [],
|
|
permissionMode: 'plan',
|
|
persistSession: false,
|
|
env,
|
|
...(debugFile ? { debugFile } : {}),
|
|
...(claudePath ? { pathToClaudeCodeExecutable: claudePath } : {}),
|
|
},
|
|
})
|
|
|
|
const raw = await q.supportedModels()
|
|
q.close()
|
|
|
|
const models: GroupedModel[] = raw.map((m) => ({
|
|
value: m.value,
|
|
displayName: m.displayName,
|
|
description: m.description,
|
|
provider: 'anthropic' as const,
|
|
}))
|
|
|
|
return { connected: true, models }
|
|
} catch (error) {
|
|
const raw = error instanceof Error ? error.message : 'Failed to connect'
|
|
return { connected: false, models: [], error: friendlyClaudeError(raw) }
|
|
}
|
|
}
|
|
|
|
/** Map raw Agent SDK errors to user-friendly messages */
|
|
function friendlyClaudeError(raw: string): string {
|
|
if (/process exited with code 1|invalid model|unknown model|model.*not/i.test(raw)) {
|
|
return 'Claude Code exited with code 1. Check your model mapping (e.g. ANTHROPIC_MODEL / default Sonnet model) and run "claude login" if needed.'
|
|
}
|
|
if (/exited with code/i.test(raw)) {
|
|
return 'Unable to connect. Claude Code process exited unexpectedly.'
|
|
}
|
|
if (/not found|ENOENT/i.test(raw)) {
|
|
return 'Claude Code CLI not found. Please install it first.'
|
|
}
|
|
if (/timed?\s*out/i.test(raw)) {
|
|
return 'Connection timed out. Please try again.'
|
|
}
|
|
return raw
|
|
}
|
|
|
|
/** Connect to Codex CLI and fetch its supported models from the local cache */
|
|
async function connectCodexCli(): Promise<ConnectResult> {
|
|
try {
|
|
const { execSync } = await import('node:child_process')
|
|
const { readFile } = await import('node:fs/promises')
|
|
const { homedir } = await import('node:os')
|
|
const { join } = await import('node:path')
|
|
|
|
// Check if codex binary exists
|
|
const whichCmd = process.platform === 'win32' ? 'where codex 2>nul' : 'which codex 2>/dev/null || echo ""'
|
|
const which = execSync(whichCmd, {
|
|
encoding: 'utf-8',
|
|
timeout: 5000,
|
|
}).trim().split(/\r?\n/)[0]?.trim() ?? ''
|
|
|
|
if (!which) {
|
|
return { connected: false, models: [], notInstalled: true, error: 'Codex CLI not found' }
|
|
}
|
|
|
|
// Verify codex is responsive
|
|
try {
|
|
execSync('codex --version 2>&1', { encoding: 'utf-8', timeout: 5000 })
|
|
} catch {
|
|
return { connected: false, models: [], error: 'Codex CLI not responding' }
|
|
}
|
|
|
|
// Read models from Codex CLI's local models cache
|
|
let models: GroupedModel[] = []
|
|
const cachePath = join(homedir(), '.codex', 'models_cache.json')
|
|
|
|
try {
|
|
const raw = await readFile(cachePath, 'utf-8')
|
|
const cache = JSON.parse(raw) as {
|
|
models?: Array<{
|
|
slug: string
|
|
display_name: string
|
|
description: string
|
|
visibility: string
|
|
priority: number
|
|
}>
|
|
}
|
|
|
|
if (cache.models && Array.isArray(cache.models)) {
|
|
models = cache.models
|
|
.filter((m) => m.visibility === 'list')
|
|
.sort((a, b) => (a.priority ?? 999) - (b.priority ?? 999))
|
|
.map((m) => ({
|
|
value: m.slug,
|
|
displayName: m.display_name,
|
|
description: m.description ?? '',
|
|
provider: 'openai' as const,
|
|
}))
|
|
}
|
|
} catch {
|
|
// Cache file not found or unreadable
|
|
}
|
|
|
|
if (models.length === 0) {
|
|
return { connected: false, models: [], error: 'No models found. Try running codex once to populate the model cache.' }
|
|
}
|
|
|
|
return { connected: true, models }
|
|
} catch (error) {
|
|
const msg = error instanceof Error ? error.message : 'Failed to connect'
|
|
return { connected: false, models: [], error: msg }
|
|
}
|
|
}
|
|
|
|
/** Connect to OpenCode and fetch its configured providers/models. */
|
|
async function connectOpenCode(): Promise<ConnectResult> {
|
|
try {
|
|
const { execSync } = await import('node:child_process')
|
|
const whichCmd = process.platform === 'win32' ? 'where opencode 2>nul' : 'which opencode 2>/dev/null || echo ""'
|
|
const whichResult = execSync(whichCmd, { encoding: 'utf-8', timeout: 5000 }).trim()
|
|
if (!whichResult) {
|
|
return { connected: false, models: [], notInstalled: true, error: 'OpenCode CLI not found' }
|
|
}
|
|
|
|
const { getOpencodeClient, releaseOpencodeServer } = await import('../../utils/opencode-client')
|
|
const { client, server } = await getOpencodeClient()
|
|
|
|
const { data, error } = await client.config.providers()
|
|
releaseOpencodeServer(server)
|
|
|
|
if (error) {
|
|
return { connected: false, models: [], error: 'Failed to fetch providers from OpenCode server.' }
|
|
}
|
|
|
|
const models: GroupedModel[] = []
|
|
for (const provider of data?.providers ?? []) {
|
|
if (!provider.models) continue
|
|
for (const [, model] of Object.entries(provider.models)) {
|
|
models.push({
|
|
value: `${provider.id}/${model.id}`,
|
|
displayName: model.name || model.id,
|
|
description: `via ${provider.name || provider.id}`,
|
|
provider: 'opencode' as const,
|
|
})
|
|
}
|
|
}
|
|
|
|
if (models.length === 0) {
|
|
return { connected: false, models: [], error: 'No models configured in OpenCode. Run "opencode" to set up providers.' }
|
|
}
|
|
|
|
return { connected: true, models }
|
|
} catch (error) {
|
|
const raw = error instanceof Error ? error.message : 'Failed to connect'
|
|
return { connected: false, models: [], error: friendlyOpenCodeError(raw) }
|
|
}
|
|
}
|
|
|
|
/** Connect to GitHub Copilot CLI via @github/copilot-sdk and fetch available models. */
|
|
async function connectCopilot(): Promise<ConnectResult> {
|
|
// Use standalone copilot binary to avoid Bun's node:sqlite issue
|
|
const { resolveCopilotCli } = await import('../../utils/copilot-client')
|
|
const cliPath = resolveCopilotCli()
|
|
if (!cliPath) {
|
|
return { connected: false, models: [], notInstalled: true, error: 'GitHub Copilot CLI not found' }
|
|
}
|
|
|
|
try {
|
|
const { CopilotClient } = await import('@github/copilot-sdk')
|
|
const client = new CopilotClient({ autoStart: true, cliPath })
|
|
|
|
await client.start()
|
|
|
|
let models: GroupedModel[] = []
|
|
try {
|
|
const modelList = await client.listModels()
|
|
models = modelList
|
|
.filter((m) => !m.policy || m.policy.state === 'enabled')
|
|
.map((m) => ({
|
|
value: m.id,
|
|
displayName: m.name,
|
|
description: m.capabilities?.supports?.vision ? 'vision' : '',
|
|
provider: 'copilot' as const,
|
|
}))
|
|
} catch (listErr) {
|
|
const msg = listErr instanceof Error ? listErr.message : 'Failed to list models'
|
|
await client.stop().catch(() => {})
|
|
return { connected: false, models: [], error: friendlyCopilotError(msg) }
|
|
}
|
|
|
|
await client.stop()
|
|
|
|
if (models.length === 0) {
|
|
return { connected: false, models: [], error: 'No models found. Run "copilot login" to authenticate first.' }
|
|
}
|
|
|
|
return { connected: true, models }
|
|
} catch (error) {
|
|
const raw = error instanceof Error ? error.message : 'Failed to connect'
|
|
return { connected: false, models: [], error: friendlyCopilotError(raw) }
|
|
}
|
|
}
|
|
|
|
/** Map Copilot SDK errors to user-friendly messages */
|
|
function friendlyCopilotError(raw: string): string {
|
|
if (/not found|ENOENT/i.test(raw)) {
|
|
return 'GitHub Copilot CLI not found. Install it from https://docs.github.com/copilot/how-tos/copilot-cli'
|
|
}
|
|
if (/not authenticated|authenticate first|auth|unauthenticated|login/i.test(raw)) {
|
|
return 'Not authenticated. Run "copilot login" in your terminal first.'
|
|
}
|
|
if (/timed?\s*out/i.test(raw)) {
|
|
return 'Connection timed out. Please try again.'
|
|
}
|
|
return raw
|
|
}
|
|
|
|
/** Map OpenCode connection errors to user-friendly messages */
|
|
function friendlyOpenCodeError(raw: string): string {
|
|
if (/ECONNREFUSED/i.test(raw)) {
|
|
return 'OpenCode server not running. Start it with "opencode" in your terminal first.'
|
|
}
|
|
if (/not found|ENOENT/i.test(raw)) {
|
|
return 'OpenCode CLI not found. Please install it first.'
|
|
}
|
|
if (/timed?\s*out/i.test(raw)) {
|
|
return 'Connection timed out. Please try again.'
|
|
}
|
|
return raw
|
|
}
|