mirror of
https://github.com/nexu-io/open-design.git
synced 2026-10-27 09:51:12 +01:00
340cbb9b94
* feat(cli): add project rename command to CLI Introduced a new command `od project rename <id> --name "<title>"` to allow users to rename existing projects. The command validates input and sends a PATCH request to update the project name in the backend. Updated CLI help documentation to include this new command. * feat(web): enhance InspirationPicker with reference-site shortcuts and selection chips Added functionality to the InspirationPicker component, allowing users to browse reference sites (e.g., Dribbble, Behance) directly from the picker. Implemented a selection chips feature that lists all current picks, enabling easy removal across different families. Updated styles for better visual representation of selected items. Enhanced internationalization support with new translations for the added features. * feat(web): enhance InspirationPicker with detailed previews and selection management Updated the InspirationPicker component to include a detailed preview feature for selected items, allowing users to view full documents directly from the picker. Implemented a "Selected" section that displays current picks with a remove option, improving user interaction. Adjusted styles for better visual consistency and added new translations for enhanced internationalization support. * fix(web): restore uploaded inspiration thumbs and drop preview elapsed Resolve locked inspiration-upload previews via the submitted path map so answered forms still show real images, and keep the floating preview status pill as a stage label only. * feat(web): implement TaskDeliverableCard for displaying task outputs Added a new TaskDeliverableCard component to showcase the primary deliverable and its associated outputs. This includes a preview feature for various file types, an actions menu for sharing and downloading, and improved styling for better user experience. Enhanced internationalization support with new translations for deliverable-related terms. Updated InspirationPicker to utilize the new deliverable ranking and searching functionalities. * fix(inspiration): unify design system previews and source priority * fix(web): align deliverable card regression coverage * test(web): scope question form assertions * fix(web): keep the deliverable card off failed and canceled runs The card's status label is an unconditional Done, so gating it on the shared terminal predicate let a failed or canceled run that wrote files present a partial artifact as delivered while the same message reported the error. Gate on the existing runSucceeded predicate instead; those turns fall back to the plain file ledger, so the files stay reachable without the false completion signal. * fix(daemon): serialize DESIGN.md font stacks through a strict font-family grammar extractFonts is deliberately permissive and its output was interpolated verbatim into the generated <style> raw text, so a Body font value like "Karla</style><img src=…>" could close the style element and inject active markup into every auto-loaded card iframe. sanitizeFontStack now rebuilds each stack from validated family names only (quoted names, unquoted generic/system keywords), dropping anything else and falling back to the trusted default stack; both the full preview and the compact card renderer route every font interpolation through it. Card and preview fixtures with a </style> payload pin the boundary. * fix(daemon): ground additional inspiration systems in the run prompt The picker's extra design-system picks reached the agent as ids on a metadata line only, so a user-authored system contributed none of its colors, fonts, or rules. The daemon now resolves each additional id through the same DESIGN.md reader chain as the primary (workspace file first, then registry), bounds the result (3 systems, 6000 chars each), and composes an 'Additional inspiration systems' section with explicit primary-wins precedence. Prompt tests pin a unique secondary token reaching the composed prompt, both at the composer seam and end-to-end through the chat route with bento's #FAD4C0. * test(e2e): stabilize preview comment click * test(web): update runtime override history expectation --------- Co-authored-by: Amy <1184569493@qq.com>
155 lines
10 KiB
HTML
155 lines
10 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Agentic - reference components</title>
|
|
<meta name="description" content="Reference fixture for design-systems/agentic: agent workflow interface with bright neutral surfaces, orange automation signals, and editorial typography." />
|
|
<style>
|
|
:root {
|
|
--bg: #ffffff;
|
|
--surface: #f6f6f1;
|
|
--surface-warm: #fff4ec;
|
|
--fg: #111827;
|
|
--fg-2: #374151;
|
|
--muted: #6b7280;
|
|
--meta: #ff5701;
|
|
--border: #d1d5db;
|
|
--border-soft: #e5e7eb;
|
|
--accent: #ff5701;
|
|
--accent-on: #ffffff;
|
|
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
|
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
|
--success: #16a34a;
|
|
--warn: #d97706;
|
|
--danger: #dc2626;
|
|
--font-display: Playfair Display, Georgia, serif;
|
|
--font-body: Playfair Display, Georgia, serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
|
|
--text-xs: 12px;
|
|
--text-sm: 13px;
|
|
--text-base: 15px;
|
|
--text-lg: 17px;
|
|
--text-xl: 22px;
|
|
--text-2xl: 32px;
|
|
--text-3xl: 48px;
|
|
--text-4xl: 66px;
|
|
--leading-body: 1.55;
|
|
--leading-tight: 1.06;
|
|
--tracking-display: -0.02em;
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--space-12: 48px;
|
|
--section-y-desktop: 96px;
|
|
--section-y-tablet: 68px;
|
|
--section-y-phone: 48px;
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 20px;
|
|
--radius-pill: 9999px;
|
|
--elev-flat: none;
|
|
--elev-ring: 0 0 0 1px var(--border);
|
|
--elev-raised: 0 24px 72px rgba(0, 0, 0, 0.36);
|
|
--focus-ring: 0 0 0 4px rgba(255, 87, 1, 0.28);
|
|
--motion-fast: 130ms;
|
|
--motion-base: 220ms;
|
|
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
--container-max: 1200px;
|
|
--container-gutter-desktop: 36px;
|
|
--container-gutter-tablet: 24px;
|
|
--container-gutter-phone: 16px;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
html, body { margin: 0; padding: 0; }
|
|
body {
|
|
min-height: 100vh;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-base);
|
|
line-height: var(--leading-body);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.page { min-height: 100vh; background: radial-gradient(circle at 80% 8%, rgba(255, 87, 1, 0.26), transparent 34%), #ffffff; }
|
|
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
|
|
section { padding-block: var(--section-y-desktop); }
|
|
@media (max-width: 1023px) { .container { padding-inline: var(--container-gutter-tablet); } section { padding-block: var(--section-y-tablet); } }
|
|
@media (max-width: 639px) { .container { padding-inline: var(--container-gutter-phone); } section { padding-block: var(--section-y-phone); } }
|
|
h1, h2, h3, p { margin: 0; }
|
|
h1, h2, h3 { font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
|
|
h1 { max-width: 820px; font-size: var(--text-4xl); font-weight: 760; }
|
|
h2 { font-size: var(--text-3xl); font-weight: 700; }
|
|
h3 { font-size: var(--text-xl); font-weight: 700; }
|
|
.eyebrow { color: var(--meta); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
|
|
.lead { max-width: 640px; color: var(--fg-2); font-size: var(--text-lg); }
|
|
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: var(--space-8); align-items: center; }
|
|
.stack > * + * { margin-block-start: var(--space-4); }
|
|
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }
|
|
.btn {
|
|
display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-5);
|
|
border: 1px solid transparent; border-radius: var(--radius-md); font: 700 var(--text-sm) / 1 var(--font-body);
|
|
color: inherit; text-decoration: none; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
|
|
}
|
|
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
|
.btn-primary { background: var(--accent); color: var(--accent-on); }
|
|
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
|
|
.btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); box-shadow: var(--elev-ring); }
|
|
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
|
|
.panel { background: color-mix(in oklab, var(--surface), transparent 4%); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-raised); overflow: hidden; }
|
|
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--border-soft); }
|
|
.status { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--meta); font: 700 var(--text-xs) / 1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
|
|
.status::before { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--success); content: ""; }
|
|
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--border-soft); }
|
|
.metric { padding: var(--space-5); border-right: 1px solid var(--border-soft); }
|
|
.metric:last-child { border-right: 0; }
|
|
.metric strong { display: block; font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); }
|
|
.metric span { color: var(--muted); font-size: var(--text-sm); }
|
|
.card-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-5); }
|
|
.mini-card { min-height: 148px; padding: var(--space-5); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-warm); }
|
|
.mini-card p, .tile p { color: var(--muted); font-size: var(--text-sm); margin-block-start: var(--space-3); }
|
|
.swatches { display: flex; gap: var(--space-2); margin-block-start: var(--space-4); }
|
|
.swatch { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
|
|
.swatch.accent { background: var(--accent); } .swatch.surface { background: var(--surface); } .swatch.warm { background: var(--surface-warm); } .swatch.fg { background: var(--fg); }
|
|
.field { display: grid; gap: var(--space-2); margin-block-start: var(--space-5); }
|
|
label { color: var(--fg-2); font-size: var(--text-sm); font-weight: 700; }
|
|
input { width: 100%; min-height: 46px; padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font: inherit; }
|
|
input:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
|
|
.lower { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
|
|
.tile { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
|
|
@media (max-width: 860px) { .hero, .lower { grid-template-columns: 1fr; } .metric-grid, .card-row { grid-template-columns: 1fr; } .metric { border-right: 0; border-bottom: 1px solid var(--border-soft); } .metric:last-child { border-bottom: 0; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="page">
|
|
<section>
|
|
<div class="container hero">
|
|
<div class="stack">
|
|
<p class="eyebrow">Agentic design system</p>
|
|
<h1>Autonomous workflow surface</h1>
|
|
<p class="lead">Multi-step agent planning, tool traces, and high-confidence execution modules.</p>
|
|
<div class="actions" aria-label="Reference actions">
|
|
<a class="btn btn-primary" href="#">Primary action</a>
|
|
<a class="btn btn-secondary" href="#">Secondary action</a>
|
|
</div>
|
|
</div>
|
|
<article class="panel" aria-label="Agentic component preview">
|
|
<div class="panel-head"><div><p class="eyebrow">Live module</p><h3>Reference component</h3></div><span class="status">online</span></div>
|
|
<div class="metric-grid"><div class="metric"><strong>98%</strong><span>Signal quality</span></div><div class="metric"><strong>24</strong><span>Active flows</span></div><div class="metric"><strong>3.2s</strong><span>Response time</span></div></div>
|
|
<div class="card-row">
|
|
<div class="mini-card"><h3>Palette</h3><p>agent workflow interface with bright neutral surfaces, orange automation signals, and editorial typography.</p><div class="swatches" aria-label="Token swatches"><span class="swatch accent"></span><span class="swatch surface"></span><span class="swatch warm"></span><span class="swatch fg"></span></div></div>
|
|
<div class="mini-card"><h3>Control</h3><p>Focus, hover, and status states share the same brand signal.</p><div class="field"><label for="agentic-input">Reference input</label><input id="agentic-input" value="Agentic system token" /></div></div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
<section><div class="container lower"><article class="tile"><p class="eyebrow">Typography</p><h2>Display rhythm</h2><p>Headlines use the display stack with the declared scale and leading.</p></article><article class="tile"><p class="eyebrow">Surface</p><h2>Layer system</h2><p>Cards, warm panels, borders, and raised states resolve through shared tokens.</p></article><article class="tile"><p class="eyebrow">Interaction</p><h2>Motion states</h2><p>Buttons, inputs, and panels use brand-specific focus rings and easing.</p></article></div></section>
|
|
</main>
|
|
</body>
|
|
</html>
|