Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 pftom
|
bbeb868040 | ||
|
pftom
|
f2d28a1cca | ||
|
Tom Huang
|
94941f59a9 | ||
|
Tom Huang
|
d243b37d74 | ||
|
Tom Huang
|
1c942e6cb7 | ||
|
lakatos
|
d1c3230642 | ||
|
Tom Huang
|
bc2198103a |
Binary file not shown.
|
After Width: | Height: | Size: 366 KiB |
+3
-1
@@ -15,4 +15,6 @@ dist
|
||||
|
||||
tsconfig.tsbuildinfo
|
||||
|
||||
.claude-sessions/*
|
||||
.claude-sessions/*
|
||||
|
||||
.cursor/*
|
||||
@@ -211,7 +211,7 @@ DISCOVERY directives (turn-1 form, turn-2 brand branch, TodoWrite, 5-dim critiq
|
||||
+ active SKILL.md (19 skills available)
|
||||
+ project metadata (kind, fidelity, speakerNotes, animations, inspiration ids)
|
||||
+ skill side files (auto-injected pre-flight: read assets/template.html + references/*.md)
|
||||
+ (deck mode only) DECK_FRAMEWORK_DIRECTIVE (nav / counter / scroll / print)
|
||||
+ (deck kind, no skill seed) DECK_FRAMEWORK_DIRECTIVE (nav / counter / scroll / print)
|
||||
```
|
||||
|
||||
Every layer is composable. Every layer is a file you can edit. Read [`src/prompts/system.ts`](src/prompts/system.ts) and [`src/prompts/discovery.ts`](src/prompts/discovery.ts) to see the actual contract.
|
||||
@@ -538,6 +538,14 @@ Phased delivery → [`docs/roadmap.md`](docs/roadmap.md).
|
||||
|
||||
This is an early implementation — the closed loop (detect → pick skill + design system → chat → parse `<artifact>` → preview → save) runs end-to-end. The prompt stack and skill library are where most of the value lives, and they're stable. The component-level UI is shipping daily.
|
||||
|
||||
## Star us
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/nexu-io/open-design"><img src="docs/assets/star-us.png" alt="Star Open Design on GitHub — github.com/nexu-io/open-design" width="100%" /></a>
|
||||
</p>
|
||||
|
||||
If this saved you thirty minutes — give it a ★. Stars don't pay rent, but they tell the next designer, agent, and contributor that this experiment is worth their attention. One click, three seconds, real signal: [github.com/nexu-io/open-design](https://github.com/nexu-io/open-design).
|
||||
|
||||
## Contributing
|
||||
|
||||
Issues, PRs, new skills, and new design systems are all welcome. The highest-leverage contributions are usually one folder, one Markdown file, or one PR-sized adapter:
|
||||
|
||||
+9
-1
@@ -211,7 +211,7 @@ DISCOVERY 指令 （turn-1 表单、turn-2 品牌分支、TodoWrite、
|
||||
+ 激活的 SKILL.md （19 套备选）
|
||||
+ 项目元数据 （kind、fidelity、speakerNotes、animations、灵感 system id）
|
||||
+ Skill 副文件 （自动注入 pre-flight：先读 assets/template.html + references/*.md）
|
||||
+ （仅 deck 模式） DECK_FRAMEWORK_DIRECTIVE （nav / counter / scroll / print）
|
||||
+ （deck kind 且无 skill 种子时） DECK_FRAMEWORK_DIRECTIVE （nav / counter / scroll / print）
|
||||
```
|
||||
|
||||
每一层都可组合。每一层都是一个你能改的文件。看 [`src/prompts/system.ts`](src/prompts/system.ts) 和 [`src/prompts/discovery.ts`](src/prompts/discovery.ts) 就知道真实契约长什么样。
|
||||
@@ -538,6 +538,14 @@ Daemon 启动时从 `PATH` 自动检测，无需配置。
|
||||
|
||||
这是一个早期实现 —— 闭环（检测 → 选 skill + design system → 对话 → 解析 `<artifact>` → 预览 → 保存）已经端到端跑通。提示词栈和 skill 库是价值最重的部分，目前已稳定。组件级 UI 仍在每天迭代。
|
||||
|
||||
## 给我们点个 Star
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/nexu-io/open-design"><img src="docs/assets/star-us.png" alt="给 Open Design 点个 Star —— github.com/nexu-io/open-design" width="100%" /></a>
|
||||
</p>
|
||||
|
||||
如果这套东西帮你省了半小时，给它一个 ★。Star 不付房租，但它告诉下一个设计师、Agent 和贡献者：这个实验值得他们的注意力。一次点击、三秒钟、真实信号：[github.com/nexu-io/open-design](https://github.com/nexu-io/open-design)。
|
||||
|
||||
## 贡献
|
||||
|
||||
欢迎 issue、PR、新 skill、新 design system。收益最高的贡献往往就是一个文件夹、一份 Markdown，或者一个 PR 大小的 adapter：
|
||||
|
||||
+273
-18
@@ -6,27 +6,101 @@ import path from 'node:path';
|
||||
|
||||
const execFileP = promisify(execFile);
|
||||
|
||||
// Each entry defines how to invoke the agent in non-interactive "one-shot" mode.
|
||||
// `buildArgs(prompt, imagePaths)` returns argv for the child process.
|
||||
// Per-agent model picker.
|
||||
//
|
||||
// - `listModels` : optional spec for fetching the model list from
|
||||
// the CLI itself ({ args, parse, timeoutMs }).
|
||||
// When defined we run it during agent detection
|
||||
// (best-effort, with a timeout) and use the
|
||||
// result. If the listing fails we fall back to
|
||||
// `fallbackModels` so the UI still has something
|
||||
// to show.
|
||||
// - `fallbackModels` : static hint list. Used as the source of truth
|
||||
// for CLIs that don't expose a listing command
|
||||
// (Claude Code, Codex, Gemini CLI, Qwen Code)
|
||||
// and as the fallback for the others.
|
||||
// - `reasoningOptions` : optional reasoning-effort presets (currently
|
||||
// only Codex exposes this knob).
|
||||
// - `buildArgs(prompt, imagePaths, extraAllowedDirs, options)` returns
|
||||
// argv for the child process. `options = { model, reasoning }` carries
|
||||
// whatever the user picked in the model menu — agents that don't take a
|
||||
// model flag ignore them.
|
||||
//
|
||||
// Every model list is prefixed with a synthetic `'default'` entry meaning
|
||||
// "let the CLI pick" — the agent runs with no `--model` flag, so the
|
||||
// user's local CLI config wins.
|
||||
//
|
||||
// `extraAllowedDirs` is a list of absolute directories the agent must be
|
||||
// permitted to read files from (skill seeds, design-system specs) that live
|
||||
// outside the project cwd. Currently only Claude Code wires this through
|
||||
// (`--add-dir`); other agents either inherit broader access or run with cwd
|
||||
// boundaries we can't widen via flags.
|
||||
//
|
||||
// `streamFormat` hints to the daemon how to interpret stdout:
|
||||
// - 'claude-stream-json' : line-delimited JSON emitted by Claude Code's
|
||||
// `--output-format stream-json`. Daemon parses it into typed events
|
||||
// (text / thinking / tool_use / tool_result / status) for the UI.
|
||||
// - 'plain' (default) : raw text, forwarded chunk-by-chunk.
|
||||
|
||||
const DEFAULT_MODEL_OPTION = { id: 'default', label: 'Default (CLI config)' };
|
||||
|
||||
// Parse one-id-per-line stdout from `<cli> models` and prepend the synthetic
|
||||
// default option. Used by opencode / cursor-agent.
|
||||
function parseLineSeparatedModels(stdout) {
|
||||
const ids = String(stdout || '')
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line.length > 0 && !line.startsWith('#'));
|
||||
// De-dupe while preserving order — some CLIs print near-duplicates.
|
||||
const seen = new Set();
|
||||
const out = [DEFAULT_MODEL_OPTION];
|
||||
for (const id of ids) {
|
||||
if (seen.has(id)) continue;
|
||||
seen.add(id);
|
||||
out.push({ id, label: id });
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
export const AGENT_DEFS = [
|
||||
{
|
||||
id: 'claude',
|
||||
name: 'Claude Code',
|
||||
bin: 'claude',
|
||||
versionArgs: ['--version'],
|
||||
buildArgs: (prompt) => [
|
||||
'-p',
|
||||
prompt,
|
||||
'--output-format',
|
||||
'stream-json',
|
||||
'--verbose',
|
||||
'--include-partial-messages',
|
||||
// `claude` has no list-models subcommand; the CLI accepts both short
|
||||
// aliases (sonnet/opus/haiku) and the full ids, so we ship both as
|
||||
// hints. Users who want a non-shipped model can paste it via the
|
||||
// Settings dialog's custom-model input.
|
||||
fallbackModels: [
|
||||
DEFAULT_MODEL_OPTION,
|
||||
{ id: 'sonnet', label: 'Sonnet (alias)' },
|
||||
{ id: 'opus', label: 'Opus (alias)' },
|
||||
{ id: 'haiku', label: 'Haiku (alias)' },
|
||||
{ id: 'claude-opus-4-5', label: 'claude-opus-4-5' },
|
||||
{ id: 'claude-sonnet-4-5', label: 'claude-sonnet-4-5' },
|
||||
{ id: 'claude-haiku-4-5', label: 'claude-haiku-4-5' },
|
||||
],
|
||||
buildArgs: (prompt, _imagePaths, extraAllowedDirs = [], options = {}) => {
|
||||
const args = [
|
||||
'-p',
|
||||
prompt,
|
||||
'--output-format',
|
||||
'stream-json',
|
||||
'--verbose',
|
||||
'--include-partial-messages',
|
||||
];
|
||||
if (options.model && options.model !== 'default') {
|
||||
args.push('--model', options.model);
|
||||
}
|
||||
const dirs = (extraAllowedDirs || []).filter(
|
||||
(d) => typeof d === 'string' && d.length > 0,
|
||||
);
|
||||
if (dirs.length > 0) {
|
||||
args.push('--add-dir', ...dirs);
|
||||
}
|
||||
return args;
|
||||
},
|
||||
streamFormat: 'claude-stream-json',
|
||||
},
|
||||
{
|
||||
@@ -34,7 +108,35 @@ export const AGENT_DEFS = [
|
||||
name: 'Codex CLI',
|
||||
bin: 'codex',
|
||||
versionArgs: ['--version'],
|
||||
buildArgs: (prompt) => ['exec', prompt],
|
||||
// Codex doesn't have a `models` subcommand; ship the most common ids
|
||||
// as a hint. Users can supply other ids via the custom-model input.
|
||||
fallbackModels: [
|
||||
DEFAULT_MODEL_OPTION,
|
||||
{ id: 'gpt-5-codex', label: 'gpt-5-codex' },
|
||||
{ id: 'gpt-5', label: 'gpt-5' },
|
||||
{ id: 'o3', label: 'o3' },
|
||||
{ id: 'o4-mini', label: 'o4-mini' },
|
||||
],
|
||||
reasoningOptions: [
|
||||
{ id: 'default', label: 'Default' },
|
||||
{ id: 'minimal', label: 'Minimal' },
|
||||
{ id: 'low', label: 'Low' },
|
||||
{ id: 'medium', label: 'Medium' },
|
||||
{ id: 'high', label: 'High' },
|
||||
],
|
||||
buildArgs: (prompt, _imagePaths, _extra, options = {}) => {
|
||||
const args = ['exec'];
|
||||
if (options.model && options.model !== 'default') {
|
||||
args.push('--model', options.model);
|
||||
}
|
||||
if (options.reasoning && options.reasoning !== 'default') {
|
||||
// Codex accepts `-c key=value` config overrides; reasoning effort
|
||||
// is exposed as `model_reasoning_effort`.
|
||||
args.push('-c', `model_reasoning_effort="${options.reasoning}"`);
|
||||
}
|
||||
args.push(prompt);
|
||||
return args;
|
||||
},
|
||||
streamFormat: 'plain',
|
||||
},
|
||||
{
|
||||
@@ -42,7 +144,19 @@ export const AGENT_DEFS = [
|
||||
name: 'Gemini CLI',
|
||||
bin: 'gemini',
|
||||
versionArgs: ['--version'],
|
||||
buildArgs: (prompt) => ['-p', prompt],
|
||||
fallbackModels: [
|
||||
DEFAULT_MODEL_OPTION,
|
||||
{ id: 'gemini-2.5-pro', label: 'gemini-2.5-pro' },
|
||||
{ id: 'gemini-2.5-flash', label: 'gemini-2.5-flash' },
|
||||
],
|
||||
buildArgs: (prompt, _imagePaths, _extra, options = {}) => {
|
||||
const args = [];
|
||||
if (options.model && options.model !== 'default') {
|
||||
args.push('--model', options.model);
|
||||
}
|
||||
args.push('-p', prompt);
|
||||
return args;
|
||||
},
|
||||
streamFormat: 'plain',
|
||||
},
|
||||
{
|
||||
@@ -50,7 +164,26 @@ export const AGENT_DEFS = [
|
||||
name: 'OpenCode',
|
||||
bin: 'opencode',
|
||||
versionArgs: ['--version'],
|
||||
buildArgs: (prompt) => ['run', prompt],
|
||||
// `opencode models` prints `provider/model` per line.
|
||||
listModels: {
|
||||
args: ['models'],
|
||||
parse: parseLineSeparatedModels,
|
||||
timeoutMs: 8000,
|
||||
},
|
||||
fallbackModels: [
|
||||
DEFAULT_MODEL_OPTION,
|
||||
{ id: 'anthropic/claude-sonnet-4-5', label: 'anthropic/claude-sonnet-4-5' },
|
||||
{ id: 'openai/gpt-5', label: 'openai/gpt-5' },
|
||||
{ id: 'google/gemini-2.5-pro', label: 'google/gemini-2.5-pro' },
|
||||
],
|
||||
buildArgs: (prompt, _imagePaths, _extra, options = {}) => {
|
||||
const args = ['run'];
|
||||
if (options.model && options.model !== 'default') {
|
||||
args.push('--model', options.model);
|
||||
}
|
||||
args.push(prompt);
|
||||
return args;
|
||||
},
|
||||
streamFormat: 'plain',
|
||||
},
|
||||
{
|
||||
@@ -58,7 +191,33 @@ export const AGENT_DEFS = [
|
||||
name: 'Cursor Agent',
|
||||
bin: 'cursor-agent',
|
||||
versionArgs: ['--version'],
|
||||
buildArgs: (prompt) => ['-p', prompt],
|
||||
// `cursor-agent models` prints account-bound model ids per line. When
|
||||
// the user isn't authed it prints "No models available for this
|
||||
// account." — that's not a model list, so we detect it and fall back.
|
||||
listModels: {
|
||||
args: ['models'],
|
||||
timeoutMs: 5000,
|
||||
parse: (stdout) => {
|
||||
const trimmed = String(stdout || '').trim();
|
||||
if (!trimmed || /no models available/i.test(trimmed)) return null;
|
||||
return parseLineSeparatedModels(trimmed);
|
||||
},
|
||||
},
|
||||
fallbackModels: [
|
||||
DEFAULT_MODEL_OPTION,
|
||||
{ id: 'auto', label: 'auto' },
|
||||
{ id: 'sonnet-4', label: 'sonnet-4' },
|
||||
{ id: 'sonnet-4-thinking', label: 'sonnet-4-thinking' },
|
||||
{ id: 'gpt-5', label: 'gpt-5' },
|
||||
],
|
||||
buildArgs: (prompt, _imagePaths, _extra, options = {}) => {
|
||||
const args = [];
|
||||
if (options.model && options.model !== 'default') {
|
||||
args.push('--model', options.model);
|
||||
}
|
||||
args.push('-p', prompt);
|
||||
return args;
|
||||
},
|
||||
streamFormat: 'plain',
|
||||
},
|
||||
{
|
||||
@@ -66,7 +225,19 @@ export const AGENT_DEFS = [
|
||||
name: 'Qwen Code',
|
||||
bin: 'qwen',
|
||||
versionArgs: ['--version'],
|
||||
buildArgs: (prompt) => ['-p', prompt],
|
||||
fallbackModels: [
|
||||
DEFAULT_MODEL_OPTION,
|
||||
{ id: 'qwen3-coder-plus', label: 'qwen3-coder-plus' },
|
||||
{ id: 'qwen3-coder-flash', label: 'qwen3-coder-flash' },
|
||||
],
|
||||
buildArgs: (prompt, _imagePaths, _extra, options = {}) => {
|
||||
const args = [];
|
||||
if (options.model && options.model !== 'default') {
|
||||
args.push('--model', options.model);
|
||||
}
|
||||
args.push('-p', prompt);
|
||||
return args;
|
||||
},
|
||||
streamFormat: 'plain',
|
||||
},
|
||||
];
|
||||
@@ -86,9 +257,36 @@ function resolveOnPath(bin) {
|
||||
return null;
|
||||
}
|
||||
|
||||
async function fetchModels(def, resolvedBin) {
|
||||
if (!def.listModels) return def.fallbackModels;
|
||||
try {
|
||||
const { stdout } = await execFileP(resolvedBin, def.listModels.args, {
|
||||
timeout: def.listModels.timeoutMs ?? 5000,
|
||||
// Models lists from popular CLIs (e.g. opencode) easily exceed the
|
||||
// default 1MB buffer once you include every openrouter model. Bump
|
||||
// it so we don't truncate the listing.
|
||||
maxBuffer: 8 * 1024 * 1024,
|
||||
});
|
||||
const parsed = def.listModels.parse(stdout);
|
||||
// Empty / null parse result means the CLI didn't actually return a
|
||||
// usable list (e.g. cursor-agent's "No models available"); fall back
|
||||
// to the static hint so the picker isn't stuck on Default-only.
|
||||
if (!parsed || parsed.length === 0) return def.fallbackModels;
|
||||
return parsed;
|
||||
} catch {
|
||||
return def.fallbackModels;
|
||||
}
|
||||
}
|
||||
|
||||
async function probe(def) {
|
||||
const resolved = resolveOnPath(def.bin);
|
||||
if (!resolved) return { ...stripFns(def), available: false };
|
||||
if (!resolved) {
|
||||
return {
|
||||
...stripFns(def),
|
||||
models: def.fallbackModels ?? [DEFAULT_MODEL_OPTION],
|
||||
available: false,
|
||||
};
|
||||
}
|
||||
let version = null;
|
||||
try {
|
||||
const { stdout } = await execFileP(resolved, def.versionArgs, { timeout: 3000 });
|
||||
@@ -96,18 +294,75 @@ async function probe(def) {
|
||||
} catch {
|
||||
// binary exists but --version failed; still mark available
|
||||
}
|
||||
return { ...stripFns(def), available: true, path: resolved, version };
|
||||
const models = await fetchModels(def, resolved);
|
||||
return {
|
||||
...stripFns(def),
|
||||
models,
|
||||
available: true,
|
||||
path: resolved,
|
||||
version,
|
||||
};
|
||||
}
|
||||
|
||||
function stripFns(def) {
|
||||
const { buildArgs, ...rest } = def;
|
||||
// Drop the buildArgs / listModels closures but keep declarative metadata
|
||||
// (reasoningOptions, streamFormat, name, bin, etc.). `models` is
|
||||
// populated separately by `fetchModels`, so we strip the static
|
||||
// `fallbackModels` slot here too.
|
||||
const { buildArgs, listModels, fallbackModels, ...rest } = def;
|
||||
return rest;
|
||||
}
|
||||
|
||||
export async function detectAgents() {
|
||||
return Promise.all(AGENT_DEFS.map(probe));
|
||||
const results = await Promise.all(AGENT_DEFS.map(probe));
|
||||
// Refresh the validation cache from whatever we just surfaced to the UI
|
||||
// so /api/chat can accept any model the user could have just picked,
|
||||
// including ones that only showed up after a CLI re-auth.
|
||||
for (const agent of results) {
|
||||
rememberLiveModels(agent.id, agent.models);
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
export function getAgentDef(id) {
|
||||
return AGENT_DEFS.find((a) => a.id === id) || null;
|
||||
}
|
||||
|
||||
// Daemon's /api/chat needs to validate the user's model pick against the
|
||||
// list we last surfaced to the UI. We keep a per-agent cache of the most
|
||||
// recent live list (refreshed every detectAgents() call) and additionally
|
||||
// trust any value present in the static fallback. A model that's neither
|
||||
// gets rejected so a stale or hostile value can't smuggle arbitrary flags.
|
||||
const liveModelCache = new Map();
|
||||
|
||||
export function rememberLiveModels(agentId, models) {
|
||||
if (!Array.isArray(models)) return;
|
||||
liveModelCache.set(
|
||||
agentId,
|
||||
new Set(models.map((m) => m && m.id).filter((id) => typeof id === 'string')),
|
||||
);
|
||||
}
|
||||
|
||||
export function isKnownModel(def, modelId) {
|
||||
if (!modelId) return false;
|
||||
const live = liveModelCache.get(def.id);
|
||||
if (live && live.has(modelId)) return true;
|
||||
if (Array.isArray(def.fallbackModels)) {
|
||||
return def.fallbackModels.some((m) => m.id === modelId);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// Permit user-typed model ids that didn't appear in either the live
|
||||
// listing or the static fallback (e.g. the user is on a brand-new model
|
||||
// the CLI's `models` command hasn't surfaced yet). The CLI gets the value
|
||||
// as a child-process arg — not a shell string — so injection isn't a
|
||||
// concern, but we still reject anything that could be misread as a flag
|
||||
// by a downstream CLI or that contains whitespace / control chars.
|
||||
export function sanitizeCustomModel(id) {
|
||||
if (typeof id !== 'string') return null;
|
||||
const trimmed = id.trim();
|
||||
if (trimmed.length === 0 || trimmed.length > 200) return null;
|
||||
if (!/^[A-Za-z0-9][A-Za-z0-9._/:@-]*$/.test(trimmed)) return null;
|
||||
return trimmed;
|
||||
}
|
||||
|
||||
+37
-2
@@ -6,7 +6,12 @@ import { fileURLToPath } from 'node:url';
|
||||
import path from 'node:path';
|
||||
import fs from 'node:fs';
|
||||
import os from 'node:os';
|
||||
import { detectAgents, getAgentDef } from './agents.js';
|
||||
import {
|
||||
detectAgents,
|
||||
getAgentDef,
|
||||
isKnownModel,
|
||||
sanitizeCustomModel,
|
||||
} from './agents.js';
|
||||
import { listSkills } from './skills.js';
|
||||
import { listDesignSystems, readDesignSystem } from './design-systems.js';
|
||||
import { createClaudeStreamHandler } from './claude-stream.js';
|
||||
@@ -690,6 +695,8 @@ export async function startServer({ port = 7456 } = {}) {
|
||||
imagePaths = [],
|
||||
projectId,
|
||||
attachments = [],
|
||||
model,
|
||||
reasoning,
|
||||
} = req.body || {};
|
||||
const def = getAgentDef(agentId);
|
||||
if (!def) return res.status(400).json({ error: `unknown agent: ${agentId}` });
|
||||
@@ -769,7 +776,33 @@ export async function startServer({ port = 7456 } = {}) {
|
||||
safeImages.length ? `\n\n${safeImages.map((p) => `@${p}`).join(' ')}` : '',
|
||||
].join('');
|
||||
|
||||
const args = def.buildArgs(composed, safeImages);
|
||||
// Skill seeds (`skills/<id>/assets/template.html`) and design-system
|
||||
// specs (`design-systems/<id>/DESIGN.md`) live outside the project cwd.
|
||||
// The composed system prompt asks the agent to Read them via absolute
|
||||
// paths in the skill-root preamble — without an explicit allowlist,
|
||||
// Claude Code blocks those reads (issue #6: "no permission to read
|
||||
// skills template"). We surface both roots so any agent that honours
|
||||
// `--add-dir` can resolve those side files.
|
||||
const extraAllowedDirs = [SKILLS_DIR, DESIGN_SYSTEMS_DIR].filter(
|
||||
(d) => fs.existsSync(d),
|
||||
);
|
||||
// Per-agent model + reasoning the user picked in the model menu.
|
||||
// Trust the value when it matches the most recent /api/agents listing
|
||||
// (live or fallback). Otherwise allow it through if it passes a
|
||||
// permissive sanitizer — that's the path for user-typed custom model
|
||||
// ids the CLI's listing didn't surface yet.
|
||||
const safeModel =
|
||||
typeof model === 'string'
|
||||
? isKnownModel(def, model)
|
||||
? model
|
||||
: sanitizeCustomModel(model)
|
||||
: null;
|
||||
const safeReasoning =
|
||||
typeof reasoning === 'string' && Array.isArray(def.reasoningOptions)
|
||||
? def.reasoningOptions.find((r) => r.id === reasoning)?.id ?? null
|
||||
: null;
|
||||
const agentOptions = { model: safeModel, reasoning: safeReasoning };
|
||||
const args = def.buildArgs(composed, safeImages, extraAllowedDirs, agentOptions);
|
||||
|
||||
res.setHeader('Content-Type', 'text/event-stream');
|
||||
res.setHeader('Cache-Control', 'no-cache, no-transform');
|
||||
@@ -788,6 +821,8 @@ export async function startServer({ port = 7456 } = {}) {
|
||||
streamFormat: def.streamFormat ?? 'plain',
|
||||
projectId: typeof projectId === 'string' ? projectId : null,
|
||||
cwd,
|
||||
model: safeModel,
|
||||
reasoning: safeReasoning,
|
||||
});
|
||||
|
||||
let child;
|
||||
|
||||
+76
-64
@@ -2,9 +2,9 @@
|
||||
// front-matter, returns listing. No watching in this MVP — re-scans on every
|
||||
// GET /api/skills, which is fine for dozens of skills.
|
||||
|
||||
import { readdir, readFile, stat } from 'node:fs/promises';
|
||||
import path from 'node:path';
|
||||
import { parseFrontmatter } from './frontmatter.js';
|
||||
import { readdir, readFile, stat } from "node:fs/promises";
|
||||
import path from "node:path";
|
||||
import { parseFrontmatter } from "./frontmatter.js";
|
||||
|
||||
export async function listSkills(skillsRoot) {
|
||||
const out = [];
|
||||
@@ -17,26 +17,32 @@ export async function listSkills(skillsRoot) {
|
||||
for (const entry of entries) {
|
||||
if (!entry.isDirectory()) continue;
|
||||
const dir = path.join(skillsRoot, entry.name);
|
||||
const skillPath = path.join(dir, 'SKILL.md');
|
||||
const skillPath = path.join(dir, "SKILL.md");
|
||||
try {
|
||||
const stats = await stat(skillPath);
|
||||
if (!stats.isFile()) continue;
|
||||
const raw = await readFile(skillPath, 'utf8');
|
||||
const raw = await readFile(skillPath, "utf8");
|
||||
const { data, body } = parseFrontmatter(raw);
|
||||
const hasAttachments = await dirHasAttachments(dir);
|
||||
const mode = data.od?.mode || inferMode(body, data.description);
|
||||
out.push({
|
||||
id: data.name || entry.name,
|
||||
name: data.name || entry.name,
|
||||
description: data.description || '',
|
||||
description: data.description || "",
|
||||
triggers: Array.isArray(data.triggers) ? data.triggers : [],
|
||||
mode,
|
||||
platform: normalizePlatform(data.od?.platform, mode, body, data.description),
|
||||
platform: normalizePlatform(
|
||||
data.od?.platform,
|
||||
mode,
|
||||
body,
|
||||
data.description
|
||||
),
|
||||
scenario: normalizeScenario(data.od?.scenario, body, data.description),
|
||||
previewType: data.od?.preview?.type || 'html',
|
||||
previewType: data.od?.preview?.type || "html",
|
||||
designSystemRequired: data.od?.design_system?.requires ?? true,
|
||||
defaultFor: normalizeDefaultFor(data.od?.default_for),
|
||||
upstream: typeof data.od?.upstream === 'string' ? data.od.upstream : null,
|
||||
upstream:
|
||||
typeof data.od?.upstream === "string" ? data.od.upstream : null,
|
||||
featured: normalizeFeatured(data.od?.featured),
|
||||
// Optional metadata hints used by 'Use this prompt' fast-create so
|
||||
// the resulting project mirrors the shipped example.html. Each hint
|
||||
@@ -63,15 +69,15 @@ export async function listSkills(skillsRoot) {
|
||||
// open those files via absolute paths.
|
||||
function withSkillRootPreamble(body, dir) {
|
||||
const preamble = [
|
||||
'> **Skill root (absolute):** `' + dir + '`',
|
||||
'>',
|
||||
'> This skill ships side files alongside `SKILL.md`. When the workflow',
|
||||
'> below references relative paths such as `assets/template.html` or',
|
||||
'> `references/layouts.md`, resolve them against the skill root above and',
|
||||
'> open them via their full absolute path.',
|
||||
'',
|
||||
'',
|
||||
].join('\n');
|
||||
"> **Skill root (absolute):** `" + dir + "`",
|
||||
">",
|
||||
"> This skill ships side files alongside `SKILL.md`. When the workflow",
|
||||
"> below references relative paths such as `assets/template.html` or",
|
||||
"> `references/layouts.md`, resolve them against the skill root above and",
|
||||
"> open them via their full absolute path.",
|
||||
"",
|
||||
"",
|
||||
].join("\n");
|
||||
return preamble + body;
|
||||
}
|
||||
|
||||
@@ -79,7 +85,9 @@ async function dirHasAttachments(dir) {
|
||||
try {
|
||||
const entries = await readdir(dir, { withFileTypes: true });
|
||||
return entries.some(
|
||||
(e) => e.name !== 'SKILL.md' && (e.isDirectory() || /\.(md|html|css|js|json|txt)$/i.test(e.name)),
|
||||
(e) =>
|
||||
e.name !== "SKILL.md" &&
|
||||
(e.isDirectory() || /\.(md|html|css|js|json|txt)$/i.test(e.name))
|
||||
);
|
||||
} catch {
|
||||
return false;
|
||||
@@ -96,7 +104,7 @@ function normalizeDefaultFor(value) {
|
||||
// 'high-fidelity' are meaningful — anything else collapses to null so the
|
||||
// caller falls back to the form default ('high-fidelity').
|
||||
function normalizeFidelity(value) {
|
||||
if (value === 'wireframe' || value === 'high-fidelity') return value;
|
||||
if (value === "wireframe" || value === "high-fidelity") return value;
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -104,11 +112,11 @@ function normalizeFidelity(value) {
|
||||
// to a real boolean. Returns null for anything we can't interpret so the
|
||||
// caller knows to fall back to the form default.
|
||||
function normalizeBoolHint(value) {
|
||||
if (typeof value === 'boolean') return value;
|
||||
if (typeof value === 'string') {
|
||||
if (typeof value === "boolean") return value;
|
||||
if (typeof value === "string") {
|
||||
const v = value.trim().toLowerCase();
|
||||
if (v === 'true' || v === 'yes' || v === '1') return true;
|
||||
if (v === 'false' || v === 'no' || v === '0') return false;
|
||||
if (v === "true" || v === "yes" || v === "1") return true;
|
||||
if (v === "false" || v === "no" || v === "0") return false;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
@@ -119,8 +127,8 @@ function normalizeBoolHint(value) {
|
||||
// natural alphabetical order.
|
||||
function normalizeFeatured(value) {
|
||||
if (value === true) return 1;
|
||||
if (typeof value === 'number' && Number.isFinite(value)) return value;
|
||||
if (typeof value === 'string' && value.trim()) {
|
||||
if (typeof value === "number" && Number.isFinite(value)) return value;
|
||||
if (typeof value === "string" && value.trim()) {
|
||||
const n = Number(value);
|
||||
if (Number.isFinite(n)) return n;
|
||||
}
|
||||
@@ -133,66 +141,70 @@ function normalizeFeatured(value) {
|
||||
// serves as a passable starter prompt.
|
||||
function derivePrompt(data) {
|
||||
const explicit = data.od?.example_prompt;
|
||||
if (typeof explicit === 'string' && explicit.trim()) return explicit.trim();
|
||||
const desc = typeof data.description === 'string' ? data.description.trim() : '';
|
||||
if (!desc) return '';
|
||||
const collapsed = desc.replace(/\s+/g, ' ').trim();
|
||||
if (typeof explicit === "string" && explicit.trim()) return explicit.trim();
|
||||
const desc =
|
||||
typeof data.description === "string" ? data.description.trim() : "";
|
||||
if (!desc) return "";
|
||||
const collapsed = desc.replace(/\s+/g, " ").trim();
|
||||
const firstSentence = collapsed.match(/^.+?[.!?。！？](?:\s|$)/)?.[0]?.trim();
|
||||
return (firstSentence || collapsed).slice(0, 320);
|
||||
}
|
||||
|
||||
function inferMode(body, description) {
|
||||
const hay = `${description ?? ''}\n${body ?? ''}`.toLowerCase();
|
||||
if (/\bppt|deck|slide|presentation|幻灯|投影/.test(hay)) return 'deck';
|
||||
if (/\bdesign[- ]system|\bdesign\.md|\bdesign tokens/.test(hay)) return 'design-system';
|
||||
if (/\btemplate\b/.test(hay)) return 'template';
|
||||
return 'prototype';
|
||||
const hay = `${description ?? ""}\n${body ?? ""}`.toLowerCase();
|
||||
if (/\bppt|deck|slide|presentation|幻灯|投影/.test(hay)) return "deck";
|
||||
if (/\bdesign[- ]system|\bdesign\.md|\bdesign tokens/.test(hay))
|
||||
return "design-system";
|
||||
if (/\btemplate\b/.test(hay)) return "template";
|
||||
return "prototype";
|
||||
}
|
||||
|
||||
// Validate platform tag — only desktop / mobile are meaningful for the
|
||||
// Examples gallery. Falls back to autodetecting "mobile" from descriptions
|
||||
// so legacy skills sort under the right pill without authoring changes.
|
||||
function normalizePlatform(value, mode, body, description) {
|
||||
if (value === 'desktop' || value === 'mobile') return value;
|
||||
if (mode !== 'prototype') return null;
|
||||
const hay = `${description ?? ''}\n${body ?? ''}`.toLowerCase();
|
||||
if (/mobile|phone|ios|android|手机|移动端/.test(hay)) return 'mobile';
|
||||
return 'desktop';
|
||||
if (value === "desktop" || value === "mobile") return value;
|
||||
if (mode !== "prototype") return null;
|
||||
const hay = `${description ?? ""}\n${body ?? ""}`.toLowerCase();
|
||||
if (/mobile|phone|ios|android|手机|移动端/.test(hay)) return "mobile";
|
||||
return "desktop";
|
||||
}
|
||||
|
||||
// Normalise a scenario tag to a small fixed vocabulary so the filter pills
|
||||
// stay tidy. Unknown values pass through verbatim so authors can experiment;
|
||||
// missing values default to "general".
|
||||
const KNOWN_SCENARIOS = new Set([
|
||||
'general',
|
||||
'engineering',
|
||||
'product',
|
||||
'design',
|
||||
'marketing',
|
||||
'sales',
|
||||
'finance',
|
||||
'hr',
|
||||
'operations',
|
||||
'support',
|
||||
'legal',
|
||||
'education',
|
||||
'personal',
|
||||
"general",
|
||||
"engineering",
|
||||
"product",
|
||||
"design",
|
||||
"marketing",
|
||||
"sales",
|
||||
"finance",
|
||||
"hr",
|
||||
"operations",
|
||||
"support",
|
||||
"legal",
|
||||
"education",
|
||||
"personal",
|
||||
]);
|
||||
function normalizeScenario(value, body, description) {
|
||||
if (typeof value === 'string') {
|
||||
if (typeof value === "string") {
|
||||
const v = value.trim().toLowerCase();
|
||||
if (v) return v;
|
||||
}
|
||||
const hay = `${description ?? ''}\n${body ?? ''}`.toLowerCase();
|
||||
if (/finance|invoice|expense|budget|p&l|revenue/.test(hay)) return 'finance';
|
||||
if (/\bhr\b|onboarding|payroll|employee|人事/.test(hay)) return 'hr';
|
||||
if (/marketing|campaign|brand|landing/.test(hay)) return 'marketing';
|
||||
if (/runbook|incident|deploy|engineering|sre|api/.test(hay)) return 'engineering';
|
||||
if (/spec|prd|roadmap|product manager|product team/.test(hay)) return 'product';
|
||||
if (/design system|moodboard|mockup|ui kit/.test(hay)) return 'design';
|
||||
if (/sales|quote|proposal|lead/.test(hay)) return 'sales';
|
||||
if (/operations|ops|logistics|inventory/.test(hay)) return 'operations';
|
||||
return 'general';
|
||||
const hay = `${description ?? ""}\n${body ?? ""}`.toLowerCase();
|
||||
if (/finance|invoice|expense|budget|p&l|revenue/.test(hay)) return "finance";
|
||||
if (/\bhr\b|onboarding|payroll|employee|人事/.test(hay)) return "hr";
|
||||
if (/marketing|campaign|brand|landing/.test(hay)) return "marketing";
|
||||
if (/runbook|incident|deploy|engineering|sre|api/.test(hay))
|
||||
return "engineering";
|
||||
if (/spec|prd|roadmap|product manager|product team/.test(hay))
|
||||
return "product";
|
||||
if (/design system|moodboard|mockup|ui kit/.test(hay)) return "design";
|
||||
if (/sales|quote|proposal|lead/.test(hay)) return "sales";
|
||||
if (/operations|ops|logistics|inventory/.test(hay)) return "operations";
|
||||
return "general";
|
||||
}
|
||||
// Surface the vocabulary so callers (frontend filter UI) could mirror it
|
||||
// later if they want to. Not exported today, kept here for documentation.
|
||||
|
||||
@@ -0,0 +1,743 @@
|
||||
<!doctype html>
|
||||
<html lang='en'>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<title>Open Design — Star us on GitHub</title>
|
||||
<link rel='preconnect' href='https://fonts.googleapis.com'>
|
||||
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
|
||||
<link href='https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,700;1,9..144,500;1,9..144,700&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap' rel='stylesheet'>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0d0a06;
|
||||
--bg-2: #14100a;
|
||||
--ink: #f3ead8;
|
||||
--muted: #9b8f78;
|
||||
--rule: #4a3f2c;
|
||||
--accent: #f0833f;
|
||||
--accent-2: #e85a2c;
|
||||
--gold: #ffc83d;
|
||||
--gold-2: #ffb000;
|
||||
--paper: #f6efdd;
|
||||
|
||||
--gh-bg: #0d1117;
|
||||
--gh-fg: #e6edf3;
|
||||
--gh-muted: #8b949e;
|
||||
--gh-border: #30363d;
|
||||
--gh-border-2: #21262d;
|
||||
--gh-btn: #21262d;
|
||||
--gh-btn-hover: #30363d;
|
||||
--gh-pill: #1f2328;
|
||||
--gh-link: #4493f8;
|
||||
--gh-tag-bg: #15295a;
|
||||
--gh-tag-fg: #79c0ff;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font-family: 'Inter', -apple-system, system-ui, sans-serif;
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
body {
|
||||
background:
|
||||
radial-gradient(1200px 760px at 80% 18%, rgba(255,200,61,0.10), transparent 70%),
|
||||
radial-gradient(900px 600px at 12% 80%, rgba(240,131,63,0.06), transparent 70%),
|
||||
linear-gradient(180deg, #0e0b07 0%, #0a0805 100%);
|
||||
padding: 56px 72px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
padding-bottom: 22px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
header .l { text-align: left; }
|
||||
header .r { text-align: right; }
|
||||
header .center {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
color: var(--ink);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
header .center .star {
|
||||
color: var(--gold);
|
||||
margin-right: 6px;
|
||||
font-size: 20px;
|
||||
vertical-align: 1px;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1.05fr 1fr;
|
||||
column-gap: 64px;
|
||||
padding-top: 56px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* --------- LEFT: editorial copy --------- */
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.eyebrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.pill {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.22em;
|
||||
color: #f6e9d4;
|
||||
background: rgba(240,131,63,0.16);
|
||||
border: 1px solid rgba(240,131,63,0.45);
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.pill.alt {
|
||||
color: var(--muted);
|
||||
background: transparent;
|
||||
border-color: var(--rule);
|
||||
}
|
||||
.pill.gold {
|
||||
color: #2a1a05;
|
||||
background: linear-gradient(180deg, var(--gold), var(--gold-2));
|
||||
border: 1px solid rgba(255,200,61,0.85);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-size: 100px;
|
||||
line-height: 0.94;
|
||||
letter-spacing: -0.025em;
|
||||
color: var(--ink);
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
h1 em {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
h1 .star-glyph {
|
||||
color: var(--gold);
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
transform: translateY(8px);
|
||||
text-shadow:
|
||||
0 0 24px rgba(255,200,61,0.55),
|
||||
0 0 60px rgba(255,176,0,0.35);
|
||||
}
|
||||
h1 .underline-accent {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
h1 .underline-accent::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -6px;
|
||||
height: 6px;
|
||||
background: var(--accent);
|
||||
border-radius: 4px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.lede {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 300;
|
||||
font-size: 22px;
|
||||
line-height: 1.5;
|
||||
color: #d8cdb6;
|
||||
max-width: 640px;
|
||||
margin: 0 0 28px 0;
|
||||
}
|
||||
.lede b { font-weight: 500; color: #f3ead8; }
|
||||
|
||||
.url-card {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
padding: 16px 22px;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 14px;
|
||||
background: rgba(255,255,255,0.02);
|
||||
margin-bottom: 36px;
|
||||
box-shadow: 0 14px 30px rgba(0,0,0,0.35);
|
||||
}
|
||||
.url-card .arrow {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.22em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.url-card .url {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 22px;
|
||||
color: var(--ink);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
.url-card .url b {
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
.url-card .copybtn {
|
||||
margin-left: 8px;
|
||||
border: 1px solid var(--rule);
|
||||
color: var(--muted);
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0;
|
||||
border-top: 1px solid var(--rule);
|
||||
padding-top: 22px;
|
||||
}
|
||||
.meta .cell {
|
||||
border-right: 1px solid var(--rule);
|
||||
padding-right: 18px;
|
||||
}
|
||||
.meta .cell:last-child { border-right: none; }
|
||||
.meta .num {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-size: 42px;
|
||||
line-height: 1;
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.meta .num em {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
.meta .num .gold {
|
||||
color: var(--gold);
|
||||
text-shadow: 0 0 18px rgba(255,200,61,0.45);
|
||||
}
|
||||
.meta .lbl {
|
||||
margin-top: 10px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10.5px;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* --------- RIGHT: GitHub mock --------- */
|
||||
.right {
|
||||
position: relative;
|
||||
}
|
||||
.stage {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.window {
|
||||
position: absolute;
|
||||
top: 130px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--gh-bg);
|
||||
color: var(--gh-fg);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--gh-border);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255,255,255,0.04) inset,
|
||||
0 24px 60px rgba(0,0,0,0.55),
|
||||
0 6px 18px rgba(0,0,0,0.45);
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
.winbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--gh-border);
|
||||
background: linear-gradient(180deg, #15191e, #0f1216);
|
||||
}
|
||||
.winbar .dots { display: flex; gap: 6px; margin-right: 8px; }
|
||||
.winbar .dot { width: 12px; height: 12px; border-radius: 50%; background: #3a3a3a; }
|
||||
.winbar .dot.r { background: #ff5f57; }
|
||||
.winbar .dot.y { background: #febc2e; }
|
||||
.winbar .dot.g { background: #28c840; }
|
||||
.winbar .urlbar {
|
||||
flex: 1;
|
||||
background: #161b22;
|
||||
border: 1px solid var(--gh-border);
|
||||
border-radius: 8px;
|
||||
padding: 6px 12px;
|
||||
color: var(--gh-muted);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.winbar .urlbar .lock { color: #6e7681; font-size: 10px; }
|
||||
.winbar .urlbar b { color: var(--gh-fg); font-weight: 500; }
|
||||
|
||||
.ghnav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
padding: 10px 22px;
|
||||
border-bottom: 1px solid var(--gh-border);
|
||||
background: var(--gh-bg);
|
||||
font-size: 13px;
|
||||
color: var(--gh-fg);
|
||||
}
|
||||
.ghnav .logo { width: 22px; height: 22px; }
|
||||
.ghnav .crumbs { color: var(--gh-fg); font-weight: 500; }
|
||||
.ghnav .crumbs .slash { color: var(--gh-muted); margin: 0 6px; font-weight: 300; }
|
||||
.ghnav .crumbs .repo { color: var(--gh-link); }
|
||||
.ghnav .private {
|
||||
margin-left: 8px;
|
||||
font-size: 11px;
|
||||
color: var(--gh-muted);
|
||||
border: 1px solid var(--gh-border);
|
||||
border-radius: 999px;
|
||||
padding: 2px 10px;
|
||||
}
|
||||
|
||||
.ghhead {
|
||||
padding: 22px 26px 6px;
|
||||
}
|
||||
.ghhead .row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.ghhead .row > .repotitle { min-width: 0; flex-shrink: 1; }
|
||||
.repotitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.repotitle .icon { color: var(--gh-muted); }
|
||||
.repotitle .org { color: var(--gh-link); }
|
||||
.repotitle .name { color: var(--gh-link); font-weight: 600; }
|
||||
.repotitle .sep { color: var(--gh-muted); font-weight: 300; }
|
||||
.repotitle .badge {
|
||||
margin-left: 10px;
|
||||
border: 1px solid var(--gh-border);
|
||||
color: var(--gh-muted);
|
||||
border-radius: 999px;
|
||||
padding: 2px 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ghbtn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: var(--gh-btn);
|
||||
border: 1px solid var(--gh-border);
|
||||
color: var(--gh-fg);
|
||||
padding: 5px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.ghbtn .icon { color: var(--gh-muted); width: 14px; height: 14px; }
|
||||
.ghbtn .count {
|
||||
margin-left: 4px;
|
||||
padding: 1px 6px;
|
||||
background: var(--gh-pill);
|
||||
border-radius: 999px;
|
||||
color: var(--gh-fg);
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
}
|
||||
.ghbtn .caret {
|
||||
width: 0; height: 0;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 5px solid var(--gh-muted);
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.star-wrap {
|
||||
position: relative;
|
||||
padding: 6px;
|
||||
margin: -6px;
|
||||
border: 2px dashed var(--accent-2);
|
||||
border-radius: 12px;
|
||||
box-shadow:
|
||||
0 0 0 4px rgba(232,90,44,0.10),
|
||||
0 0 36px rgba(255,200,61,0.18);
|
||||
background: rgba(232,90,44,0.04);
|
||||
}
|
||||
.ghbtn.star {
|
||||
background: linear-gradient(180deg, #1c1f25, #14171c);
|
||||
border-color: var(--gh-border);
|
||||
}
|
||||
.ghbtn.star .icon { color: var(--gold); }
|
||||
.ghbtn.star .label { color: var(--gh-fg); font-weight: 600; }
|
||||
|
||||
/* CTA arrow & note pointing at the star */
|
||||
.point {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
}
|
||||
.point .note {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
color: var(--accent);
|
||||
line-height: 1.15;
|
||||
text-shadow: 0 6px 18px rgba(0,0,0,0.55);
|
||||
}
|
||||
.point .note .gold { color: var(--gold); }
|
||||
.point .sub {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.22em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.point.tap {
|
||||
top: -20px;
|
||||
right: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
.arrow-svg {
|
||||
position: absolute;
|
||||
overflow: visible;
|
||||
z-index: 9;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* floating sparkle */
|
||||
.sparkle {
|
||||
position: absolute;
|
||||
color: var(--gold);
|
||||
text-shadow: 0 0 16px rgba(255,200,61,0.6);
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.stamp {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
right: 0;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 35% 30%, #ffe27a, var(--gold-2) 80%);
|
||||
color: #2a1a05;
|
||||
font-family: 'Fraunces', serif;
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 1.15;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: rotate(8deg);
|
||||
box-shadow: 0 14px 30px rgba(255,176,0,0.45);
|
||||
z-index: 5;
|
||||
}
|
||||
.stamp .big { font-size: 28px; line-height: 1; display: block; margin-bottom: 2px; }
|
||||
|
||||
/* secondary stat strip below window */
|
||||
.ghbody {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 220px;
|
||||
gap: 0;
|
||||
padding: 18px 26px 22px;
|
||||
border-top: 1px solid var(--gh-border);
|
||||
background: var(--gh-bg);
|
||||
}
|
||||
.ghbody .desc {
|
||||
color: var(--gh-fg);
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.ghbody .desc .em { color: var(--gh-link); }
|
||||
.ghbody .topics {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
.topic {
|
||||
font-size: 11px;
|
||||
color: var(--gh-tag-fg);
|
||||
background: var(--gh-tag-bg);
|
||||
padding: 2px 10px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
.ghbody .stats {
|
||||
font-size: 12px;
|
||||
color: var(--gh-muted);
|
||||
text-align: right;
|
||||
}
|
||||
.ghbody .stats .row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.ghbody .stats .row .icon { color: var(--gh-muted); }
|
||||
.ghbody .stats .row b { color: var(--gh-fg); font-weight: 500; }
|
||||
|
||||
footer {
|
||||
margin-top: 48px;
|
||||
padding-top: 22px;
|
||||
border-top: 1px solid var(--rule);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
}
|
||||
footer .l { text-align: left; }
|
||||
footer .r { text-align: right; }
|
||||
footer .c {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.28em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class='mono l'>Open Design · Community · 2026 Edition</div>
|
||||
<div class='center'><span class='star'>★</span>open.design</div>
|
||||
<div class='mono r'>Cover · 03 / 08 · Star Us</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class='left'>
|
||||
<div>
|
||||
<div class='eyebrow'>
|
||||
<span class='pill gold'>★ STAR US</span>
|
||||
<span class='pill alt'>Open Source · Apache 2.0</span>
|
||||
</div>
|
||||
<h1>
|
||||
If this saved<br/>
|
||||
you <em>thirty</em><br/>
|
||||
minutes,<br/>
|
||||
give it a <span class='star-glyph'>★</span>.
|
||||
</h1>
|
||||
<p class='lede'>
|
||||
Open Design is built and maintained in the open. <b>Stars don't pay rent —</b>
|
||||
but they tell the next designer, agent, and contributor that this experiment
|
||||
is worth their attention. One click, three seconds, real signal.
|
||||
</p>
|
||||
|
||||
<div class='url-card'>
|
||||
<span class='arrow'>· DROP BY →</span>
|
||||
<span class='url'>github.com/<b>nexu-io/open-design</b></span>
|
||||
<span class='copybtn'>· COPY</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='meta'>
|
||||
<div class='cell'>
|
||||
<div class='num'>71</div>
|
||||
<div class='lbl'>Design<br/>Systems</div>
|
||||
</div>
|
||||
<div class='cell'>
|
||||
<div class='num'>19</div>
|
||||
<div class='lbl'>Composable<br/>Skills</div>
|
||||
</div>
|
||||
<div class='cell'>
|
||||
<div class='num'>06</div>
|
||||
<div class='lbl'>Coding<br/>Agents</div>
|
||||
</div>
|
||||
<div class='cell'>
|
||||
<div class='num'><span class='gold'>★</span></div>
|
||||
<div class='lbl'>One click =<br/>one signal</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- RIGHT: stylized GitHub repo header -->
|
||||
<section class='right'>
|
||||
<div class='stage'>
|
||||
|
||||
<!-- Pointing note above the star -->
|
||||
<div class='point tap'>
|
||||
<div class='note'>Tap the <span class='gold'>★</span> Star<br/>top-right.</div>
|
||||
<div class='sub'>· three seconds · one click ·</div>
|
||||
</div>
|
||||
|
||||
<!-- arc arrow from the note down to the Star button -->
|
||||
<svg class='arrow-svg' style='top:30px; right:30px; width:200px; height:200px;' viewBox='0 0 200 200' fill='none'>
|
||||
<path d='M 30 60 C 60 90, 120 120, 168 168' stroke='#f0833f' stroke-width='2.5' stroke-linecap='round' fill='none' stroke-dasharray='2 8'/>
|
||||
<path d='M 152 156 L 168 170 L 162 150' stroke='#f0833f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/>
|
||||
</svg>
|
||||
|
||||
<!-- sparkles -->
|
||||
<span class='sparkle' style='top:200px; right:30px; font-size:18px;'>✦</span>
|
||||
<span class='sparkle' style='top:260px; right:120px; font-size:14px; opacity:.7;'>✦</span>
|
||||
<span class='sparkle' style='top:150px; right:240px; font-size:12px; opacity:.55;'>✦</span>
|
||||
|
||||
<div class='window'>
|
||||
<div class='winbar'>
|
||||
<div class='dots'>
|
||||
<span class='dot r'></span><span class='dot y'></span><span class='dot g'></span>
|
||||
</div>
|
||||
<div class='urlbar'>
|
||||
<span class='lock'>🔒</span>
|
||||
<span>github.com/<b>nexu-io/open-design</b></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='ghnav'>
|
||||
<svg class='logo' viewBox='0 0 16 16' fill='currentColor'>
|
||||
<path d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z'/>
|
||||
</svg>
|
||||
<div class='crumbs'>
|
||||
<span class='org'>nexu-io</span>
|
||||
<span class='slash'>/</span>
|
||||
<span class='repo'>open-design</span>
|
||||
</div>
|
||||
<span class='private'>Public</span>
|
||||
</div>
|
||||
|
||||
<div class='ghhead'>
|
||||
<div class='row'>
|
||||
<div class='repotitle'>
|
||||
<svg class='icon' width='18' height='18' viewBox='0 0 16 16' fill='currentColor'>
|
||||
<path fill-rule='evenodd' d='M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.692 1.72.75.75 0 0 1-1.034 1.084A2.5 2.5 0 0 1 2 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 0 1 1-1h8zM5 12.25v3.25a.25.25 0 0 0 .4.2l1.45-1.087a.25.25 0 0 1 .3 0L8.6 15.7a.25.25 0 0 0 .4-.2v-3.25a.25.25 0 0 0-.25-.25h-3.5a.25.25 0 0 0-.25.25z'/>
|
||||
</svg>
|
||||
<span class='org'>nexu-io</span>
|
||||
<span class='sep'>/</span>
|
||||
<span class='name'>open-design</span>
|
||||
<span class='badge'>Public</span>
|
||||
</div>
|
||||
|
||||
<div class='actions'>
|
||||
<span class='ghbtn'>
|
||||
<svg class='icon' viewBox='0 0 16 16' fill='currentColor'><path d='M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.756l8.61-8.61Z'/></svg>
|
||||
<span>Edit Pins</span>
|
||||
<span class='caret'></span>
|
||||
</span>
|
||||
<span class='ghbtn'>
|
||||
<svg class='icon' viewBox='0 0 16 16' fill='currentColor'><path d='M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.678 1.367-1.932 2.637-3.023C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z'/></svg>
|
||||
<span>Watch</span>
|
||||
<span class='count'>0</span>
|
||||
<span class='caret'></span>
|
||||
</span>
|
||||
<span class='ghbtn'>
|
||||
<svg class='icon' viewBox='0 0 16 16' fill='currentColor'><path d='M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z'/></svg>
|
||||
<span>Fork</span>
|
||||
<span class='count'>0</span>
|
||||
<span class='caret'></span>
|
||||
</span>
|
||||
<span class='star-wrap'>
|
||||
<span class='ghbtn star'>
|
||||
<svg class='icon' viewBox='0 0 16 16' fill='currentColor'><path d='M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z'/></svg>
|
||||
<span class='label'>Star</span>
|
||||
<span class='count'>1</span>
|
||||
<span class='caret'></span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='ghbody'>
|
||||
<div>
|
||||
<div class='desc'>
|
||||
<span class='em'>★</span> Local-first open replica of Anthropic's <b>Claude Design</b>.
|
||||
⚡ 19 Skills · ✶ 71 brand-grade Design Systems · ⛁ sandboxed preview ·
|
||||
⇩ HTML / PDF / PPTX export. Runs on Claude Code · Codex · Cursor · Gemini CLI · OpenCode · Qwen.
|
||||
</div>
|
||||
<div class='topics'>
|
||||
<span class='topic'>react</span>
|
||||
<span class='topic'>design</span>
|
||||
<span class='topic'>design-systems</span>
|
||||
<span class='topic'>typescript</span>
|
||||
<span class='topic'>skills</span>
|
||||
<span class='topic'>cursor</span>
|
||||
<span class='topic'>local-first</span>
|
||||
<span class='topic'>byok</span>
|
||||
<span class='topic'>claude</span>
|
||||
<span class='topic'>ai-agents</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='stats'>
|
||||
<div class='row'>
|
||||
<span>Apache 2.0</span>
|
||||
<svg class='icon' width='14' height='14' viewBox='0 0 16 16' fill='currentColor'><path d='M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Z'/></svg>
|
||||
</div>
|
||||
<div class='row'><b>3</b> Commits</div>
|
||||
<div class='row'><b>2</b> Branches</div>
|
||||
<div class='row'><b>0</b> Tags</div>
|
||||
<div class='row'><b>0</b> Issues</div>
|
||||
<div class='row' style='color:var(--gold);'>★ <b style='color:var(--gold);'>1</b> Star · be the next</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='stamp'>
|
||||
<span><span class='big'>★</span>STAR<br/>US!</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class='mono l'>Local-first · BYOK · Apache 2.0</div>
|
||||
<div class='c'>· git clone · pnpm install · pnpm dev ·</div>
|
||||
<div class='mono r'>github.com/nexu-io/open-design</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 787 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
+1
-1
@@ -11,7 +11,7 @@
|
||||
"scripts": {
|
||||
"daemon": "node daemon/cli.js --no-open",
|
||||
"dev": "vite",
|
||||
"dev:all": "concurrently -k -n daemon,web -c cyan,magenta \"npm:daemon\" \"npm:dev\"",
|
||||
"dev:all": "node scripts/dev-all.mjs",
|
||||
"build": "tsc -b && vite build",
|
||||
"preview": "vite preview",
|
||||
"typecheck": "tsc -b --noEmit",
|
||||
|
||||
Executable
+84
@@ -0,0 +1,84 @@
|
||||
#!/usr/bin/env node
|
||||
// Launcher for `npm run dev:all`.
|
||||
//
|
||||
// Probes for free ports for the daemon (OD_PORT, default 7456) and the Vite
|
||||
// dev server (VITE_PORT, default 5173) before spawning `concurrently`, so a
|
||||
// stray process holding either port doesn't kill the whole boot. The
|
||||
// resolved ports are exported into the child env, which means:
|
||||
// * the daemon's cli.js sees the new OD_PORT and binds to it
|
||||
// * vite.config.ts reads the same OD_PORT and points its /api proxy at
|
||||
// the daemon's actual port
|
||||
// * Vite itself binds to VITE_PORT
|
||||
//
|
||||
// If a port is busy we walk forward up to PORT_SEARCH_RANGE steps and log
|
||||
// the switch so the user notices.
|
||||
|
||||
import { spawn } from 'node:child_process';
|
||||
import net from 'node:net';
|
||||
|
||||
const HOST = '127.0.0.1';
|
||||
const PORT_SEARCH_RANGE = 50;
|
||||
|
||||
function isPortFree(port, host = HOST) {
|
||||
return new Promise((resolve) => {
|
||||
const server = net.createServer();
|
||||
server.unref();
|
||||
server.once('error', () => resolve(false));
|
||||
server.listen({ port, host, exclusive: true }, () => {
|
||||
server.close(() => resolve(true));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function findFreePort(start, label) {
|
||||
for (let port = start; port < start + PORT_SEARCH_RANGE; port++) {
|
||||
if (await isPortFree(port)) return port;
|
||||
}
|
||||
throw new Error(
|
||||
`[dev:all] could not find a free ${label} port near ${start} (tried ${PORT_SEARCH_RANGE})`,
|
||||
);
|
||||
}
|
||||
|
||||
const desiredDaemon = Number(process.env.OD_PORT) || 7456;
|
||||
const desiredVite = Number(process.env.VITE_PORT) || 5173;
|
||||
|
||||
const daemonPort = await findFreePort(desiredDaemon, 'daemon');
|
||||
const vitePort = await findFreePort(desiredVite, 'vite');
|
||||
|
||||
if (daemonPort !== desiredDaemon) {
|
||||
console.log(
|
||||
`[dev:all] daemon port ${desiredDaemon} is busy, switching to ${daemonPort}`,
|
||||
);
|
||||
}
|
||||
if (vitePort !== desiredVite) {
|
||||
console.log(
|
||||
`[dev:all] vite port ${desiredVite} is busy, switching to ${vitePort}`,
|
||||
);
|
||||
}
|
||||
|
||||
const env = {
|
||||
...process.env,
|
||||
OD_PORT: String(daemonPort),
|
||||
VITE_PORT: String(vitePort),
|
||||
};
|
||||
|
||||
// We spawn the local `concurrently` bin via shell so Windows .cmd shims
|
||||
// resolve correctly. The `npm:daemon` / `npm:dev` shorthand runs the
|
||||
// matching package.json scripts, so any future tweak to those scripts is
|
||||
// picked up automatically.
|
||||
const child = spawn(
|
||||
'concurrently',
|
||||
['-k', '-n', 'daemon,web', '-c', 'cyan,magenta', 'npm:daemon', 'npm:dev'],
|
||||
{ env, stdio: 'inherit', shell: true },
|
||||
);
|
||||
|
||||
child.on('exit', (code, signal) => {
|
||||
if (signal) process.kill(process.pid, signal);
|
||||
else process.exit(code ?? 0);
|
||||
});
|
||||
|
||||
for (const sig of ['SIGINT', 'SIGTERM']) {
|
||||
process.on(sig, () => {
|
||||
if (!child.killed) child.kill(sig);
|
||||
});
|
||||
}
|
||||
+14
@@ -116,6 +116,7 @@ export function App() {
|
||||
const withOnboarding: AppConfig = { ...next, onboardingCompleted: true };
|
||||
saveConfig(withOnboarding);
|
||||
setConfig(withOnboarding);
|
||||
setSettingsOpen(false);
|
||||
}, []);
|
||||
|
||||
const handleModeChange = useCallback(
|
||||
@@ -136,6 +137,18 @@ export function App() {
|
||||
[config],
|
||||
);
|
||||
|
||||
const handleAgentModelChange = useCallback(
|
||||
(agentId: string, choice: { model?: string; reasoning?: string }) => {
|
||||
const prev = config.agentModels?.[agentId] ?? {};
|
||||
const merged = { ...prev, ...choice };
|
||||
const nextAgentModels = { ...(config.agentModels ?? {}), [agentId]: merged };
|
||||
const next = { ...config, agentModels: nextAgentModels };
|
||||
saveConfig(next);
|
||||
setConfig(next);
|
||||
},
|
||||
[config],
|
||||
);
|
||||
|
||||
const handleChangeDefaultDesignSystem = useCallback(
|
||||
(designSystemId: string) => {
|
||||
const next = { ...config, designSystemId };
|
||||
@@ -271,6 +284,7 @@ export function App() {
|
||||
daemonLive={daemonLive}
|
||||
onModeChange={handleModeChange}
|
||||
onAgentChange={handleAgentChange}
|
||||
onAgentModelChange={handleAgentModelChange}
|
||||
onRefreshAgents={refreshAgents}
|
||||
onOpenSettings={openSettings}
|
||||
onBack={handleBack}
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useT } from '../i18n';
|
||||
import { AgentIcon } from './AgentIcon';
|
||||
import { Icon } from './Icon';
|
||||
import { renderModelOptions } from './modelOptions';
|
||||
import type { AgentInfo, AppConfig, ExecMode } from '../types';
|
||||
|
||||
interface Props {
|
||||
@@ -10,6 +11,10 @@ interface Props {
|
||||
daemonLive: boolean;
|
||||
onModeChange: (mode: ExecMode) => void;
|
||||
onAgentChange: (id: string) => void;
|
||||
onAgentModelChange: (
|
||||
id: string,
|
||||
choice: { model?: string; reasoning?: string },
|
||||
) => void;
|
||||
onOpenSettings: () => void;
|
||||
onRefreshAgents: () => void;
|
||||
onBack?: () => void;
|
||||
@@ -26,6 +31,7 @@ export function AvatarMenu({
|
||||
daemonLive,
|
||||
onModeChange,
|
||||
onAgentChange,
|
||||
onAgentModelChange,
|
||||
onOpenSettings,
|
||||
onRefreshAgents,
|
||||
onBack,
|
||||
@@ -58,6 +64,19 @@ export function AvatarMenu({
|
||||
|
||||
const installedAgents = agents.filter((a) => a.available);
|
||||
|
||||
// Resolve the user's model + reasoning pick for the active agent. Falls
|
||||
// back to the agent's first declared option (`'default'`) when the user
|
||||
// hasn't touched the picker yet so the labels don't read as empty.
|
||||
const currentChoice =
|
||||
(config.agentId && config.agentModels?.[config.agentId]) || {};
|
||||
const currentModelId =
|
||||
currentChoice.model ?? currentAgent?.models?.[0]?.id ?? null;
|
||||
const currentReasoningId =
|
||||
currentChoice.reasoning ?? currentAgent?.reasoningOptions?.[0]?.id ?? null;
|
||||
const currentModelLabel = currentAgent?.models?.find(
|
||||
(m) => m.id === currentModelId,
|
||||
)?.label;
|
||||
|
||||
return (
|
||||
<div className="avatar-menu" ref={wrapRef}>
|
||||
<button
|
||||
@@ -88,7 +107,7 @@ export function AvatarMenu({
|
||||
{config.mode === 'api'
|
||||
? safeHost(config.baseUrl)
|
||||
: currentAgent
|
||||
? `${currentAgent.name}${currentAgent.version ? ` · ${currentAgent.version}` : ''}`
|
||||
? `${currentAgent.name}${currentAgent.version ? ` · ${currentAgent.version}` : ''}${currentModelLabel && currentModelId !== 'default' ? ` · ${currentModelLabel}` : ''}`
|
||||
: t('avatar.noAgentSelected')}
|
||||
</span>
|
||||
</div>
|
||||
@@ -133,18 +152,7 @@ export function AvatarMenu({
|
||||
|
||||
{config.mode === 'daemon' && installedAgents.length > 0 ? (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 10.5,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.06em',
|
||||
color: 'var(--text-faint)',
|
||||
fontWeight: 600,
|
||||
padding: '8px 10px 4px',
|
||||
}}
|
||||
>
|
||||
{t('avatar.codeAgent')}
|
||||
</div>
|
||||
<div className="avatar-section-label">{t('avatar.codeAgent')}</div>
|
||||
{installedAgents.map((a) => (
|
||||
<button
|
||||
type="button"
|
||||
@@ -152,7 +160,8 @@ export function AvatarMenu({
|
||||
className="avatar-item"
|
||||
onClick={() => {
|
||||
onAgentChange(a.id);
|
||||
setOpen(false);
|
||||
// Keep the popover open so the user can immediately
|
||||
// pick a model for the agent they just chose.
|
||||
}}
|
||||
>
|
||||
<AgentIcon id={a.id} size={18} />
|
||||
@@ -166,6 +175,71 @@ export function AvatarMenu({
|
||||
) : null}
|
||||
</button>
|
||||
))}
|
||||
{currentAgent &&
|
||||
currentAgent.available &&
|
||||
((currentAgent.models && currentAgent.models.length > 0) ||
|
||||
(currentAgent.reasoningOptions &&
|
||||
currentAgent.reasoningOptions.length > 0)) ? (
|
||||
<div className="avatar-model-section">
|
||||
<div className="avatar-section-label">
|
||||
{t('avatar.modelSection')}
|
||||
</div>
|
||||
{currentAgent.models && currentAgent.models.length > 0 ? (
|
||||
<label className="avatar-select-row">
|
||||
<span className="avatar-select-label">
|
||||
{t('avatar.modelLabel')}
|
||||
</span>
|
||||
<select
|
||||
className="avatar-select"
|
||||
value={currentModelId ?? ''}
|
||||
onChange={(e) =>
|
||||
onAgentModelChange(currentAgent.id, {
|
||||
model: e.target.value,
|
||||
})
|
||||
}
|
||||
>
|
||||
{renderModelOptions(currentAgent.models)}
|
||||
{/* When the user has typed a custom id in
|
||||
Settings, surface it here too so the dropdown
|
||||
actually shows the active selection rather
|
||||
than collapsing to "Default". */}
|
||||
{currentModelId &&
|
||||
!currentAgent.models.some(
|
||||
(m) => m.id === currentModelId,
|
||||
) ? (
|
||||
<option value={currentModelId}>
|
||||
{currentModelId}{' '}
|
||||
{t('avatar.customSuffix')}
|
||||
</option>
|
||||
) : null}
|
||||
</select>
|
||||
</label>
|
||||
) : null}
|
||||
{currentAgent.reasoningOptions &&
|
||||
currentAgent.reasoningOptions.length > 0 ? (
|
||||
<label className="avatar-select-row">
|
||||
<span className="avatar-select-label">
|
||||
{t('avatar.reasoningLabel')}
|
||||
</span>
|
||||
<select
|
||||
className="avatar-select"
|
||||
value={currentReasoningId ?? ''}
|
||||
onChange={(e) =>
|
||||
onAgentModelChange(currentAgent.id, {
|
||||
reasoning: e.target.value,
|
||||
})
|
||||
}
|
||||
>
|
||||
{currentAgent.reasoningOptions.map((r) => (
|
||||
<option key={r.id} value={r.id}>
|
||||
{r.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
<button
|
||||
type="button"
|
||||
className="avatar-item"
|
||||
|
||||
@@ -53,6 +53,10 @@ interface Props {
|
||||
daemonLive: boolean;
|
||||
onModeChange: (mode: AppConfig['mode']) => void;
|
||||
onAgentChange: (id: string) => void;
|
||||
onAgentModelChange: (
|
||||
id: string,
|
||||
choice: { model?: string; reasoning?: string },
|
||||
) => void;
|
||||
onRefreshAgents: () => void;
|
||||
onOpenSettings: () => void;
|
||||
onBack: () => void;
|
||||
@@ -72,6 +76,7 @@ export function ProjectView({
|
||||
daemonLive,
|
||||
onModeChange,
|
||||
onAgentChange,
|
||||
onAgentModelChange,
|
||||
onRefreshAgents,
|
||||
onOpenSettings,
|
||||
onBack,
|
||||
@@ -490,6 +495,7 @@ export function ProjectView({
|
||||
handlers.onError(new Error('Pick a local agent first (top bar).'));
|
||||
return;
|
||||
}
|
||||
const choice = config.agentModels?.[config.agentId];
|
||||
void streamViaDaemon({
|
||||
agentId: config.agentId,
|
||||
history: nextHistory,
|
||||
@@ -498,6 +504,8 @@ export function ProjectView({
|
||||
handlers,
|
||||
projectId: project.id,
|
||||
attachments: attachments.map((a) => a.path),
|
||||
model: choice?.model ?? null,
|
||||
reasoning: choice?.reasoning ?? null,
|
||||
});
|
||||
} else {
|
||||
pushEvent({ kind: 'status', label: 'requesting', detail: config.model });
|
||||
@@ -728,6 +736,7 @@ export function ProjectView({
|
||||
daemonLive={daemonLive}
|
||||
onModeChange={onModeChange}
|
||||
onAgentChange={onAgentChange}
|
||||
onAgentModelChange={onAgentModelChange}
|
||||
onOpenSettings={onOpenSettings}
|
||||
onRefreshAgents={onRefreshAgents}
|
||||
onBack={onBack}
|
||||
|
||||
@@ -2,6 +2,11 @@ import { useEffect, useMemo, useState } from 'react';
|
||||
import { LOCALE_LABEL, LOCALES, useI18n } from '../i18n';
|
||||
import type { Locale } from '../i18n';
|
||||
import { AgentIcon } from './AgentIcon';
|
||||
import {
|
||||
CUSTOM_MODEL_SENTINEL,
|
||||
isCustomModel,
|
||||
renderModelOptions,
|
||||
} from './modelOptions';
|
||||
import type { AgentInfo, AppConfig, ExecMode } from '../types';
|
||||
|
||||
interface Props {
|
||||
@@ -183,6 +188,108 @@ export function SettingsDialog({
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{(() => {
|
||||
const selected = agents.find(
|
||||
(a) => a.id === cfg.agentId && a.available,
|
||||
);
|
||||
if (!selected) return null;
|
||||
const hasModels =
|
||||
Array.isArray(selected.models) && selected.models.length > 0;
|
||||
const hasReasoning =
|
||||
Array.isArray(selected.reasoningOptions) &&
|
||||
selected.reasoningOptions.length > 0;
|
||||
if (!hasModels && !hasReasoning) return null;
|
||||
const choice = cfg.agentModels?.[selected.id] ?? {};
|
||||
const setChoice = (
|
||||
next: { model?: string; reasoning?: string },
|
||||
) => {
|
||||
setCfg((c) => {
|
||||
const prev = c.agentModels?.[selected.id] ?? {};
|
||||
return {
|
||||
...c,
|
||||
agentModels: {
|
||||
...(c.agentModels ?? {}),
|
||||
[selected.id]: { ...prev, ...next },
|
||||
},
|
||||
};
|
||||
});
|
||||
};
|
||||
const modelValue =
|
||||
choice.model ?? selected.models?.[0]?.id ?? '';
|
||||
const reasoningValue =
|
||||
choice.reasoning ??
|
||||
selected.reasoningOptions?.[0]?.id ?? '';
|
||||
const customActive =
|
||||
hasModels && isCustomModel(modelValue, selected.models!);
|
||||
const selectValue = customActive
|
||||
? CUSTOM_MODEL_SENTINEL
|
||||
: modelValue;
|
||||
return (
|
||||
<div className="agent-model-row">
|
||||
{hasModels ? (
|
||||
<label className="field">
|
||||
<span className="field-label">
|
||||
{t('settings.modelPicker')}
|
||||
</span>
|
||||
<select
|
||||
value={selectValue}
|
||||
onChange={(e) => {
|
||||
if (e.target.value === CUSTOM_MODEL_SENTINEL) {
|
||||
// Switching to "Custom…" should clear the
|
||||
// value so the input below opens empty for
|
||||
// typing — keeping the previous live id
|
||||
// would defeat the point.
|
||||
setChoice({ model: '' });
|
||||
} else {
|
||||
setChoice({ model: e.target.value });
|
||||
}
|
||||
}}
|
||||
>
|
||||
{renderModelOptions(selected.models!)}
|
||||
<option value={CUSTOM_MODEL_SENTINEL}>
|
||||
{t('settings.modelCustom')}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
) : null}
|
||||
{customActive ? (
|
||||
<label className="field">
|
||||
<span className="field-label">
|
||||
{t('settings.modelCustomLabel')}
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
value={modelValue}
|
||||
placeholder={t('settings.modelCustomPlaceholder')}
|
||||
onChange={(e) =>
|
||||
setChoice({ model: e.target.value.trim() })
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
) : null}
|
||||
{hasReasoning ? (
|
||||
<label className="field">
|
||||
<span className="field-label">
|
||||
{t('settings.reasoningPicker')}
|
||||
</span>
|
||||
<select
|
||||
value={reasoningValue}
|
||||
onChange={(e) =>
|
||||
setChoice({ reasoning: e.target.value })
|
||||
}
|
||||
>
|
||||
{selected.reasoningOptions!.map((r) => (
|
||||
<option key={r.id} value={r.id}>
|
||||
{r.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
) : null}
|
||||
<p className="hint">{t('settings.modelPickerHint')}</p>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</section>
|
||||
) : (
|
||||
<section className="settings-section">
|
||||
@@ -276,10 +383,7 @@ export function SettingsDialog({
|
||||
type="button"
|
||||
className="primary"
|
||||
disabled={!canSave}
|
||||
onClick={() => {
|
||||
onSave(cfg);
|
||||
onClose();
|
||||
}}
|
||||
onClick={() => onSave(cfg)}
|
||||
>
|
||||
{welcome ? t('settings.getStarted') : t('common.save')}
|
||||
</button>
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
import type { AgentModelOption } from '../types';
|
||||
|
||||
// Render the `<option>` children for a model `<select>`. When the list
|
||||
// contains `provider/model` ids (opencode's listing has hundreds), we
|
||||
// group them under `<optgroup>` so the dropdown is navigable. Flat lists
|
||||
// (Claude, Codex, Gemini, Qwen) are emitted as plain options.
|
||||
//
|
||||
// `'default'` is always pinned first (no group), so the user can return
|
||||
// to "let the CLI decide" with one click.
|
||||
export function renderModelOptions(models: AgentModelOption[]) {
|
||||
const groups = new Map<string, AgentModelOption[]>();
|
||||
const flat: AgentModelOption[] = [];
|
||||
for (const m of models) {
|
||||
const slash = m.id.indexOf('/');
|
||||
if (m.id === 'default' || slash <= 0) {
|
||||
flat.push(m);
|
||||
continue;
|
||||
}
|
||||
const provider = m.id.slice(0, slash);
|
||||
const arr = groups.get(provider) ?? [];
|
||||
arr.push(m);
|
||||
groups.set(provider, arr);
|
||||
}
|
||||
if (groups.size === 0) {
|
||||
return (
|
||||
<>
|
||||
{flat.map((m) => (
|
||||
<option key={m.id} value={m.id}>
|
||||
{m.label}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{flat.map((m) => (
|
||||
<option key={m.id} value={m.id}>
|
||||
{m.label}
|
||||
</option>
|
||||
))}
|
||||
{Array.from(groups.entries()).map(([provider, items]) => (
|
||||
<optgroup key={provider} label={provider}>
|
||||
{items.map((m) => (
|
||||
<option key={m.id} value={m.id}>
|
||||
{/* Strip the redundant `provider/` prefix from the label
|
||||
inside its own optgroup; keep it in the value so the
|
||||
CLI sees the fully-qualified id. */}
|
||||
{m.label.startsWith(`${provider}/`)
|
||||
? m.label.slice(provider.length + 1)
|
||||
: m.label}
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// True when the picked model id isn't one of the listed options — i.e.
|
||||
// the user has typed a custom id and we should keep the custom input
|
||||
// visible / the dropdown showing "Custom…".
|
||||
export function isCustomModel(
|
||||
modelId: string | null | undefined,
|
||||
models: AgentModelOption[],
|
||||
): boolean {
|
||||
if (!modelId) return false;
|
||||
return !models.some((m) => m.id === modelId);
|
||||
}
|
||||
|
||||
export const CUSTOM_MODEL_SENTINEL = '__custom__';
|
||||
@@ -83,6 +83,13 @@ export const en: Dict = {
|
||||
'settings.noAgentSelected': 'no agent selected',
|
||||
'settings.language': 'Language',
|
||||
'settings.languageHint': 'Switch the interface language. Saved to this browser.',
|
||||
'settings.modelPicker': 'Model',
|
||||
'settings.reasoningPicker': 'Reasoning effort',
|
||||
'settings.modelPickerHint':
|
||||
'Fetched from the CLI when it exposes a `models` command. "Default" leaves the choice to the CLI’s own config; "Custom…" lets you type any model id the CLI accepts.',
|
||||
'settings.modelCustom': 'Custom (type below)…',
|
||||
'settings.modelCustomLabel': 'Custom model id',
|
||||
'settings.modelCustomPlaceholder': 'e.g. anthropic/claude-sonnet-4-6',
|
||||
|
||||
'entry.tabDesigns': 'Designs',
|
||||
'entry.tabExamples': 'Examples',
|
||||
@@ -211,6 +218,10 @@ export const en: Dict = {
|
||||
'avatar.metaOffline': 'offline',
|
||||
'avatar.metaSelected': 'selected',
|
||||
'avatar.noAgentSelected': 'no agent selected',
|
||||
'avatar.modelSection': 'Model',
|
||||
'avatar.modelLabel': 'Model',
|
||||
'avatar.reasoningLabel': 'Reasoning',
|
||||
'avatar.customSuffix': '(custom)',
|
||||
|
||||
'project.backToProjects': 'Back to projects',
|
||||
'project.metaFreeform': 'freeform',
|
||||
|
||||
@@ -82,6 +82,13 @@ export const zhCN: Dict = {
|
||||
'settings.noAgentSelected': '尚未选择代理',
|
||||
'settings.language': '界面语言',
|
||||
'settings.languageHint': '切换界面语言，设置仅保存在当前浏览器。',
|
||||
'settings.modelPicker': '模型',
|
||||
'settings.reasoningPicker': '推理强度',
|
||||
'settings.modelPickerHint':
|
||||
'当 CLI 提供 `models` 命令时会自动拉取。选择「默认」则沿用 CLI 自身的配置；选择「自定义」可手动输入任何 CLI 支持的模型 id。',
|
||||
'settings.modelCustom': '自定义（在下方填写）…',
|
||||
'settings.modelCustomLabel': '自定义模型 id',
|
||||
'settings.modelCustomPlaceholder': '例如 anthropic/claude-sonnet-4-6',
|
||||
|
||||
'entry.tabDesigns': '我的设计',
|
||||
'entry.tabExamples': '示例',
|
||||
@@ -208,6 +215,10 @@ export const zhCN: Dict = {
|
||||
'avatar.metaOffline': '未运行',
|
||||
'avatar.metaSelected': '已选',
|
||||
'avatar.noAgentSelected': '尚未选择代理',
|
||||
'avatar.modelSection': '模型',
|
||||
'avatar.modelLabel': '模型',
|
||||
'avatar.reasoningLabel': '推理',
|
||||
'avatar.customSuffix': '（自定义）',
|
||||
|
||||
'project.backToProjects': '返回项目列表',
|
||||
'project.metaFreeform': '自由设计',
|
||||
|
||||
@@ -93,6 +93,12 @@ export interface Dict {
|
||||
'settings.noAgentSelected': string;
|
||||
'settings.language': string;
|
||||
'settings.languageHint': string;
|
||||
'settings.modelPicker': string;
|
||||
'settings.reasoningPicker': string;
|
||||
'settings.modelPickerHint': string;
|
||||
'settings.modelCustom': string;
|
||||
'settings.modelCustomLabel': string;
|
||||
'settings.modelCustomPlaceholder': string;
|
||||
|
||||
// Entry view / tabs
|
||||
'entry.tabDesigns': string;
|
||||
@@ -224,6 +230,10 @@ export interface Dict {
|
||||
'avatar.metaOffline': string;
|
||||
'avatar.metaSelected': string;
|
||||
'avatar.noAgentSelected': string;
|
||||
'avatar.modelSection': string;
|
||||
'avatar.modelLabel': string;
|
||||
'avatar.reasoningLabel': string;
|
||||
'avatar.customSuffix': string;
|
||||
|
||||
// Project view / chat pane / composer
|
||||
'project.backToProjects': string;
|
||||
|
||||
@@ -293,6 +293,45 @@ code {
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.avatar-section-label {
|
||||
font-size: 10.5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-faint);
|
||||
font-weight: 600;
|
||||
padding: 8px 10px 4px;
|
||||
}
|
||||
.avatar-model-section {
|
||||
padding: 2px 10px 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
border-top: 1px dashed var(--border-soft);
|
||||
margin-top: 4px;
|
||||
}
|
||||
.avatar-select-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.avatar-select-label {
|
||||
flex-shrink: 0;
|
||||
min-width: 64px;
|
||||
}
|
||||
.avatar-select {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 12px;
|
||||
padding: 4px 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-panel);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
}
|
||||
.avatar-select:focus { outline: 2px solid var(--accent-soft, var(--border-strong)); }
|
||||
|
||||
/* Environment pill — only used in entry view header now */
|
||||
.env-pill {
|
||||
@@ -827,6 +866,23 @@ code {
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.agent-card-meta .muted { color: var(--text-soft); font-style: italic; }
|
||||
.agent-model-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-subtle);
|
||||
}
|
||||
.agent-model-row .field { gap: 4px; }
|
||||
.agent-model-row .field-label {
|
||||
font-size: 11.5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.agent-model-row .hint { margin: 0; font-size: 11.5px; }
|
||||
.status-dot {
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
|
||||
@@ -313,6 +313,22 @@ Decks regress when each turn re-authors the scale-to-fit logic, the keyboard han
|
||||
|
||||
**You do not write any of that. You do not modify any of that.** Your job is to fill content slots only.
|
||||
|
||||
## Workflow — copy framework first, then fill content
|
||||
|
||||
When the user asks for slides, your TodoWrite plan **must** start with "copy the deck framework verbatim" before any content step. The intended order is:
|
||||
|
||||
\`\`\`
|
||||
1. Bind the active direction's palette + fonts to :root in the framework
|
||||
2. Copy the canonical skeleton below as index.html (nothing else first)
|
||||
3. Plan the slide arc and theme rhythm (state aloud before writing)
|
||||
4. Add per-deck classes inside the second <style> block
|
||||
5. Replace each <section class="slide"> SLOT with real content
|
||||
6. Self-check (no rewriting framework chrome / @media print / nav script)
|
||||
7. Emit single <artifact>
|
||||
\`\`\`
|
||||
|
||||
If you find yourself writing \`<style>\` rules for \`.deck-shell\`, \`.deck-stage\`, \`.slide\`, \`.canvas\`, \`fit()\`, \`@media print\`, or a keyboard handler — STOP. The framework already has them. Re-read this directive, then keep going from "fill SLOT content".
|
||||
|
||||
## The contract
|
||||
|
||||
When you start a new deck, your output is a single HTML file built from the canonical skeleton below. **Copy the skeleton verbatim**, including its first \`<style>\` block, the \`.deck-shell\` / \`.deck-stage\` / \`.deck-counter\` / \`.deck-hint\` chrome, and the entire trailing \`<script>\`.
|
||||
|
||||
@@ -142,6 +142,8 @@ The standard plan template (adapt the middle steps to the brief):
|
||||
- 9. Emit single <artifact>
|
||||
\`\`\`
|
||||
|
||||
**Decks especially — framework first, content second.** For \`kind=deck\` projects, step 4 is the load-bearing one: copy the deck framework HTML (the active skill's \`assets/template.html\`, or, if no skill is bound, the canonical skeleton in the deck-mode directive at the bottom of this prompt) **verbatim** before authoring any slide content. Do NOT write your own scale-to-fit logic, keyboard handler, slide visibility toggle, counter, or print stylesheet — every freeform attempt at this re-introduces the same iframe positioning / scaling bugs we have already fixed in the framework. Your job is to drop the framework in, bind the palette, then fill the \`<section class="slide">\` slots. That's it.
|
||||
|
||||
After TodoWrite, immediately update — **mark step 1 \`in_progress\` before starting it, \`completed\` the moment it's done, mark step 2 \`in_progress\`**, etc. Do not batch updates at the end of the turn; the live progress is the point. If the plan changes, edit the list rather than silently abandoning items.
|
||||
|
||||
Step 7 (checklist) and step 8 (critique) are non-negotiable.
|
||||
|
||||
+28
-6
@@ -14,11 +14,17 @@
|
||||
* (`assets/template.html`) and references (`references/layouts.md`,
|
||||
* `references/checklist.md`), we inject a hard pre-flight rule above
|
||||
* the skill body so the agent reads them BEFORE writing any code.
|
||||
* 4. For decks (skillMode === 'deck'), the deck framework directive
|
||||
* (./deck-framework.ts) is pinned LAST so it overrides any softer
|
||||
* slide-handling wording earlier in the stack — this is the
|
||||
* load-bearing nav / counter / scroll JS / print stylesheet contract
|
||||
* that PDF stitching depends on.
|
||||
* 4. For decks (skillMode === 'deck' OR metadata.kind === 'deck'), the
|
||||
* deck framework directive (./deck-framework.ts) is pinned LAST so it
|
||||
* overrides any softer slide-handling wording earlier in the stack —
|
||||
* this is the load-bearing nav / counter / scroll JS / print
|
||||
* stylesheet contract that PDF stitching depends on. We also fire on
|
||||
* the metadata path so deck-kind projects without a bound skill
|
||||
* (skill_id null) still get a framework, instead of having the agent
|
||||
* re-author scaling / nav / print logic from scratch each turn. When
|
||||
* the active skill ships its own seed (skill body references
|
||||
* `assets/template.html`), we defer to that seed and skip the generic
|
||||
* skeleton — the skill's framework wins to avoid double-injection.
|
||||
*
|
||||
* The composed string is what the daemon sees as `systemPrompt` and what
|
||||
* the Anthropic path sends as `system`.
|
||||
@@ -85,7 +91,23 @@ export function composeSystemPrompt({
|
||||
// Decks have a load-bearing framework (nav, counter, scroll JS, print
|
||||
// stylesheet for PDF stitching). Pin it last so it overrides any softer
|
||||
// wording earlier in the stack ("write a script that handles arrows…").
|
||||
if (skillMode === 'deck') {
|
||||
//
|
||||
// We fire on either (a) the active skill is a deck skill OR (b) the
|
||||
// project metadata declares kind=deck. Case (b) catches projects created
|
||||
// without a skill (skill_id null) — without this, a deck-kind project
|
||||
// with no bound skill gets neither a skill seed nor the framework
|
||||
// skeleton, and the agent writes scaling / nav / print logic from scratch
|
||||
// with the same buggy `place-items: center` + transform pattern we keep
|
||||
// having to fix at runtime. Skill seeds (when present) win — they
|
||||
// already define their own opinionated framework (simple-deck's
|
||||
// scroll-snap, guizang-ppt's magazine layout) and re-pinning the generic
|
||||
// skeleton would conflict. The skill-seed path takes over via
|
||||
// `derivePreflight` above, so we only fire the generic skeleton when no
|
||||
// skill seed is on offer.
|
||||
const isDeckProject = skillMode === 'deck' || metadata?.kind === 'deck';
|
||||
const hasSkillSeed =
|
||||
!!skillBody && /assets\/template\.html/.test(skillBody);
|
||||
if (isDeckProject && !hasSkillSeed) {
|
||||
parts.push(`\n\n---\n\n${DECK_FRAMEWORK_DIRECTIVE}`);
|
||||
}
|
||||
|
||||
|
||||
@@ -30,6 +30,11 @@ export interface DaemonStreamOptions {
|
||||
// daemon resolves them inside the project folder, validates they
|
||||
// exist, and stitches them into the user message as `@<path>` hints.
|
||||
attachments?: string[];
|
||||
// Per-CLI model + reasoning the user picked in the model menu. Both are
|
||||
// optional; the daemon validates them against the agent's declared
|
||||
// options and falls back to the CLI default when missing.
|
||||
model?: string | null;
|
||||
reasoning?: string | null;
|
||||
}
|
||||
|
||||
export async function streamViaDaemon({
|
||||
@@ -40,6 +45,8 @@ export async function streamViaDaemon({
|
||||
handlers,
|
||||
projectId,
|
||||
attachments,
|
||||
model,
|
||||
reasoning,
|
||||
}: DaemonStreamOptions): Promise<void> {
|
||||
// Local CLIs are single-turn print-mode programs, so we collapse the whole
|
||||
// chat into one string. If this becomes too noisy for long histories, the
|
||||
@@ -53,6 +60,8 @@ export async function streamViaDaemon({
|
||||
message: transcript,
|
||||
projectId: projectId ?? null,
|
||||
attachments: attachments ?? [],
|
||||
model: model ?? null,
|
||||
reasoning: reasoning ?? null,
|
||||
});
|
||||
|
||||
let acc = '';
|
||||
|
||||
+11
-8
@@ -16,10 +16,10 @@
|
||||
*/
|
||||
export function buildSrcdoc(
|
||||
html: string,
|
||||
options: { deck?: boolean } = {},
|
||||
options: { deck?: boolean } = {}
|
||||
): string {
|
||||
const head = html.trimStart().slice(0, 64).toLowerCase();
|
||||
const isFullDoc = head.startsWith('<!doctype') || head.startsWith('<html');
|
||||
const isFullDoc = head.startsWith("<!doctype") || head.startsWith("<html");
|
||||
const wrapped = isFullDoc
|
||||
? html
|
||||
: `<!doctype html>
|
||||
@@ -68,8 +68,10 @@ function injectSandboxShim(doc: string): string {
|
||||
tryShim('localStorage');
|
||||
tryShim('sessionStorage');
|
||||
})();</script>`;
|
||||
if (/<head[^>]*>/i.test(doc)) return doc.replace(/<head[^>]*>/i, (m) => `${m}${shim}`);
|
||||
if (/<body[^>]*>/i.test(doc)) return doc.replace(/<body[^>]*>/i, (m) => `${m}${shim}`);
|
||||
if (/<head[^>]*>/i.test(doc))
|
||||
return doc.replace(/<head[^>]*>/i, (m) => `${m}${shim}`);
|
||||
if (/<body[^>]*>/i.test(doc))
|
||||
return doc.replace(/<body[^>]*>/i, (m) => `${m}${shim}`);
|
||||
return shim + doc;
|
||||
}
|
||||
|
||||
@@ -101,10 +103,10 @@ function injectDeckBridge(doc: string): string {
|
||||
.stage, .deck-stage, .deck-shell { place-content: center !important; }
|
||||
</style>`;
|
||||
const docWithStyle = /<\/head>/i.test(doc)
|
||||
? doc.replace(/<\/head>/i, styleFix + '</head>')
|
||||
? doc.replace(/<\/head>/i, styleFix + "</head>")
|
||||
: /<head[^>]*>/i.test(doc)
|
||||
? doc.replace(/<head[^>]*>/i, (m) => m + styleFix)
|
||||
: styleFix + doc;
|
||||
? doc.replace(/<head[^>]*>/i, (m) => m + styleFix)
|
||||
: styleFix + doc;
|
||||
doc = docWithStyle;
|
||||
const script = `<script>(function(){
|
||||
function slides(){ return document.querySelectorAll('.slide'); }
|
||||
@@ -265,6 +267,7 @@ function injectDeckBridge(doc: string): string {
|
||||
}
|
||||
observeSlides();
|
||||
})();</script>`;
|
||||
if (/<\/body>/i.test(doc)) return doc.replace(/<\/body>/i, `${script}</body>`);
|
||||
if (/<\/body>/i.test(doc))
|
||||
return doc.replace(/<\/body>/i, `${script}</body>`);
|
||||
return doc + script;
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@ export const DEFAULT_CONFIG: AppConfig = {
|
||||
skillId: null,
|
||||
designSystemId: null,
|
||||
onboardingCompleted: false,
|
||||
agentModels: {},
|
||||
};
|
||||
|
||||
export function loadConfig(): AppConfig {
|
||||
|
||||
@@ -1,5 +1,14 @@
|
||||
export type ExecMode = 'daemon' | 'api';
|
||||
|
||||
// Per-CLI model + reasoning the user picked in the model menu. Each agent
|
||||
// keeps its own slot so flipping between Codex and Gemini doesn't reset the
|
||||
// other one's choice. Missing entries fall back to the agent's first
|
||||
// declared model (`'default'` — let the CLI pick).
|
||||
export interface AgentModelChoice {
|
||||
model?: string;
|
||||
reasoning?: string;
|
||||
}
|
||||
|
||||
export interface AppConfig {
|
||||
mode: ExecMode;
|
||||
apiKey: string;
|
||||
@@ -12,6 +21,10 @@ export interface AppConfig {
|
||||
// least once (saved or skipped). Bootstrap skips the auto-popup when
|
||||
// this is set so refreshing the page doesn't re-prompt.
|
||||
onboardingCompleted?: boolean;
|
||||
// Per-CLI model picker state, keyed by agent id (e.g. `gemini`, `codex`).
|
||||
// Pre-existing configs without this field fall through to the agent's
|
||||
// declared default.
|
||||
agentModels?: Record<string, AgentModelChoice>;
|
||||
}
|
||||
|
||||
export type AgentEvent =
|
||||
@@ -63,6 +76,11 @@ export interface ExamplePreview {
|
||||
html: string;
|
||||
}
|
||||
|
||||
export interface AgentModelOption {
|
||||
id: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export interface AgentInfo {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -70,6 +88,12 @@ export interface AgentInfo {
|
||||
available: boolean;
|
||||
path?: string;
|
||||
version?: string | null;
|
||||
// Models surfaced in the model picker for this CLI. The first entry is
|
||||
// treated as the default (typically the synthetic `'default'` option,
|
||||
// meaning "let the CLI use whatever's in its own config").
|
||||
models?: AgentModelOption[];
|
||||
// Reasoning-effort presets — currently only Codex exposes this.
|
||||
reasoningOptions?: AgentModelOption[];
|
||||
}
|
||||
|
||||
export interface SkillSummary {
|
||||
|
||||
+2
-1
@@ -2,11 +2,12 @@ import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
const DAEMON_PORT = Number(process.env.OD_PORT) || 7456;
|
||||
const VITE_PORT = Number(process.env.VITE_PORT) || 5173;
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 5173,
|
||||
port: VITE_PORT,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: `http://127.0.0.1:${DAEMON_PORT}`,
|
||||
|
||||
Reference in New Issue
Block a user