paperclip/dbtool-cli-v1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(usable): package gui-host validation snapshot
Some checks failed
release-smoke / macos-13 / x86_64-apple-darwin (push) Has been cancelled
Details
release-smoke / ubuntu-latest / x86_64-unknown-linux-gnu (push) Has been cancelled
Details
release-smoke / windows-latest / x86_64-pc-windows-msvc (push) Has been cancelled
Details

Browse Source 
Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Paperclip CTO
2026-03-31 10:21:36 +00:00
parent 19aeb7784b
commit a28dab4cd9
47 changed files with 6894 additions and 771 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1373
gui/prototype/app.js vendored
View File

File diff suppressed because it is too large Load Diff

392
gui/prototype/index.html
View File

@@ -1,5 +1,5 @@
<!doctype html>
<html lang="zh-CN">
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -13,19 +13,49 @@
<div class="brand-mark">DB</div>
<div>
<p class="eyebrow">dbtool future desktop</p>
<h1>Query Workspace Foundation</h1>
<h1>Operator Workspace Foundation</h1>
<p class="topbar__copy">
面向数据库操作者的安静型工作台原型，聚焦 connect → inspect → query → export。
</p>
</div>
</div>
<div class="topbar__context">
<button class="ghost-button">⌘K Commands</button>
<button class="ghost-button">Theme</button>
<button class="ghost-button" id="command-button">⌘K Quick Actions</button>
<button class="ghost-button" id="theme-toggle">切换到 Light</button>
<div class="connection-pill">
<span class="status-dot status-dot--ok"></span>
<span id="active-connection">pg-prod-readonly</span>
<div>
<span class="pill-label">Active Target</span>
<strong id="active-connection">pg-prod-readonly</strong>
</div>
</div>
</div>
</header>
<section class="workspace-summary">
<article class="summary-card">
<span class="summary-card__label">Workspace</span>
<strong id="summary-workspace">Production Read Audit</strong>
<p id="summary-workspace-copy">只读 PostgreSQL 连接，聚焦近 7 天订单审计。</p>
</article>
<article class="summary-card">
<span class="summary-card__label">Selection</span>
<strong id="summary-selection">public.orders</strong>
<p id="summary-selection-copy">Schema browser 与 inspector 指向同一对象。</p>
</article>
<article class="summary-card">
<span class="summary-card__label">Last Run</span>
<strong id="summary-run">Success · 50 rows</strong>
<p id="summary-run-copy">182 ms，结果可导出。</p>
</article>
<article class="summary-card">
<span class="summary-card__label">Export</span>
<strong id="summary-export">/tmp/orders-last-7-days.csv</strong>
<p id="summary-export-copy">当前展示默认导出目标，不执行真实写盘。</p>
</article>
</section>
<main class="workspace">
<aside class="panel panel--nav">
<section class="panel-section">
@@ -38,26 +68,70 @@
</div>
<div class="connection-list">
<button class="connection-card is-active" data-connection="pg-prod-readonly">
<div>
<button
class="connection-card is-active"
data-connection="pg-prod-readonly"
data-driver="PostgreSQL"
data-environment="Production"
data-mode="Read-only"
data-selection="public.orders"
data-workspace="Production Read Audit"
data-workspace-copy="只读 PostgreSQL 连接，聚焦近 7 天订单审计。"
data-last-validated="2 minutes ago"
>
<div class="connection-card__head">
<strong>pg-prod-readonly</strong>
<p>PostgreSQL · Production</p>
<span class="pill pill--success">Healthy</span>
</div>
<p>PostgreSQL · Production · Read-only</p>
<div class="connection-card__meta">
<span>Latency 28 ms</span>
<span>Last checked 2m ago</span>
</div>
<span class="pill pill--success">Healthy</span>
</button>
<button class="connection-card" data-connection="mysql-staging">
<div>
<button
class="connection-card"
data-connection="mysql-staging"
data-driver="MySQL"
data-environment="Staging"
data-mode="Write enabled"
data-selection="qa_demo.orders"
data-workspace="Staging Validation"
data-workspace-copy="用于确认变更前后数据差异的暂存环境。"
data-last-validated="9 minutes ago"
>
<div class="connection-card__head">
<strong>mysql-staging</strong>
<p>MySQL · Staging</p>
<span class="pill pill--muted">Idle</span>
</div>
<p>MySQL · Staging · Write enabled</p>
<div class="connection-card__meta">
<span>Latency 41 ms</span>
<span>Last checked 9m ago</span>
</div>
<span class="pill pill--muted">Idle</span>
</button>
<button class="connection-card" data-connection="sqlite-local">
<div>
<button
class="connection-card"
data-connection="sqlite-local"
data-driver="SQLite"
data-environment="Local file"
data-mode="Local verify"
data-selection="main.audit_events"
data-workspace="Local Evidence Review"
data-workspace-copy="本地 SQLite 文件验证与导出证据收集。"
data-last-validated="Ready on open"
>
<div class="connection-card__head">
<strong>sqlite-local</strong>
<p>SQLite · Local file</p>
<span class="pill pill--muted">Ready</span>
</div>
<p>SQLite · Local file · Single file</p>
<div class="connection-card__meta">
<span>Offline</span>
<span>Open on demand</span>
</div>
<span class="pill pill--muted">Ready</span>
</button>
</div>
</section>
@@ -68,58 +142,61 @@
<p class="eyebrow">Schema Browser</p>
<h2>Catalog</h2>
</div>
<button class="ghost-button ghost-button--small">Filter</button>
<button class="ghost-button ghost-button--small" id="clear-search">Clear</button>
</div>
<div class="search-field">Search tables, views, columns</div>
<label class="search-field">
<span>Search</span>
<input id="schema-search" type="search" placeholder="tables, views, columns" />
</label>
<div class="tree">
<details open>
<summary>public</summary>
<details open>
<summary>orders</summary>
<ul>
<li>id · uuid</li>
<li>customer_id · uuid</li>
<li>status · text</li>
<li>created_at · timestamptz</li>
</ul>
</details>
<details>
<summary>customers</summary>
<ul>
<li>id · uuid</li>
<li>email · text</li>
<li>country · text</li>
</ul>
</details>
</details>
<details>
<summary>analytics</summary>
<ul>
<li>daily_orders</li>
<li>top_customers</li>
</ul>
</details>
</div>
<div class="tree" id="schema-tree"></div>
</section>
<section class="panel-section">
<p class="eyebrow">Workflow Checkpoints</p>
<ul class="focus-list">
<li>连接状态应在进入工作台前即被看见</li>
<li>schema browser 与 inspector 应共享同一选中对象</li>
<li>执行反馈应独立于结果表格持续可见</li>
<li>导出动作必须贴近当前结果集而不是离散分散</li>
</ul>
</section>
</aside>
<section class="panel panel--main">
<div class="editor-toolbar">
<div class="toolbar-tabs">
<button class="toolbar-tab is-active">orders audit.sql</button>
<button class="toolbar-tab">empty result.sql</button>
</div>
<div class="toolbar-tabs" id="toolbar-tabs"></div>
<div class="toolbar-actions">
<span class="pill pill--muted">PostgreSQL</span>
<span class="pill pill--muted" id="driver-pill">PostgreSQL</span>
<button class="action-button" id="cycle-state">Next State</button>
<button class="action-button action-button--primary" id="run-query">Run Query</button>
<button class="action-button">Export</button>
<button class="action-button" id="export-current">Export</button>
</div>
</div>
<div class="context-strip">
<div>
<span class="context-label">Target</span>
<strong id="context-target">pg-prod-readonly</strong>
</div>
<div>
<span class="context-label">Mode</span>
<strong id="context-mode">Read-only</strong>
</div>
<div>
<span class="context-label">Selection</span>
<strong id="context-selection">public.orders</strong>
</div>
<div>
<span class="context-label">Last validated</span>
<strong id="context-validated">2 minutes ago</strong>
</div>
</div>
<section class="editor">
<div class="editor-gutter">
<div class="editor-gutter" id="editor-gutter">
<span>1</span>
<span>2</span>
<span>3</span>
@@ -127,18 +204,10 @@
<span>5</span>
<span>6</span>
</div>
<pre class="editor-code"><code>select
id,
customer_id,
status,
created_at
from public.orders
where created_at &gt; now() - interval '7 days'
order by created_at desc
limit 50;</code></pre>
<pre class="editor-code"><code id="editor-code"></code></pre>
</section>
<section class="execution-banner" id="execution-banner">
<section class="execution-banner is-success" id="execution-banner">
<div>
<p class="eyebrow">Execution</p>
<strong id="execution-title">Last run succeeded</strong>
@@ -153,6 +222,10 @@ limit 50;</code></pre>
<span>Rows</span>
<strong id="row-count">50</strong>
</div>
<div>
<span>State</span>
<strong id="state-label">Success</strong>
</div>
</div>
</section>
@@ -162,81 +235,75 @@ limit 50;</code></pre>
<button class="bottom-tab" data-tab="history">History</button>
<button class="bottom-tab" data-tab="export">Export</button>
<button class="bottom-tab" data-tab="problems">Problems</button>
<button class="bottom-tab" data-tab="contract">Contract</button>
</div>
<div class="tab-content is-active" data-content="results">
<div class="result-summary">
<strong id="result-summary">50 rows · sorted by created_at desc</strong>
<span id="result-copy">结果区保留紧邻执行反馈的上下文，不让表格单独承担状态信息。</span>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>id</th>
<th>customer_id</th>
<th>status</th>
<th>created_at</th>
</tr>
<tr id="results-head"></tr>
</thead>
<tbody>
<tr>
<td>8ec1...</td>
<td>7cb3...</td>
<td>paid</td>
<td>2026-03-25 13:55:01 UTC</td>
</tr>
<tr>
<td>80f8...</td>
<td>5d10...</td>
<td>processing</td>
<td>2026-03-25 13:44:15 UTC</td>
</tr>
<tr>
<td>5aa2...</td>
<td>9ab1...</td>
<td>failed</td>
<td>2026-03-25 13:12:48 UTC</td>
</tr>
</tbody>
<tbody id="results-body"></tbody>
</table>
</div>
</div>
<div class="tab-content" data-content="history">
<div class="log-list">
<div class="log-row">
<strong>orders audit.sql</strong>
<span>Success · 182 ms · 50 rows</span>
</div>
<div class="log-row">
<strong>empty result.sql</strong>
<span>Success · 95 ms · 0 rows</span>
</div>
<div class="log-row">
<strong>bad syntax.sql</strong>
<span>Error · syntax error near `form`</span>
</div>
</div>
<div class="log-list" id="history-list"></div>
</div>
<div class="tab-content" data-content="export">
<div class="export-box">
<div>
<p class="eyebrow">Export Status</p>
<strong>Ready to export the current result set</strong>
<p>`/tmp/orders-last-7-days.csv` is available as the default target.</p>
<strong id="export-title">Ready to export the current result set</strong>
<p id="export-copy">`/tmp/orders-last-7-days.csv` is available as the default target.</p>
</div>
<div class="export-actions">
<button class="action-button">CSV</button>
<button class="action-button">JSON</button>
<button class="action-button" id="export-csv">CSV</button>
<button class="action-button" id="export-json">JSON</button>
</div>
</div>
</div>
<div class="tab-content" data-content="problems">
<div class="problem-box">
<strong>No blocking problem</strong>
<p>When a query fails, this area should show the error summary, SQL fragment, and next action.</p>
<strong id="problem-title">No blocking problem</strong>
<p id="problem-copy">When a query fails, this area should show the error summary, SQL fragment, and next action.</p>
</div>
</div>
<div class="tab-content" data-content="contract">
<div class="contract-card">
<div>
<p class="eyebrow">Contract Snapshot</p>
<strong id="contract-title">Query success envelope preview</strong>
<p id="contract-copy">展示当前界面状态如何映射到共享结构化契约；`running` 仍属于前端暂态。</p>
</div>
<pre class="contract-preview"><code id="contract-json"></code></pre>
</div>
</div>
</section>
<footer class="status-bar">
<span id="status-message" aria-live="polite">Ready for review. Use 1–5 to preview states, `R` to simulate run, `T` to switch theme, `/` to focus search.</span>
<div class="status-shortcuts">
<span>1 Running</span>
<span>2 Success</span>
<span>3 Empty</span>
<span>4 Error</span>
<span>5 Exported</span>
<span>R Run</span>
<span>T Theme</span>
<span>/ Search</span>
<span>⌘/Ctrl+K Actions</span>
</div>
</footer>
</section>
<aside class="panel panel--side">
@@ -245,15 +312,19 @@ limit 50;</code></pre>
<h2>Current Selection</h2>
<div class="info-card">
<span>Object</span>
<strong>public.orders</strong>
<strong id="inspector-object">public.orders</strong>
</div>
<div class="info-card">
<span>Kind</span>
<strong id="selection-kind">Table</strong>
</div>
<div class="info-card">
<span>Primary Key</span>
<strong>id</strong>
<strong id="selection-primary-key">id</strong>
</div>
<div class="info-card">
<span>Columns</span>
<strong>12</strong>
<strong id="selection-columns">12</strong>
</div>
</section>
@@ -266,11 +337,15 @@ limit 50;</code></pre>
</div>
<div>
<span>Mode</span>
<strong>Read-only</strong>
<strong id="detail-mode">Read-only</strong>
</div>
<div>
<span>Last export</span>
<strong>Not started</strong>
<strong id="detail-export">Not started</strong>
</div>
<div>
<span>Theme</span>
<strong id="detail-theme">Dark</strong>
</div>
</div>
</section>
@@ -278,16 +353,93 @@ limit 50;</code></pre>
<section class="panel-section">
<p class="eyebrow">Acceptance Focus</p>
<ul class="focus-list">
<li>Schema tree remains scannable on wide catalogs</li>
<li>Execution state is visible without reading the table</li>
<li>Result region supports empty, success, and error states</li>
<li>Export action stays adjacent to query outcome</li>
<li>连接概览、工作区上下文、执行状态三者始终同时可见</li>
<li>空结果与失败都不能伪装成同一种“空白”界面</li>
<li>切换连接后，主区域、导出区、Inspector 同步更新</li>
<li>Light / Dark 两种主题都保持低噪音和高对比</li>
</ul>
</section>
</aside>
</main>
</div>
<div class="command-palette" id="command-palette" hidden>
<button class="command-palette__backdrop" id="command-backdrop" aria-label="关闭快捷操作"></button>
<section class="command-dialog" role="dialog" aria-modal="true" aria-labelledby="command-title">
<div class="command-dialog__head">
<div>
<p class="eyebrow">Keyboard-first review</p>
<h2 id="command-title">Quick Actions</h2>
</div>
<button class="ghost-button ghost-button--small" id="command-close">Esc Close</button>
</div>
<div class="command-grid">
<section class="command-section">
<p class="eyebrow">Execution States</p>
<div class="command-list">
<button class="command-item" data-command-state="running">
<strong>Preview Running</strong>
<span>1 · 模拟执行中态，锁定导出并保留工作区上下文</span>
</button>
<button class="command-item" data-command-state="success">
<strong>Preview Success</strong>
<span>2 · 返回 50 行结果并保持导出入口可见</span>
</button>
<button class="command-item" data-command-state="empty">
<strong>Preview Empty</strong>
<span>3 · 成功但无结果，避免误判为错误</span>
</button>
<button class="command-item" data-command-state="error">
<strong>Preview Error</strong>
<span>4 · 错误摘要持续停留在工作区内</span>
</button>
<button class="command-item" data-command-state="exported">
<strong>Preview Exported</strong>
<span>5 · 导出完成反馈与结果表格并存</span>
</button>
</div>
</section>
<section class="command-section">
<p class="eyebrow">Connections</p>
<div class="command-list">
<button class="command-item" data-command-connection="pg-prod-readonly">
<strong>Open pg-prod-readonly</strong>
<span>PostgreSQL · Production · Read-only</span>
</button>
<button class="command-item" data-command-connection="mysql-staging">
<strong>Open mysql-staging</strong>
<span>MySQL · Staging · Write enabled</span>
</button>
<button class="command-item" data-command-connection="sqlite-local">
<strong>Open sqlite-local</strong>
<span>SQLite · Local file · Evidence review</span>
</button>
</div>
</section>
<section class="command-section">
<p class="eyebrow">Workflow</p>
<div class="command-list">
<button class="command-item" data-command-action="run">
<strong>Run current query</strong>
<span>R · 先进入 Running，再回到当前 SQL 对应终态</span>
</button>
<button class="command-item" data-command-action="search">
<strong>Focus schema search</strong>
<span>/ · 快速定位 schema、table 和 column</span>
</button>
<button class="command-item" data-command-action="theme">
<strong>Toggle theme</strong>
<span>T · 切换 Light / Dark，检查对比度稳定性</span>
</button>
</div>
</section>
</div>
</section>
</div>
<script src="./app.js"></script>
</body>
</html>

