UI redesign: Ask, Explore, SQL, System tabs

- Ask: natural language → AI generates SQL → DataFusion executes → results
  Shows the AI-over-data-lake story: schema introspection → LLM → query
- Explore: click dataset → schema + preview + AI-generated summary
- SQL: raw DataFusion SQL editor with Ctrl+Enter
- System: health grid testing all 5 services + embeddings + generation
- Example prompts for quick demo
- Dark theme with accent styling

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
root 2026-03-27 07:24:51 -05:00
parent b235ef9201
commit b37e171e10
5 changed files with 544 additions and 888 deletions

View File

@ -1,5 +1,6 @@
[application] [application]
name = "lakehouse" name = "lakehouse"
asset_dir = "assets"
[web.app] [web.app]
title = "Lakehouse" title = "Lakehouse"

View File

@ -1,383 +1,164 @@
:root { :root {
--bg: #0a0a0f; --bg: #0a0a0f;
--surface: #12121a; --surface: #12121a;
--surface2: #1a1a28;
--border: #2a2a3a; --border: #2a2a3a;
--text: #e0e0e8; --text: #e0e0e8;
--text-dim: #888898; --text-dim: #888898;
--accent: #6c5ce7; --accent: #6c5ce7;
--accent-dim: #4a3db8; --accent-dim: #4a3db8;
--accent-glow: rgba(108, 92, 231, 0.15);
--success: #00d2a0; --success: #00d2a0;
--error: #ff6b6b; --error: #ff6b6b;
--warn: #ffa94d;
--mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
} }
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--mono); background: var(--bg); color: var(--text); font-size: 13px; line-height: 1.5; }
body { .app { display: grid; grid-template-rows: 52px 1fr; height: 100vh; overflow: hidden; }
font-family: var(--mono);
background: var(--bg);
color: var(--text);
font-size: 13px;
line-height: 1.5;
}
.app {
display: grid;
grid-template-rows: 48px 1fr;
height: 100vh;
overflow: hidden;
}
/* Header */ /* Header */
.header { .header {
display: flex; display: flex; align-items: center; padding: 0 24px; gap: 32px;
align-items: center; background: var(--surface); border-bottom: 1px solid var(--border);
padding: 0 20px;
background: var(--surface);
border-bottom: 1px solid var(--border);
gap: 24px;
}
.header h1 {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--accent);
} }
.header h1 { font-size: 16px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.ds-count { font-size: 11px; color: var(--text-dim); }
/* Tabs */ /* Tabs */
.tabs { display: flex; gap: 2px; } .tabs { display: flex; gap: 2px; }
.tab { .tab {
background: none; background: none; border: none; color: var(--text-dim); font-family: var(--mono);
border: none; font-size: 13px; padding: 8px 18px; cursor: pointer; border-bottom: 2px solid transparent;
color: var(--text-dim); transition: all 0.15s; font-weight: 500;
font-family: var(--mono);
font-size: 12px;
padding: 6px 14px;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.15s;
} }
.tab:hover { color: var(--text); } .tab:hover { color: var(--text); }
.tab.active { .tab.active { color: var(--accent); border-bottom-color: var(--accent); }
color: var(--accent);
border-bottom-color: var(--accent);
}
/* Main layout */
.main {
display: grid;
grid-template-columns: 240px 1fr;
overflow: hidden;
}
/* Sidebar */
.sidebar {
background: var(--surface);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: hidden;
}
.sidebar-header {
padding: 12px 16px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-dim);
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.sidebar-list { overflow-y: auto; flex: 1; }
.dataset-item {
padding: 10px 16px;
cursor: pointer;
border-bottom: 1px solid var(--border);
transition: background 0.1s;
}
.dataset-item:hover { background: rgba(108, 92, 231, 0.1); }
.dataset-item.active {
background: rgba(108, 92, 231, 0.15);
border-left: 2px solid var(--accent);
}
.dataset-item .name { font-weight: 600; font-size: 13px; }
.dataset-item .meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
/* Content area */
.content {
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Query editor */
.query-editor {
padding: 16px;
border-bottom: 1px solid var(--border);
display: flex;
gap: 8px;
}
.query-editor textarea {
flex: 1;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
font-family: var(--mono);
font-size: 13px;
padding: 10px;
border-radius: 4px;
resize: none;
min-height: 60px;
outline: none;
}
.query-editor textarea:focus { border-color: var(--accent); }
/* Buttons */ /* Buttons */
.btn { .btn {
background: var(--accent); background: var(--accent); color: white; border: none; padding: 10px 20px;
color: white; border-radius: 6px; font-family: var(--mono); font-size: 13px; cursor: pointer;
border: none; font-weight: 600; white-space: nowrap; transition: all 0.15s;
padding: 8px 16px;
border-radius: 4px;
font-family: var(--mono);
font-size: 12px;
cursor: pointer;
font-weight: 600;
white-space: nowrap;
transition: background 0.1s;
} }
.btn:hover { background: var(--accent-dim); transform: translateY(-1px); }
.btn:hover { background: var(--accent-dim); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-ask { padding: 12px 28px; font-size: 14px; }
.btn-sm { padding: 4px 10px; font-size: 11px; } .btn-sm { padding: 4px 10px; font-size: 11px; }
.refresh-btn { .refresh-btn {
background: none; background: none; border: 1px solid var(--border); color: var(--text-dim);
border: 1px solid var(--border); padding: 4px 10px; border-radius: 4px; font-family: var(--mono); font-size: 12px; cursor: pointer;
color: var(--text-dim);
padding: 2px 8px;
border-radius: 3px;
font-family: var(--mono);
font-size: 10px;
cursor: pointer;
} }
.refresh-btn:hover { border-color: var(--accent); color: var(--accent); } .refresh-btn:hover { border-color: var(--accent); color: var(--accent); }
/* Results */ /* Content */
.results { flex: 1; overflow: auto; padding: 16px; } .content-full { overflow-y: auto; flex: 1; }
.results-info { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; } .panel { padding: 32px; max-width: 1000px; margin: 0 auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th {
text-align: left;
padding: 8px 12px;
background: var(--surface);
border-bottom: 2px solid var(--accent);
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--accent);
position: sticky;
top: 0;
}
td { padding: 6px 12px; border-bottom: 1px solid var(--border); }
tr:hover td { background: rgba(108, 92, 231, 0.05); }
/* States */ /* States */
.loading { color: var(--accent); padding: 20px; text-align: center; } .loading { color: var(--accent); padding: 24px; text-align: center; }
.error { color: var(--error); background: rgba(255,107,107,0.08); border: 1px solid rgba(255,107,107,0.2); padding: 14px 18px; border-radius: 6px; font-size: 12px; margin-top: 12px; }
.error-inline { color: var(--error); font-size: 12px; }
.empty { color: var(--text-dim); padding: 48px 24px; text-align: center; font-size: 13px; }
.empty-sm { color: var(--text-dim); padding: 16px; text-align: center; font-size: 12px; }
.error { /* === ASK PANEL === */
color: var(--error); .ask-panel { max-width: 860px; }
background: rgba(255, 107, 107, 0.1); .ask-hero { margin-bottom: 28px; }
border: 1px solid rgba(255, 107, 107, 0.3); .ask-hero h2 { font-size: 28px; font-weight: 700; margin-bottom: 6px; }
padding: 12px 16px; .subtitle { color: var(--text-dim); font-size: 14px; }
border-radius: 4px;
font-size: 12px; .ask-input-row { display: flex; gap: 10px; margin-bottom: 12px; }
.ask-input {
flex: 1; background: var(--surface); border: 2px solid var(--border); color: var(--text);
font-family: var(--mono); font-size: 15px; padding: 14px 18px; border-radius: 8px; outline: none;
} }
.ask-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.ask-input::placeholder { color: var(--text-dim); }
.success { .ask-examples { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; font-size: 11px; color: var(--text-dim); align-items: center; }
color: var(--success); .example-btn {
background: rgba(0, 210, 160, 0.1); background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim);
border: 1px solid rgba(0, 210, 160, 0.3); font-family: var(--mono); font-size: 11px; padding: 4px 10px; border-radius: 4px; cursor: pointer;
padding: 12px 16px;
border-radius: 4px;
font-size: 12px;
margin-top: 8px;
} }
.example-btn:hover { border-color: var(--accent); color: var(--accent); }
.empty { color: var(--text-dim); padding: 40px 20px; text-align: center; font-size: 12px; } .generated-sql {
background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
/* Panels */ padding: 16px; margin-bottom: 20px;
.panel {
padding: 20px;
overflow-y: auto;
flex: 1;
} }
.sql-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); display: block; margin-bottom: 8px; }
.sql-code { font-size: 13px; color: var(--accent); white-space: pre-wrap; word-break: break-all; }
.panel-section { /* === EXPLORE PANEL === */
margin-bottom: 28px; .explore-panel { max-width: 1100px; }
padding-bottom: 20px; .explore-grid { display: grid; grid-template-columns: 260px 1fr; gap: 24px; min-height: 500px; }
border-bottom: 1px solid var(--border); .ds-cards h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 12px; }
.ds-card {
background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
padding: 14px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s;
} }
.ds-card:hover { border-color: var(--accent); }
.ds-card.active { border-color: var(--accent); background: var(--accent-glow); }
.ds-card-name { font-weight: 600; font-size: 14px; }
.ds-card-meta { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.panel-section:last-child { border-bottom: none; } .ds-detail h3 { font-size: 20px; font-weight: 700; margin-bottom: 16px; }
.panel-section h3 { .summary-box {
font-size: 14px; background: var(--accent-glow); border: 1px solid rgba(108,92,231,0.3); border-radius: 8px;
font-weight: 600; padding: 16px; margin-bottom: 20px;
color: var(--accent);
margin-bottom: 6px;
} }
.summary-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); display: block; margin-bottom: 8px; font-weight: 600; }
.summary-text { font-size: 13px; line-height: 1.7; }
.hint { .section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); display: block; margin-bottom: 10px; font-weight: 600; }
font-size: 11px; .schema-box, .preview-box { margin-bottom: 24px; }
color: var(--text-dim);
margin-bottom: 12px; /* === SQL PANEL === */
.sql-editor { margin-bottom: 16px; }
.sql-textarea {
width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text);
font-family: var(--mono); font-size: 14px; padding: 16px; border-radius: 8px;
resize: vertical; min-height: 120px; outline: none; margin-bottom: 10px;
} }
.sql-textarea:focus { border-color: var(--accent); }
.sql-actions { display: flex; gap: 8px; }
.results-area { margin-top: 8px; }
/* Forms */ /* === STATUS PANEL === */
.form-row { .status-hero { margin-bottom: 28px; }
display: flex; .status-hero h2 { font-size: 24px; font-weight: 700; margin-bottom: 6px; }
align-items: center; .status-hero .btn { margin-top: 16px; }
gap: 8px;
margin-bottom: 8px; .check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.check-card {
background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
padding: 16px; display: flex; gap: 14px; align-items: flex-start;
} }
.check-card.pass { border-left: 3px solid var(--success); }
.check-card.fail { border-left: 3px solid var(--error); }
.check-icon { font-size: 18px; font-weight: 700; min-width: 24px; text-align: center; }
.pass .check-icon { color: var(--success); }
.fail .check-icon { color: var(--error); }
.check-info { flex: 1; min-width: 0; }
.check-name { font-weight: 600; font-size: 13px; }
.check-desc { font-size: 11px; color: var(--text-dim); margin: 2px 0; }
.check-msg { font-size: 11px; color: var(--text-dim); word-break: break-word; overflow: hidden; text-overflow: ellipsis; max-height: 3em; }
.pass .check-msg { color: var(--success); }
.fail .check-msg { color: var(--error); }
.form-row label { /* Results table */
font-size: 11px; .results-info { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; }
color: var(--text-dim); .table-wrap { overflow-x: auto; }
min-width: 80px; table { width: 100%; border-collapse: collapse; font-size: 12px; }
th {
text-align: left; padding: 10px 14px; background: var(--surface2); border-bottom: 2px solid var(--accent);
font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
color: var(--accent); position: sticky; top: 0;
} }
td { padding: 8px 14px; border-bottom: 1px solid var(--border); }
.form-row input, input { tr:hover td { background: var(--accent-glow); }
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
font-family: var(--mono);
font-size: 12px;
padding: 6px 10px;
border-radius: 4px;
flex: 1;
outline: none;
}
.form-row input:focus, input:focus { border-color: var(--accent); }
.row { display: flex; gap: 8px; margin-bottom: 8px; }
/* Object list */
.object-list { margin-top: 8px; }
.object-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 10px;
border-bottom: 1px solid var(--border);
font-size: 12px;
}
.mono { font-family: var(--mono); }
/* AI panel */
.ai-panel { max-width: 800px; }
.input-area {
width: 100%;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
font-family: var(--mono);
font-size: 12px;
padding: 10px;
border-radius: 4px;
resize: vertical;
min-height: 60px;
outline: none;
margin-bottom: 8px;
}
.input-area:focus { border-color: var(--accent); }
.result-box {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
padding: 12px;
margin-top: 10px;
}
.result-meta {
font-size: 11px;
color: var(--text-dim);
margin-bottom: 8px;
}
.embed-row {
font-size: 11px;
color: var(--text);
padding: 2px 0;
}
.gen-text {
font-size: 13px;
line-height: 1.6;
white-space: pre-wrap;
}
.rerank-row {
display: flex;
gap: 12px;
padding: 6px 0;
border-bottom: 1px solid var(--border);
font-size: 12px;
}
.rerank-row:last-child { border-bottom: none; }
.score {
background: var(--accent);
color: white;
padding: 2px 8px;
border-radius: 3px;
font-weight: 600;
font-size: 11px;
min-width: 32px;
text-align: center;
}
/* Status checks */
.check-results { margin-top: 16px; }
.check-row {
display: flex;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
font-size: 12px;
border-left: 3px solid transparent;
}
.check-row.check-pass { border-left-color: var(--success); }
.check-row.check-fail { border-left-color: var(--error); }
.check-name { font-weight: 600; }
.check-result { color: var(--text-dim); text-align: right; max-width: 60%; }
.check-pass .check-result { color: var(--success); }
.check-fail .check-result { color: var(--error); }

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,15 @@
{
"id": "50d402a0-6fb4-4849-ac75-3541b8530aba",
"name": "u5",
"schema_fingerprint": "from-ui",
"objects": [
{
"bucket": "data",
"key": "datasets/events.parquet",
"size_bytes": 0,
"created_at": "2026-03-27T12:16:57.520054490Z"
}
],
"created_at": "2026-03-27T12:16:57.520066991Z",
"updated_at": "2026-03-27T12:16:57.520066991Z"
}

View File

@ -0,0 +1,15 @@
{
"id": "fc046131-8f44-428a-af90-ebf6347d4cc6",
"name": "u",
"schema_fingerprint": "from-ui",
"objects": [
{
"bucket": "data",
"key": "datasets/employees.parquet",
"size_bytes": 0,
"created_at": "2026-03-27T12:16:51.462058823Z"
}
],
"created_at": "2026-03-27T12:16:51.462071311Z",
"updated_at": "2026-03-27T12:16:51.462071311Z"
}