452
gui/prototype/styles.css
View File

@@ -1,20 +1,44 @@
:root {
html[data-theme="dark"] {
color-scheme: dark;
--bg: #0f1115;
--panel: #141821;
--panel-muted: #10141c;
--panel-strong: #1a202b;
--border: #273041;
--text: #e6e8ee;
--muted: #9da7b8;
--accent: #7dd3fc;
--accent-soft: rgba(125, 211, 252, 0.12);
--success: #7dd3a0;
--warning: #f5c26b;
--danger: #f09c9c;
--shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
--radius: 14px;
--radius-sm: 10px;
--bg: #11141a;
--bg-elevated: #161b22;
--panel: #171d25;
--panel-muted: #11161d;
--panel-strong: #202835;
--border: #2a3341;
--border-strong: #3a4759;
--text: #e6ebf2;
--muted: #9aa6b6;
--accent: #8bb8ff;
--accent-soft: rgba(139, 184, 255, 0.14);
--success: #7bc59a;
--warning: #d7b26d;
--danger: #e09a9a;
--shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
}
html[data-theme="light"] {
color-scheme: light;
--bg: #eef2f6;
--bg-elevated: #f6f8fb;
--panel: #fbfcfe;
--panel-muted: #f3f6fa;
--panel-strong: #e9eef5;
--border: #d7dde7;
--border-strong: #c2cddd;
--text: #162031;
--muted: #5f6f84;
--accent: #3667d6;
--accent-soft: rgba(54, 103, 214, 0.1);
--success: #237a4b;
--warning: #946400;
--danger: #af3a3a;
--shadow: 0 16px 36px rgba(18, 30, 46, 0.08);
}
:root {
--radius: 16px;
--radius-sm: 12px;
--font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--mono: "SFMono-Regular", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;
}
@@ -26,13 +50,15 @@
body {
margin: 0;
min-height: 100vh;
background:
radial-gradient(circle at top, rgba(125, 211, 252, 0.07), transparent 25%),
linear-gradient(180deg, #0d1016 0%, #0f1115 100%);
background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 100%);
color: var(--text);
font-family: var(--font);
}
body.has-modal {
overflow: hidden;
}
button,
input,
textarea,
@@ -42,21 +68,21 @@ select {
.app-shell {
min-height: 100vh;
padding: 18px;
padding: 20px;
}
.topbar {
display: flex;
align-items: center;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
gap: 18px;
padding: 20px 24px;
margin-bottom: 16px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: rgba(20, 24, 33, 0.82);
background: rgba(255, 255, 255, 0.04);
box-shadow: var(--shadow);
backdrop-filter: blur(12px);
backdrop-filter: blur(10px);
}
.topbar__brand,
@@ -67,7 +93,10 @@ select {
.toolbar-actions,
.bottom-tabs,
.export-box,
.export-actions {
.export-actions,
.connection-card__head,
.connection-card__meta,
.status-shortcuts {
display: flex;
align-items: center;
gap: 12px;
@@ -78,20 +107,34 @@ select {
.panel-section h2 {
margin: 0;
font-size: 16px;
letter-spacing: -0.01em;
}
.topbar__copy {
margin: 8px 0 0;
max-width: 620px;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
.brand-mark {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid rgba(125, 211, 252, 0.3);
width: 44px;
height: 44px;
border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border));
border-radius: 12px;
background: var(--accent-soft);
color: var(--accent);
font-weight: 700;
}
.topbar__context {
justify-content: flex-end;
flex-wrap: wrap;
}
.eyebrow {
margin: 0 0 4px;
color: var(--muted);
@@ -100,17 +143,47 @@ select {
text-transform: uppercase;
}
.workspace-summary {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-bottom: 16px;
}
.summary-card {
padding: 16px 18px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--panel);
box-shadow: var(--shadow);
}
.summary-card strong {
display: block;
margin-top: 6px;
font-size: 15px;
}
.summary-card p,
.summary-card__label,
.pill-label,
.result-summary span {
margin: 6px 0 0;
color: var(--muted);
font-size: 12px;
}
.workspace {
display: grid;
grid-template-columns: 280px minmax(640px, 1fr) 280px;
gap: 16px;
min-height: calc(100vh - 124px);
min-height: calc(100vh - 222px);
}
.panel {
border: 1px solid var(--border);
border-radius: var(--radius);
background: rgba(20, 24, 33, 0.9);
background: var(--panel);
box-shadow: var(--shadow);
overflow: hidden;
}
@@ -123,13 +196,15 @@ select {
.panel--main {
display: grid;
grid-template-rows: auto minmax(240px, 1fr) auto minmax(260px, 0.9fr);
grid-template-rows: auto auto minmax(260px, 1fr) auto minmax(280px, 0.92fr) auto;
}
.panel-section,
.editor-toolbar,
.context-strip,
.execution-banner,
.bottom-panel {
.bottom-panel,
.status-bar {
padding: 18px;
}
@@ -146,9 +221,11 @@ select {
.search-field,
.info-card,
.log-row,
.problem-box {
.problem-box,
.summary-card,
.result-summary {
border: 1px solid var(--border);
border-radius: 999px;
border-radius: 14px;
}
.ghost-button,
@@ -156,6 +233,7 @@ select {
.toolbar-tab,
.bottom-tab {
cursor: pointer;
transition: border-color 120ms ease, background 120ms ease, color 120ms ease, transform 120ms ease;
}
.ghost-button,
@@ -167,6 +245,21 @@ select {
color: var(--muted);
}
.ghost-button:hover,
.action-button:hover,
.toolbar-tab:hover,
.bottom-tab:hover,
.connection-card:hover,
.tree-item:hover {
border-color: var(--border-strong);
}
.ghost-button:disabled,
.action-button:disabled {
cursor: not-allowed;
opacity: 0.55;
}
.ghost-button--small {
padding: 6px 10px;
}
@@ -178,17 +271,17 @@ select {
}
.action-button--primary {
border-color: rgba(125, 211, 252, 0.28);
background: rgba(125, 211, 252, 0.16);
color: #dff6ff;
border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
background: var(--accent-soft);
color: var(--text);
}
.connection-pill,
.pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 11px;
gap: 10px;
padding: 9px 12px;
background: var(--panel-muted);
}
@@ -221,10 +314,8 @@ select {
}
.connection-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
display: grid;
gap: 10px;
width: 100%;
padding: 14px;
border: 1px solid var(--border);
@@ -245,35 +336,108 @@ select {
color: var(--muted);
}
.connection-card.is-active {
border-color: rgba(125, 211, 252, 0.4);
background: rgba(125, 211, 252, 0.08);
.connection-card__head,
.connection-card__meta {
justify-content: space-between;
}
.tree details {
.connection-card__meta {
color: var(--muted);
font-size: 12px;
}
.connection-card.is-active {
border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
background: var(--accent-soft);
}
.search-field {
display: grid;
gap: 8px;
border-radius: var(--radius-sm);
}
.search-field input {
width: 100%;
padding: 0;
border: 0;
outline: none;
background: transparent;
color: var(--text);
}
.tree-group {
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--panel-muted);
}
.tree-group[hidden],
.tree-item[hidden] {
display: none;
}
.tree summary {
cursor: pointer;
font-weight: 600;
}
.tree ul {
margin: 10px 0 0 18px;
padding: 0;
.tree-item {
display: grid;
gap: 4px;
width: 100%;
margin-top: 10px;
padding: 11px 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: transparent;
color: inherit;
text-align: left;
}
.tree-item span {
color: var(--muted);
font-size: 12px;
}
.tree-item.is-selected {
border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
background: var(--accent-soft);
}
.context-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--panel-muted);
}
.context-strip div {
min-width: 0;
}
.context-label {
display: block;
margin-bottom: 6px;
color: var(--muted);
font-size: 12px;
}
.context-strip strong {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.editor {
display: grid;
grid-template-columns: 52px 1fr;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: #10141b;
background: var(--panel-muted);
}
.editor-gutter,
@@ -286,9 +450,9 @@ select {
}
.editor-gutter {
color: #697386;
color: var(--muted);
border-right: 1px solid var(--border);
background: #0d1016;
background: color-mix(in srgb, var(--panel-muted) 82%, black 18%);
}
.editor-gutter span {
@@ -296,7 +460,7 @@ select {
}
.editor-code {
color: #d7e2f0;
color: var(--text);
overflow: auto;
}
@@ -305,16 +469,29 @@ select {
align-items: center;
justify-content: space-between;
gap: 18px;
background: linear-gradient(90deg, rgba(125, 211, 160, 0.12), rgba(125, 211, 252, 0.04));
border-top: 1px solid var(--border);
background: color-mix(in srgb, var(--success) 10%, var(--panel));
}
.execution-banner.is-running {
background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}
.execution-banner.is-empty {
background: color-mix(in srgb, var(--warning) 10%, var(--panel));
}
.execution-banner.is-error {
background: linear-gradient(90deg, rgba(240, 156, 156, 0.16), rgba(240, 156, 156, 0.06));
background: color-mix(in srgb, var(--danger) 12%, var(--panel));
}
.execution-banner.is-exported {
background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}
.banner-metrics {
display: grid;
grid-template-columns: repeat(2, minmax(88px, 1fr));
grid-template-columns: repeat(3, minmax(88px, 1fr));
gap: 12px;
}
@@ -342,11 +519,25 @@ select {
gap: 16px;
}
.result-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
padding: 12px 14px;
background: var(--panel-muted);
}
.result-summary strong {
font-size: 13px;
}
.toolbar-tab.is-active,
.bottom-tab.is-active {
border-color: rgba(125, 211, 252, 0.3);
background: rgba(125, 211, 252, 0.14);
color: #e4f7ff;
border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
background: var(--accent-soft);
color: var(--text);
}
.tab-content {
@@ -380,14 +571,34 @@ td {
th {
color: var(--muted);
font-weight: 600;
background: #121722;
background: var(--panel-strong);
}
.log-row,
.export-box,
.problem-box {
.problem-box,
.contract-card {
padding: 16px;
background: var(--panel-muted);
border-radius: var(--radius-sm);
}
.contract-card {
display: grid;
gap: 14px;
}
.contract-preview {
margin: 0;
padding: 16px;
overflow: auto;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--panel-muted) 74%, black 26%);
color: var(--text);
font-family: var(--mono);
font-size: 12px;
line-height: 1.7;
}
.focus-list {
@@ -398,17 +609,128 @@ th {
margin-top: 10px;
}
@media (max-width: 1320px) {
.status-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border-top: 1px solid var(--border);
color: var(--muted);
font-size: 12px;
}
.status-shortcuts {
flex-wrap: wrap;
justify-content: flex-end;
}
.command-palette {
position: fixed;
inset: 0;
z-index: 40;
}
.command-palette__backdrop {
position: absolute;
inset: 0;
border: 0;
background: rgba(9, 12, 18, 0.48);
backdrop-filter: blur(8px);
}
.command-dialog {
position: relative;
z-index: 1;
width: min(920px, calc(100vw - 32px));
margin: 56px auto;
padding: 20px;
border: 1px solid var(--border-strong);
border-radius: var(--radius);
background: var(--panel);
box-shadow: var(--shadow);
}
.command-dialog__head,
.command-grid,
.command-list {
display: grid;
gap: 14px;
}
.command-dialog__head {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
margin-bottom: 16px;
}
.command-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.command-section {
min-width: 0;
}
.command-item {
display: grid;
gap: 6px;
width: 100%;
padding: 14px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--panel-muted);
color: inherit;
text-align: left;
cursor: pointer;
transition: border-color 120ms ease, background 120ms ease;
}
.command-item:hover,
.command-item:focus-visible {
border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
background: var(--accent-soft);
outline: none;
}
.command-item span {
color: var(--muted);
font-size: 12px;
line-height: 1.5;
}
@media (max-width: 1440px) {
.workspace-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.workspace {
grid-template-columns: 250px minmax(520px, 1fr) 250px;
}
}
@media (max-width: 1100px) {
.topbar,
.status-bar,
.result-summary,
.context-strip,
.workspace-summary {
grid-template-columns: 1fr;
}
.topbar,
.status-bar,
.result-summary {
display: grid;
}
.workspace {
grid-template-columns: 1fr;
}
.command-grid {
grid-template-columns: 1fr;
}
.panel--main {
order: 1;
}