abkslmandnucleic
e4f0b3e16c
Nucleic-Session: 70972BA4-18A4-4077-AFC2-9CD7F5873D2F Co-authored-by: Nucleic <[email protected]>
757 lines
46 KiB
HTML
757 lines
46 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Nucleic — cockpit mock (faithful web port of the real UI)</title>
|
||
<!-- Self-hosted fonts (latin subset). The woff2 binaries live in fonts/ and are
|
||
preloaded so they download in parallel with the HTML; @font-face is inlined
|
||
(no render-blocking stylesheet) and the page never contacts Google. -->
|
||
<link rel="preload" href="fonts/space-grotesk.woff2" as="font" type="font/woff2" crossorigin />
|
||
<link rel="preload" href="fonts/jetbrains-mono.woff2" as="font" type="font/woff2" crossorigin />
|
||
<style>
|
||
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/space-grotesk.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
|
||
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/jetbrains-mono.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
|
||
</style>
|
||
|
||
<!--
|
||
============================================================================
|
||
NUCLEIC COCKPIT — web-compatible port of the real app interface
|
||
============================================================================
|
||
|
||
FOR THE WEBSITE AGENT
|
||
Self-contained, previewable port of Nucleic's actual interface — the home
|
||
dashboard plus the sidebar with the CONTROL tab active and the per-project
|
||
chat tree below it. Built straight from the SwiftUI source (HomeView,
|
||
RootView/SessionRow/projectHeader, ControlPanelView, SidebarModeSwitcher,
|
||
SidebarPane, QuotaCard, AppTheme), so layout, sections, colors, and copy
|
||
match what ships.
|
||
|
||
It is themed in LIGHT mode using the app's ACTUAL light appearance — the exact
|
||
AppTheme.swift light sRGB surfaces (#f7f7fa background, #ebecf0 sidebar, white
|
||
cards, black-10% hairlines) and the vivid light palette (violet Control accent,
|
||
teal/blue/amber/green status colors). Not the site's warm-paper tokens — these
|
||
are the app's real values, so the cockpit matches the product, not the page.
|
||
|
||
HOW TO COPY IT IN (three regions, all scoped under `.nuc-cockpit`, no collisions):
|
||
1. Copy the contents of <style data-nuc> … </style> into the site's <style>.
|
||
2. Replace the existing `.showcase` window markup (the `.appwin` block) with
|
||
the <div class="nuc-cockpit"> … </div> markup below.
|
||
3. Copy the <script data-nuc> … </script> block (sizes the activity grid to
|
||
its column, like the app's GeometryReader) before </body>. It is
|
||
idempotent, guarded, and re-fits on resize.
|
||
|
||
Everything is namespaced under `.nuc-cockpit` and uses its own CSS variables,
|
||
so it neither reads from nor pollutes the site's :root tokens.
|
||
|
||
HEIGHT: the window is height-bounded (default 780px) and its panes scroll
|
||
internally — like the real app (a scrolling dashboard with a pinned chat bar,
|
||
a scrolling sidebar). Set it to whatever fits your hero by overriding one var:
|
||
.nuc-cockpit{ --nuc-h: 640px; } /* or inline style="--nuc-h:640px" */
|
||
Below 860px it drops the sidebar and grows to natural height (the page scrolls).
|
||
|
||
A verified reference render sits beside it at website/cockpit-preview.png
|
||
(captured headless with a DejaVu fallback font; the live site's Space Grotesk
|
||
will look crisper — layout and colors are identical).
|
||
============================================================================
|
||
-->
|
||
|
||
<style data-nuc>
|
||
/* ===== Nucleic cockpit — scoped, light (warm-paper), Control-tab active ==== */
|
||
.nuc-cockpit{
|
||
/* Surfaces — the app's actual LIGHT appearance (AppTheme.swift sRGB values) */
|
||
--bg:#f7f7fa; /* background srgb(.97,.97,.98) */
|
||
--sidebar:#ebecf0; /* sidebar srgb(.92,.925,.94) */
|
||
--surface:#ffffff; /* surface — cards / tiles / pills (white) */
|
||
--tile:#ffffff; /* StatCard / QuotaCard / streak all use surface (white) */
|
||
--field:#eeeef1; /* composer field — .quaternary fill */
|
||
--hair:rgba(0,0,0,.10);/* hairline NSColor(white:0, alpha:.10) */
|
||
--hair-2:rgba(0,0,0,.06);
|
||
--sel:#d4d7df; /* selected-row highlight — softened for marketing; app srgb(.83,.84,.875) */
|
||
|
||
/* Text — primaryText srgb(.24,.24,.27) + secondary/tertiary label tiers */
|
||
--tx:#3d3d45;
|
||
--tx2:#70707a;
|
||
--tx3:#a2a2ab;
|
||
|
||
/* Categorical palette — app standard palette, LIGHT (vivid base) values */
|
||
--lav:#7352d1; /* Control-project accent (violet) (.45,.32,.82) */
|
||
--teal:#0a8580; /* default accent (.04,.52,.50) */
|
||
--blue:#338cf2; /* running / active (.20,.55,.95) */
|
||
--amber:#ffa626; /* attention / waiting (1,.65,.15) */
|
||
--green:#4dcc73; /* success / running container (.30,.80,.45) */
|
||
--red:#eb5757; /* danger (.92,.34,.34) */
|
||
--frozen:#42a3f5; /* iced streak-freeze blue (.26,.64,.96) */
|
||
--gold:#cc9117; /* orchestra gold (.80,.57,.09) */
|
||
--usagebar:#6b99a3;/* AppTheme.usageBar light (.42,.60,.64) */
|
||
|
||
/* Activity grid shades — activityBase green over a secondary-15% empty cell */
|
||
--c-l0:#dcdce1;
|
||
--c-l1:rgba(77,204,115,.4);
|
||
--c-l2:rgba(77,204,115,.7);
|
||
--c-l3:rgba(77,204,115,.88);
|
||
--c-l4:#4dcc73;
|
||
|
||
--mono:"JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
|
||
|
||
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Space Grotesk", Arial, sans-serif;
|
||
color:var(--tx);
|
||
background:var(--bg);
|
||
border:1px solid var(--hair);
|
||
border-radius:14px;
|
||
overflow:hidden;
|
||
box-shadow:0 1px 0 rgba(255,255,255,.7) inset,
|
||
0 30px 70px -40px rgba(40,30,50,.40);
|
||
font-size:13px;
|
||
line-height:1.45;
|
||
/* It's an illustrative chrome, not real content — keep its text unselectable. */
|
||
-webkit-user-select:none;
|
||
user-select:none;
|
||
}
|
||
.nuc-cockpit, .nuc-cockpit *{cursor:default}
|
||
.nuc-cockpit *{box-sizing:border-box}
|
||
.nuc-cockpit svg{display:block}
|
||
|
||
/* ---- title bar (window toolbar: lights, then the toolbar buttons) ---- */
|
||
.nuc-cockpit .nuc-titlebar{
|
||
display:flex;align-items:center;gap:12px;
|
||
padding:10px 14px;background:#e9eaef;border-bottom:1px solid var(--hair);
|
||
}
|
||
.nuc-cockpit .nuc-lights{display:flex;gap:8px}
|
||
.nuc-cockpit .nuc-lights i{width:11px;height:11px;border-radius:50%;display:block}
|
||
.nuc-cockpit .nuc-lights i:nth-child(1){background:#ec6a5e}
|
||
.nuc-cockpit .nuc-lights i:nth-child(2){background:#f4bd4f}
|
||
.nuc-cockpit .nuc-lights i:nth-child(3){background:#61c454}
|
||
/* Toggle Sidebar · Home · Add Project — the three window-toolbar buttons */
|
||
.nuc-cockpit .nuc-tbar{display:flex;align-items:center;gap:15px;margin-left:5px}
|
||
.nuc-cockpit .nuc-tbtn{color:#54545d;display:flex}
|
||
.nuc-cockpit .nuc-tbtn svg{width:16px;height:16px}
|
||
.nuc-cockpit .nuc-wtitle{margin-left:22px;font-weight:600;letter-spacing:-.01em;color:var(--tx)}
|
||
|
||
/* ---- two-column body ----
|
||
Height is bounded (default 780px, override via `--nuc-h`) and each pane scrolls
|
||
internally — mirroring the real app (HomeView is a ScrollView with a pinned chat
|
||
bar; the sidebar is a List). So the cockpit fits a hero slot and adapts to height
|
||
changes instead of growing to its content. On mobile it falls back to natural
|
||
height (the page scrolls — see the media query at the end). */
|
||
/* Default sized so the selected chat + the one below it stay visible in the sidebar. */
|
||
.nuc-cockpit{--nuc-h:780px}
|
||
.nuc-cockpit .nuc-body{display:grid;grid-template-columns:286px 1fr;height:var(--nuc-h)}
|
||
/* hide the internal scrollbars so the panes read as a clean app window */
|
||
.nuc-cockpit .nuc-side,.nuc-cockpit .nuc-scroll{scrollbar-width:none}
|
||
.nuc-cockpit .nuc-side::-webkit-scrollbar,.nuc-cockpit .nuc-scroll::-webkit-scrollbar{width:0;height:0}
|
||
|
||
/* =========================== SIDEBAR ===================================== */
|
||
/* Column-edge inset matches the app's safeAreaPadding(5)+row padding(8)=13. */
|
||
.nuc-cockpit .nuc-side{
|
||
background:var(--sidebar);border-right:1px solid var(--hair);
|
||
padding:10px 13px;display:flex;flex-direction:column;overflow-y:auto;min-height:0;
|
||
}
|
||
/* The sidebar scrolls; its children must NOT flex-shrink, or an overflowing column
|
||
would squash the switcher/sections (the switcher's overflow:hidden then clips them). */
|
||
.nuc-cockpit .nuc-side > *{flex-shrink:0}
|
||
|
||
/* mode switcher — bordered segmented control spanning the column
|
||
(SidebarModeSwitcher: equal maxWidth-infinity segments, 3pt inset pill) */
|
||
.nuc-cockpit .nuc-switch{
|
||
display:flex;gap:2px;padding:3px;overflow:hidden;
|
||
background:var(--surface);border:1px solid var(--hair);border-radius:9px;margin-bottom:6px;
|
||
}
|
||
.nuc-cockpit .nuc-seg{
|
||
flex:1 1 0;min-width:0;overflow:hidden;
|
||
display:flex;align-items:center;justify-content:center;gap:4px;
|
||
padding:5px 6px;border-radius:6px;font-size:11px;font-weight:600;
|
||
color:var(--tx2);white-space:nowrap;
|
||
}
|
||
.nuc-cockpit .nuc-seg svg{width:13px;height:13px;flex:none}
|
||
.nuc-cockpit .nuc-seg.on{background:rgba(0,0,0,.08);color:var(--tx)}
|
||
|
||
/* pane header — accent atom glyph + status summary + trailing control + rule */
|
||
.nuc-cockpit .nuc-pane-head{display:flex;flex-direction:column}
|
||
.nuc-cockpit .nuc-pane-row{display:flex;align-items:flex-start;gap:8px;padding:9px 0}
|
||
.nuc-cockpit .nuc-pane-row .nuc-acc{color:var(--lav);flex:none;margin-top:1px}
|
||
.nuc-cockpit .nuc-pane-row .nuc-sum{font-size:11px;color:var(--tx2);flex:1;min-width:0;line-height:1.35}
|
||
.nuc-cockpit .nuc-relall{
|
||
font-size:10.5px;color:var(--tx2);display:inline-flex;align-items:center;gap:4px;
|
||
flex:none;white-space:nowrap;margin-top:1px;
|
||
}
|
||
.nuc-cockpit .nuc-rule{height:1px;background:var(--hair);margin:0 0 10px}
|
||
|
||
/* section titles + pane body */
|
||
.nuc-cockpit .nuc-pane-body{display:flex;flex-direction:column;gap:14px;padding:0 0 4px}
|
||
.nuc-cockpit .nuc-sec-t{
|
||
font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--tx2);
|
||
margin-bottom:3px;
|
||
}
|
||
|
||
/* container identity row */
|
||
.nuc-cockpit .nuc-crow{display:flex;align-items:center;gap:8px;padding:3px 0}
|
||
.nuc-cockpit .nuc-dot{width:8px;height:8px;border-radius:50%;flex:none}
|
||
.nuc-cockpit .nuc-dot.green{background:var(--green)}
|
||
.nuc-cockpit .nuc-dot.amber{background:var(--amber)}
|
||
.nuc-cockpit .nuc-dot.blue{background:var(--blue)}
|
||
.nuc-cockpit .nuc-ct{flex:1;min-width:0}
|
||
.nuc-cockpit .nuc-ct .nm{font-size:12.5px;color:var(--tx);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.nuc-cockpit .nuc-ct .sub{font-size:10px;color:var(--tx2);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
|
||
.nuc-cockpit .nuc-trail{font-size:10px;color:var(--tx2);flex:none;white-space:nowrap}
|
||
|
||
/* resource meters (CPU / RAM) */
|
||
.nuc-cockpit .nuc-meter{display:flex;align-items:center;gap:8px;padding:2px 0}
|
||
.nuc-cockpit .nuc-meter .k{width:28px;font-size:10px;color:var(--tx2)}
|
||
.nuc-cockpit .nuc-meter .trk{flex:1;height:5px;border-radius:3px;background:rgba(24,21,32,.10);overflow:hidden}
|
||
.nuc-cockpit .nuc-meter .trk i{display:block;height:100%;border-radius:3px}
|
||
.nuc-cockpit .nuc-meter .pct{width:34px;text-align:right;font-size:10px;color:var(--tx2);font-family:var(--mono)}
|
||
|
||
/* autoship / activity info rows */
|
||
.nuc-cockpit .nuc-irow{display:flex;align-items:center;gap:7px;padding:4px 0}
|
||
.nuc-cockpit .nuc-irow .gl{width:13px;flex:none;display:flex;justify-content:center}
|
||
.nuc-cockpit .nuc-irow .gl svg{width:11px;height:11px}
|
||
.nuc-cockpit .nuc-irow .it{flex:1;min-width:0}
|
||
.nuc-cockpit .nuc-irow .it .t{font-size:12px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.nuc-cockpit .nuc-irow .it .s{font-size:10px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
|
||
.nuc-cockpit .nuc-irow .when{font-size:10px;color:var(--tx3);flex:none;font-family:var(--mono)}
|
||
|
||
/* file-lock rows (waiter indented) */
|
||
.nuc-cockpit .nuc-lrow{display:flex;align-items:center;gap:7px;padding:4px 0}
|
||
.nuc-cockpit .nuc-lrow.wait{padding-left:16px}
|
||
.nuc-cockpit .nuc-lrow .gl{width:9px;flex:none;display:flex;justify-content:center}
|
||
.nuc-cockpit .nuc-lrow .gl svg{width:11px;height:11px}
|
||
.nuc-cockpit .nuc-lrow .it{flex:1;min-width:0}
|
||
.nuc-cockpit .nuc-lrow .it .t{font-size:12px;color:var(--tx)}
|
||
.nuc-cockpit .nuc-lrow .it .s{font-size:10px;color:var(--tx2);margin-top:1px}
|
||
.nuc-cockpit .nuc-release{font-size:10.5px;color:var(--lav);flex:none}
|
||
|
||
.nuc-cockpit .tint-lav{color:var(--lav)} .nuc-cockpit .tint-amber{color:var(--amber)}
|
||
.nuc-cockpit .tint-green{color:var(--green)} .nuc-cockpit .tint-blue{color:var(--blue)}
|
||
.nuc-cockpit .tint-tx2{color:var(--tx2)} .nuc-cockpit .tint-red{color:var(--red)}
|
||
|
||
/* ---- project tree below the Control pane (always-present session list) ---- */
|
||
.nuc-cockpit .nuc-tree{margin-top:16px;display:flex;flex-direction:column}
|
||
.nuc-cockpit .nuc-proj{display:flex;align-items:center;gap:5px;padding:6px 0 5px}
|
||
.nuc-cockpit .nuc-proj .pname{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--tx)}
|
||
.nuc-cockpit .nuc-proj svg{width:12px;height:12px;flex:none}
|
||
.nuc-cockpit .nuc-proj .lav{color:var(--lav)}
|
||
.nuc-cockpit .nuc-proj .chev{color:var(--tx3)}
|
||
.nuc-cockpit .nuc-proj .sp{flex:1}
|
||
.nuc-cockpit .nuc-proj .integrate{color:var(--lav);width:15px;height:15px}
|
||
|
||
/* session row (SessionRow): leading status dot, title + status line, trailing meta */
|
||
.nuc-cockpit .nuc-srow{display:flex;align-items:center;gap:7px;margin:0 -7px;padding:6px 7px;border-radius:6px}
|
||
.nuc-cockpit .nuc-srow.sel{background:var(--sel)}
|
||
.nuc-cockpit .nuc-srow .sdot{width:8px;height:8px;border-radius:50%;flex:none}
|
||
.nuc-cockpit .nuc-srow .sglyph{width:9px;flex:none;display:flex;justify-content:center}
|
||
.nuc-cockpit .nuc-srow .sglyph svg{width:10px;height:10px}
|
||
.nuc-cockpit .nuc-srow .sc{flex:1;min-width:0}
|
||
.nuc-cockpit .nuc-srow .st{font-size:12.5px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.nuc-cockpit .nuc-srow .st.unseen{font-weight:600}
|
||
.nuc-cockpit .nuc-srow .ss{display:flex;align-items:center;gap:4px;margin-top:1px;font-size:10.5px;color:var(--tx2)}
|
||
.nuc-cockpit .nuc-srow .ss .b{display:inline-flex}
|
||
.nuc-cockpit .nuc-srow .ss svg{width:9px;height:9px}
|
||
.nuc-cockpit .nuc-srow .diff{font-size:10px;font-family:var(--mono);color:var(--tx2);flex:none}
|
||
.nuc-cockpit .nuc-srow .udot{width:7px;height:7px;border-radius:50%;background:var(--lav);flex:none}
|
||
.nuc-cockpit .nuc-srow .pause{flex:none;color:var(--amber)}
|
||
|
||
/* =========================== MAIN / HOME ================================= */
|
||
.nuc-cockpit .nuc-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
|
||
.nuc-cockpit .nuc-scroll{flex:1;min-height:0;overflow-y:auto;padding:18px 24px}
|
||
|
||
/* greeting + streak */
|
||
.nuc-cockpit .nuc-hi{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
|
||
.nuc-cockpit .nuc-hi h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--tx)}
|
||
.nuc-cockpit .nuc-hi .greet{margin:4px 0 0;font-size:13px;color:var(--tx2)}
|
||
.nuc-cockpit .nuc-streak{
|
||
display:inline-flex;align-items:center;gap:8px;flex:none;
|
||
background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:7px 13px;
|
||
}
|
||
.nuc-cockpit .nuc-streak .bolt{color:var(--frozen)}
|
||
.nuc-cockpit .nuc-streak .n{font-size:15px;font-weight:600;color:var(--tx)}
|
||
.nuc-cockpit .nuc-streak .lbl{font-size:15px;font-weight:600;color:var(--tx2)}
|
||
.nuc-cockpit .nuc-streak .fz{display:inline-flex;align-items:center;gap:3px;color:var(--frozen);font-size:12.5px;font-weight:600}
|
||
|
||
/* activity + usage row (side-by-side, equal columns like the dashboard HStack) */
|
||
.nuc-cockpit .nuc-dash{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px;align-items:start}
|
||
.nuc-cockpit .nuc-h{font-size:14px;font-weight:600;color:var(--tx);margin:0 0 8px}
|
||
.nuc-cockpit .nuc-h .ic{color:var(--tx2);margin-right:6px;vertical-align:-2px;display:inline-block}
|
||
|
||
/* activity grid (GitHub-style) — sized to its column by the scoped script */
|
||
.nuc-cockpit .nuc-grid{display:flex;gap:3px;flex-wrap:nowrap}
|
||
.nuc-cockpit .nuc-grid .col{display:flex;flex-direction:column;gap:3px}
|
||
.nuc-cockpit .nuc-grid i{width:14px;height:14px;border-radius:3px;background:var(--c-l0);display:block}
|
||
.nuc-cockpit .nuc-grid i.l1{background:var(--c-l1)} .nuc-cockpit .nuc-grid i.l2{background:var(--c-l2)}
|
||
.nuc-cockpit .nuc-grid i.l3{background:var(--c-l3)} .nuc-cockpit .nuc-grid i.l4{background:var(--c-l4)}
|
||
.nuc-cockpit .nuc-grid i.fz{background:var(--frozen)}
|
||
.nuc-cockpit .nuc-legend{display:flex;align-items:center;gap:5px;margin-top:10px;font-size:10.5px;color:var(--tx2)}
|
||
.nuc-cockpit .nuc-legend i{width:11px;height:11px;border-radius:2px;display:block}
|
||
.nuc-cockpit .nuc-legend .gap{width:8px}
|
||
|
||
/* usage card */
|
||
.nuc-cockpit .nuc-card{background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:14px}
|
||
.nuc-cockpit .nuc-uwin{margin-top:11px}
|
||
.nuc-cockpit .nuc-uwin:first-of-type{margin-top:0}
|
||
.nuc-cockpit .nuc-uwin .top{display:flex;align-items:center;gap:6px}
|
||
.nuc-cockpit .nuc-uwin .top .ulbl{font-size:13px;color:var(--tx);flex:1}
|
||
.nuc-cockpit .nuc-uwin .top .ic{color:var(--tx2)}
|
||
.nuc-cockpit .nuc-uwin .top .up{font-size:13px;font-weight:600;font-family:var(--mono)}
|
||
.nuc-cockpit .nuc-ubar{height:6px;border-radius:4px;background:rgba(24,21,32,.10);overflow:hidden;margin-top:6px}
|
||
.nuc-cockpit .nuc-ubar i{display:block;height:100%;border-radius:4px}
|
||
.nuc-cockpit .nuc-ucap{font-size:10.5px;color:var(--tx2);margin-top:5px}
|
||
|
||
/* stat cards */
|
||
.nuc-cockpit .nuc-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin-top:16px}
|
||
.nuc-cockpit .nuc-tile{background:var(--tile);border:1px solid var(--hair);border-radius:12px;padding:10px 13px}
|
||
.nuc-cockpit .nuc-tile .ic{color:var(--tx2)}
|
||
.nuc-cockpit .nuc-tile .n{font-size:20px;font-weight:600;letter-spacing:-.01em;margin-top:6px;color:var(--tx);font-variant-numeric:tabular-nums}
|
||
.nuc-cockpit .nuc-tile .l{font-size:11px;color:var(--tx2);margin-top:1px}
|
||
|
||
/* to-do */
|
||
.nuc-cockpit .nuc-todo-h{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
|
||
.nuc-cockpit .nuc-todo-h .h{font-size:14px;font-weight:600;color:var(--tx)}
|
||
.nuc-cockpit .nuc-todo-h .act{display:flex;gap:16px;font-size:12px;color:var(--tx2)}
|
||
.nuc-cockpit .nuc-todo-h .act .add{color:var(--lav)}
|
||
.nuc-cockpit .nuc-todo-h .act .triaged{display:inline-flex;align-items:center;gap:4px;color:var(--lav)}
|
||
.nuc-cockpit .nuc-todo-h .act .triaged svg{width:13px;height:13px}
|
||
|
||
/* to-do inbox grouped by project: header (folder + name + count) over a card
|
||
of idea rows; each triaged row leads with a severity badge (TodoGroupView) */
|
||
.nuc-cockpit .nuc-tg{margin-top:11px}
|
||
.nuc-cockpit .nuc-tg-head{display:flex;align-items:center;gap:6px;margin-bottom:5px}
|
||
.nuc-cockpit .nuc-tg-head svg{width:13px;height:13px;color:var(--tx2)}
|
||
.nuc-cockpit .nuc-tg-head .pn{font-size:13px;font-weight:600;color:var(--tx)}
|
||
.nuc-cockpit .nuc-tg-head .cnt{font-size:10px;font-family:var(--mono);color:var(--tx2);background:rgba(0,0,0,.06);border-radius:999px;padding:1px 7px}
|
||
.nuc-cockpit .nuc-tg-card{background:var(--surface);border:1px solid var(--hair);border-radius:12px;overflow:hidden}
|
||
.nuc-cockpit .nuc-todo-row{display:flex;align-items:center;gap:10px;padding:9px 13px}
|
||
.nuc-cockpit .nuc-todo-row .ico{flex:1;min-width:0}
|
||
.nuc-cockpit .nuc-todo-row .ico .t{font-size:13px;color:var(--tx)}
|
||
.nuc-cockpit .nuc-todo-div{height:1px;background:var(--hair);margin:0 13px}
|
||
|
||
/* triage badge — classic/urgency labels (Critical/High/Medium/Low): a hued
|
||
dot in a tinted capsule, the word in secondary (TriageBadge, encouraging=off) */
|
||
.nuc-cockpit .tri{display:inline-flex;align-items:center;gap:5px;flex:none;font-size:10.5px;font-weight:600;color:var(--tx2);padding:3px 8px;border-radius:999px;white-space:nowrap}
|
||
.nuc-cockpit .tri .d{width:7px;height:7px;border-radius:50%;flex:none}
|
||
.nuc-cockpit .tri-crit{background:color-mix(in srgb,var(--red) 14%,transparent);border:1px solid color-mix(in srgb,var(--red) 35%,transparent)}
|
||
.nuc-cockpit .tri-crit .d{background:var(--red)}
|
||
.nuc-cockpit .tri-high{background:color-mix(in srgb,#f1872f 14%,transparent);border:1px solid color-mix(in srgb,#f1872f 35%,transparent)}
|
||
.nuc-cockpit .tri-high .d{background:#f1872f}
|
||
.nuc-cockpit .tri-med{background:color-mix(in srgb,#e3b324 16%,transparent);border:1px solid color-mix(in srgb,#e3b324 40%,transparent)}
|
||
.nuc-cockpit .tri-med .d{background:#e3b324}
|
||
.nuc-cockpit .tri-low{background:color-mix(in srgb,#9a9aa2 16%,transparent);border:1px solid color-mix(in srgb,#9a9aa2 40%,transparent)}
|
||
.nuc-cockpit .tri-low .d{background:#9a9aa2}
|
||
|
||
/* Dispatch: .borderedProminent pinned to .tint(.gray) (TodoView) — a gray filled
|
||
button with white text (systemGray ≈ #8e8e93 in light mode), not the accent. */
|
||
.nuc-cockpit .nuc-dispatch{
|
||
display:inline-flex;align-items:center;gap:6px;flex:none;
|
||
background:#8e8e93;color:#fff;border-radius:8px;padding:6px 11px;font-size:12px;font-weight:600;
|
||
}
|
||
|
||
/* ---- chat bar (composer) ---- */
|
||
.nuc-cockpit .nuc-divider{height:1px;background:var(--hair)}
|
||
.nuc-cockpit .nuc-chatbar{padding:9px 14px 10px;display:flex;flex-direction:column;gap:7px;flex:none}
|
||
.nuc-cockpit .nuc-chiprow{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx2)}
|
||
.nuc-cockpit .nuc-chip{display:inline-flex;align-items:center;gap:5px;background:var(--surface);border:1px solid var(--hair);border-radius:7px;padding:4px 9px;color:var(--tx)}
|
||
.nuc-cockpit .nuc-chip svg{width:12px;height:12px;color:var(--tx2)}
|
||
.nuc-cockpit .nuc-chip .chev{color:var(--tx3)}
|
||
.nuc-cockpit .nuc-statuspill{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tx2)}
|
||
.nuc-cockpit .nuc-statuspill .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
|
||
.nuc-cockpit .nuc-field{
|
||
display:flex;align-items:center;gap:10px;
|
||
background:var(--field);border-radius:9px;padding:9px 12px;
|
||
/* persistent lavender ring — the Nucleic Control cue (HomeView composer) */
|
||
box-shadow:0 0 0 1px color-mix(in srgb,var(--lav) 55%, transparent);
|
||
}
|
||
.nuc-cockpit .nuc-field .ph{flex:1;color:var(--tx3);font-size:13px}
|
||
.nuc-cockpit .nuc-field .send{color:var(--tx2)}
|
||
.nuc-cockpit .nuc-ctrls{display:flex;align-items:center;gap:8px}
|
||
.nuc-cockpit .nuc-pill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--hair);border-radius:7px;padding:4px 9px;font-size:12px;color:var(--tx2)}
|
||
.nuc-cockpit .nuc-pill svg{width:12px;height:12px}
|
||
.nuc-cockpit .nuc-pill.accent{color:var(--lav);border-color:color-mix(in srgb,var(--lav) 45%,transparent)}
|
||
.nuc-cockpit .nuc-pill.right{margin-left:auto}
|
||
.nuc-cockpit .nuc-pill .chev{color:var(--tx3)}
|
||
|
||
/* ---- responsive ---- */
|
||
@media (max-width:860px){
|
||
/* single column: drop the sidebar and let the window grow to its natural height —
|
||
the page scrolls, so no internal scroll/clip is wanted here */
|
||
.nuc-cockpit .nuc-body{grid-template-columns:1fr;height:auto}
|
||
.nuc-cockpit .nuc-side{display:none}
|
||
.nuc-cockpit .nuc-scroll{overflow:visible}
|
||
}
|
||
@media (max-width:680px){
|
||
.nuc-cockpit .nuc-dash{grid-template-columns:1fr;gap:16px}
|
||
.nuc-cockpit .nuc-tiles{grid-template-columns:repeat(3,1fr)}
|
||
.nuc-cockpit .nuc-tile:nth-child(4),.nuc-cockpit .nuc-tile:nth-child(5){display:none}
|
||
.nuc-cockpit .nuc-grid i{width:13px;height:13px}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body style="margin:0;background:#faf7f3;background-image:radial-gradient(#e6ded4 1px,transparent 1px);background-size:26px 26px;background-position:-13px -13px;padding:40px 24px;font-family:'Space Grotesk',-apple-system,sans-serif;">
|
||
<div style="max-width:1120px;margin:0 auto;">
|
||
|
||
<!-- ===== COPY FROM HERE: cockpit markup ====================================== -->
|
||
<div class="nuc-cockpit" aria-label="The Nucleic cockpit — home dashboard with the Control panel open">
|
||
|
||
<!-- title bar -->
|
||
<div class="nuc-titlebar">
|
||
<span class="nuc-lights"><i></i><i></i><i></i></span>
|
||
<span class="nuc-tbar">
|
||
<!-- Toggle Sidebar (sidebar.leading) -->
|
||
<span class="nuc-tbtn" title="Toggle Sidebar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="4.5" width="18" height="15" rx="2.5"/><path d="M9 4.5v15"/></svg></span>
|
||
<!-- Home (house) — back to the dashboard -->
|
||
<span class="nuc-tbtn" title="Home"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 11.5 12 4l8.5 7.5"/><path d="M5.5 10v9h13v-9"/></svg></span>
|
||
<!-- Add Project (folder.badge.plus) -->
|
||
<span class="nuc-tbtn" title="Add Project"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7a2 2 0 0 1 2-2h3.5l2 2H19a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M12 10.5v5M9.5 13h5"/></svg></span>
|
||
</span>
|
||
<span class="nuc-wtitle">Nucleic</span>
|
||
</div>
|
||
|
||
<div class="nuc-body">
|
||
|
||
<!-- ===================== SIDEBAR (Control tab active) ================== -->
|
||
<aside class="nuc-side">
|
||
|
||
<!-- mode switcher -->
|
||
<div class="nuc-switch">
|
||
<span class="nuc-seg">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 1.8"/></svg>
|
||
Recents
|
||
</span>
|
||
<span class="nuc-seg">
|
||
<!-- sparkles (Apple Intelligence) — enlarged so the stars read clearly -->
|
||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10.5 1.8c.45 4.3 1.7 5.55 6 6-4.3.45-5.55 1.7-6 6-.45-4.3-1.7-5.55-6-6 4.3-.45 5.55-1.7 6-6z"/><path d="M18.5 12.5c.25 2.35.95 3.05 3.3 3.3-2.35.25-3.05.95-3.3 3.3-.25-2.35-.95-3.05-3.3-3.3 2.35-.25 3.05-.95 3.3-3.3z"/></svg>
|
||
Queue
|
||
</span>
|
||
<span class="nuc-seg on">
|
||
<!-- atom — the Control glyph, same mark Control projects carry -->
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="1.7" fill="currentColor" stroke="none"/><ellipse cx="12" cy="12" rx="10" ry="4.2"/><ellipse cx="12" cy="12" rx="10" ry="4.2" transform="rotate(60 12 12)"/><ellipse cx="12" cy="12" rx="10" ry="4.2" transform="rotate(120 12 12)"/></svg>
|
||
Control
|
||
</span>
|
||
</div>
|
||
|
||
<!-- pane header: atom accent + one-line health rollup + Release All -->
|
||
<div class="nuc-pane-head">
|
||
<div class="nuc-pane-row">
|
||
<svg class="nuc-acc" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="1.7" fill="currentColor" stroke="none"/><ellipse cx="12" cy="12" rx="10" ry="4.2"/><ellipse cx="12" cy="12" rx="10" ry="4.2" transform="rotate(60 12 12)"/><ellipse cx="12" cy="12" rx="10" ry="4.2" transform="rotate(120 12 12)"/></svg>
|
||
<span class="nuc-sum">Container running · 2 holding 1 file · 1 shipping</span>
|
||
<span class="nuc-relall">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 7-2.6"/></svg>
|
||
Release All
|
||
</span>
|
||
</div>
|
||
<div class="nuc-rule"></div>
|
||
</div>
|
||
|
||
<div class="nuc-pane-body">
|
||
|
||
<!-- Container -->
|
||
<div>
|
||
<div class="nuc-sec-t">Container</div>
|
||
<div class="nuc-crow">
|
||
<span class="nuc-dot green"></span>
|
||
<span class="nuc-ct"><div class="nm">Shared</div><div class="sub">nucleic-control-shared</div></span>
|
||
<span class="nuc-trail">4 active</span>
|
||
</div>
|
||
<div class="nuc-meter"><span class="k">CPU</span><span class="trk"><i style="width:23%;background:var(--green)"></i></span><span class="pct">23%</span></div>
|
||
<div class="nuc-meter"><span class="k">RAM</span><span class="trk"><i style="width:16%;background:var(--green)"></i></span><span class="pct">16%</span></div>
|
||
</div>
|
||
|
||
<!-- Autoship -->
|
||
<div>
|
||
<div class="nuc-sec-t">Autoship</div>
|
||
<div class="nuc-irow">
|
||
<span class="gl tint-tx2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 7v10l9 4 9-4V7M12 11v10"/></svg></span>
|
||
<span class="it"><div class="t">Refine composer glow</div><div class="s">Armed → nucleic/trunk</div></span>
|
||
</div>
|
||
<div class="nuc-irow">
|
||
<span class="gl tint-amber"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 1.8"/></svg></span>
|
||
<span class="it"><div class="t">Display version info</div><div class="s">Next to ship → nucleic/trunk</div></span>
|
||
</div>
|
||
<div class="nuc-irow">
|
||
<span class="gl tint-lav"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M7 4v7a5 5 0 0 0 5 5h5"/><circle cx="7" cy="4" r="2"/><circle cx="17" cy="16" r="2"/></svg></span>
|
||
<span class="it"><div class="t">Generate concept content</div><div class="s">Merging → nucleic/trunk…</div></span>
|
||
</div>
|
||
<div class="nuc-irow">
|
||
<span class="gl tint-green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 2.6l2.1 1.6 2.6.1.8 2.5 2.2 1.5-.9 2.5.9 2.5-2.2 1.5-.8 2.5-2.6.1L12 21.4l-2.1-1.6-2.6-.1-.8-2.5-2.2-1.5.9-2.5-.9-2.5 2.2-1.5.8-2.5 2.6-.1z"/><path d="M9 12l2 2 4-4"/></svg></span>
|
||
<span class="it"><div class="t">Image file review</div><div class="s">Shipped → nucleic/trunk · 4f3bf3e</div></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- File locks -->
|
||
<div>
|
||
<div class="nuc-sec-t">File locks</div>
|
||
<div class="nuc-lrow">
|
||
<span class="gl tint-green"><svg viewBox="0 0 24 24" fill="currentColor"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4" fill="none" stroke="currentColor" stroke-width="2"/></svg></span>
|
||
<span class="it"><div class="t">AppTheme.swift</div><div class="s">Refine composer glow</div></span>
|
||
<span class="nuc-release">Release</span>
|
||
</div>
|
||
<div class="nuc-lrow wait">
|
||
<span class="gl tint-amber"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 3h12M6 21h12"/><path d="M8 3c0 4 8 5.5 8 9s-8 5-8 9M16 3c0 4-8 5.5-8 9s8 5 8 9"/></svg></span>
|
||
<span class="it"><div class="t">AppTheme.swift</div><div class="s">Tune sidebar accents</div></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Activity (git-interceptor feed) -->
|
||
<div>
|
||
<div class="nuc-sec-t">Activity</div>
|
||
<div class="nuc-irow">
|
||
<span class="gl tint-tx2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M7 4v7a5 5 0 0 0 5 5h5"/><circle cx="7" cy="4" r="2"/><circle cx="17" cy="16" r="2"/></svg></span>
|
||
<span class="it"><div class="t">Merge → nucleic/trunk</div><div class="s">Generate concept content</div></span>
|
||
<span class="when">2m</span>
|
||
</div>
|
||
<div class="nuc-irow">
|
||
<span class="gl tint-tx2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="3"/><path d="M3 12h6M15 12h6"/></svg></span>
|
||
<span class="it"><div class="t">Commit · 3 files</div><div class="s">Image file review</div></span>
|
||
<span class="when">8m</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- project tree: the always-present per-project chat list below the pane -->
|
||
<div class="nuc-tree">
|
||
<div class="nuc-proj">
|
||
<span class="pname">nucleic</span>
|
||
<!-- atom (Control) + infinity (nvrsion) badges + open chevron -->
|
||
<svg class="lav" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="12" r="1.7" fill="currentColor" stroke="none"/><ellipse cx="12" cy="12" rx="10" ry="4.2"/><ellipse cx="12" cy="12" rx="10" ry="4.2" transform="rotate(60 12 12)"/><ellipse cx="12" cy="12" rx="10" ry="4.2" transform="rotate(120 12 12)"/></svg>
|
||
<svg class="lav" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12c0-2 1.5-3.4 3.5-3.4S12 10 12 12s1.5 3.4 3.5 3.4S19 14 19 12s-1.5-3.4-3.5-3.4S12 10 12 12s-1.5 3.4-3.5 3.4S5 14 5 12z"/></svg>
|
||
<svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M9 6l6 6-6 6"/></svg>
|
||
<span class="sp"></span>
|
||
<!-- nvrsion "Integrate" (promote trunk → branch) -->
|
||
<svg class="integrate" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M5 4h14M12 8v12M12 8l-4 4M12 8l4 4"/></svg>
|
||
</div>
|
||
|
||
<div class="nuc-srow sel">
|
||
<span class="sdot" style="background:var(--blue)"></span>
|
||
<span class="sc">
|
||
<div class="st">Refine composer glow</div>
|
||
<div class="ss">Working<span class="b" style="color:var(--lav)"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M13 2 4 14h6l-1 8 9-12h-6z"/></svg></span></div>
|
||
</span>
|
||
<span class="diff">+124 −18</span>
|
||
</div>
|
||
|
||
<div class="nuc-srow">
|
||
<span class="sdot" style="background:var(--blue)"></span>
|
||
<span class="sc">
|
||
<div class="st">Generate concept content</div>
|
||
<div class="ss">Working<span class="b" style="color:var(--lav)"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M13 2 4 14h6l-1 8 9-12h-6z"/></svg></span><span class="b" style="color:var(--gold)"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 17.5V6l9-1.8v10" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="6.5" cy="17.5" r="2.5"/><circle cx="15.5" cy="15.7" r="2.5"/></svg></span></div>
|
||
</span>
|
||
<span class="diff">+312 −87</span>
|
||
</div>
|
||
|
||
<div class="nuc-srow">
|
||
<span class="sdot" style="background:var(--amber)"></span>
|
||
<span class="sc">
|
||
<div class="st">Display version info</div>
|
||
<div class="ss">Awaiting approval</div>
|
||
</span>
|
||
<span class="pause"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="12" r="9"/><path d="M10 9.5v5M14 9.5v5"/></svg></span>
|
||
</div>
|
||
|
||
<div class="nuc-srow">
|
||
<span class="sdot" style="background:var(--green)"></span>
|
||
<span class="sc">
|
||
<div class="st unseen">Image file review</div>
|
||
<div class="ss">Done<span class="b" style="color:var(--lav)"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M13 2 4 14h6l-1 8 9-12h-6z"/></svg></span></div>
|
||
</span>
|
||
<span class="diff">+40 −5</span>
|
||
<span class="udot"></span>
|
||
</div>
|
||
|
||
<div class="nuc-srow">
|
||
<span class="sglyph" style="color:var(--amber)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 3h12M6 21h12"/><path d="M8 3c0 4 8 5.5 8 9s-8 5-8 9M16 3c0 4-8 5.5-8 9s8 5 8 9"/></svg></span>
|
||
<span class="sc">
|
||
<div class="st">Tune sidebar accents</div>
|
||
<div class="ss">Waiting for access</div>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ===================== MAIN / HOME DASHBOARD ======================== -->
|
||
<div class="nuc-main">
|
||
<div class="nuc-scroll">
|
||
|
||
<!-- greeting + streak -->
|
||
<div class="nuc-hi">
|
||
<div>
|
||
<h1>Hi, Andrew</h1>
|
||
<p class="greet">21 active of 21 chats across 4 projects.</p>
|
||
</div>
|
||
<span class="nuc-streak">
|
||
<svg class="bolt" width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M13 2 4 14h6l-1 8 9-12h-6z"/></svg>
|
||
<span class="n">15</span><span class="lbl">day streak</span>
|
||
<span class="fz">
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M12 2v20M3.5 7l17 10M20.5 7l-17 10"/><path d="M12 6l2.2-2.2M12 6 9.8 3.8M12 18l2.2 2.2M12 18l-2.2 2.2"/></svg>
|
||
1
|
||
</span>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- activity grid + usage -->
|
||
<div class="nuc-dash">
|
||
<div>
|
||
<div class="nuc-h">Activity</div>
|
||
<div class="nuc-grid" aria-hidden="true"><!-- cells injected by the scoped script --></div>
|
||
<div class="nuc-legend">
|
||
<span>Less</span>
|
||
<i style="background:var(--c-l0)"></i><i style="background:var(--c-l1)"></i><i style="background:var(--c-l2)"></i><i style="background:var(--c-l3)"></i><i style="background:var(--c-l4)"></i>
|
||
<span>More</span>
|
||
<span class="gap"></span>
|
||
<i style="background:var(--frozen)"></i><span>Frozen</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nuc-card">
|
||
<div class="nuc-h"><svg class="ic" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M4 15a8 8 0 1 1 16 0"/><path d="M12 14l4-3.5"/></svg>Usage</div>
|
||
<div class="nuc-uwin">
|
||
<div class="top">
|
||
<svg class="ic" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 1.8"/></svg>
|
||
<span class="ulbl">5-hour limit</span>
|
||
<span class="up" style="color:var(--usagebar)">41%</span>
|
||
</div>
|
||
<div class="nuc-ubar"><i style="width:41%;background:var(--usagebar)"></i></div>
|
||
<div class="nuc-ucap">Resets in 2h 14m</div>
|
||
</div>
|
||
<div class="nuc-uwin">
|
||
<div class="top">
|
||
<svg class="ic" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3.5" y="5" width="17" height="15" rx="2"/><path d="M3.5 9h17M8 3v4M16 3v4"/></svg>
|
||
<span class="ulbl">Weekly limit</span>
|
||
<span class="up" style="color:var(--amber)">78%</span>
|
||
</div>
|
||
<div class="nuc-ubar"><i style="width:78%;background:var(--amber)"></i></div>
|
||
<div class="nuc-ucap">Resets Sunday</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- stat cards -->
|
||
<div class="nuc-tiles">
|
||
<div class="nuc-tile"><svg class="ic" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 7a2 2 0 0 1 2-2h3.5l2 2H19a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg><div class="n">4</div><div class="l">Projects</div></div>
|
||
<div class="nuc-tile"><svg class="ic" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M4 5h16v10H9l-4 4z"/></svg><div class="n">21</div><div class="l">Chats</div></div>
|
||
<div class="nuc-tile"><svg class="ic" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2 4 14h6l-1 8 9-12h-6z"/></svg><div class="n">21</div><div class="l">Active</div></div>
|
||
<div class="nuc-tile"><svg class="ic" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M21 3 10 14M21 3l-7 18-4-7-7-4z"/></svg><div class="n">749</div><div class="l">Messages</div></div>
|
||
<div class="nuc-tile"><svg class="ic" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M4 7h16M4 12h16M4 17h11"/></svg><div class="n">1.7B</div><div class="l">Tokens</div></div>
|
||
</div>
|
||
|
||
<!-- to-do — grouped by project, triaged (urgency labels) -->
|
||
<div class="nuc-todo-h">
|
||
<span class="h">To-Do</span>
|
||
<span class="act">
|
||
<span class="triaged"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M8.5 12.2l2.4 2.4 4.6-4.8"/></svg>Triaged</span>
|
||
<span class="add">+ Add idea</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="nuc-tg">
|
||
<div class="nuc-tg-head">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 7a2 2 0 0 1 2-2h3.5l2 2H19a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
|
||
<span class="pn">nucleic</span><span class="cnt">2</span>
|
||
</div>
|
||
<div class="nuc-tg-card">
|
||
<div class="nuc-todo-row">
|
||
<span class="tri tri-crit"><span class="d"></span>Critical</span>
|
||
<span class="ico"><div class="t">Enable multi-account support with project-specific locks.</div></span>
|
||
<span class="nuc-dispatch"><svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M21 3 3 10.5l7 2.5 2.5 7z"/></svg>Dispatch</span>
|
||
</div>
|
||
<div class="nuc-todo-div"></div>
|
||
<div class="nuc-todo-row">
|
||
<span class="tri tri-high"><span class="d"></span>High</span>
|
||
<span class="ico"><div class="t">Add fade-in swipe animation to LLM-generated elements.</div></span>
|
||
<span class="nuc-dispatch"><svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M21 3 3 10.5l7 2.5 2.5 7z"/></svg>Dispatch</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nuc-tg">
|
||
<div class="nuc-tg-head">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 7a2 2 0 0 1 2-2h3.5l2 2H19a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
|
||
<span class="pn">website</span><span class="cnt">1</span>
|
||
</div>
|
||
<div class="nuc-tg-card">
|
||
<div class="nuc-todo-row">
|
||
<span class="tri tri-med"><span class="d"></span>Medium</span>
|
||
<span class="ico"><div class="t">Tighten hero spacing at the mobile breakpoint.</div></span>
|
||
<span class="nuc-dispatch"><svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M21 3 3 10.5l7 2.5 2.5 7z"/></svg>Dispatch</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- chat bar -->
|
||
<div class="nuc-divider"></div>
|
||
<div class="nuc-chatbar">
|
||
<div class="nuc-chiprow">
|
||
<span class="nuc-chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 7a2 2 0 0 1 2-2h3.5l2 2H19a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>nucleic<span class="chev">▾</span></span>
|
||
<span class="nuc-chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="6" cy="6" r="2"/><circle cx="6" cy="18" r="2"/><circle cx="18" cy="9" r="2"/><path d="M6 8v8M8 6h6a4 4 0 0 1 4 4v.5"/></svg>dev<span class="chev">▾</span></span>
|
||
<span class="nuc-statuspill"><span class="dot"></span>All providers operational</span>
|
||
</div>
|
||
<div class="nuc-field">
|
||
<span class="ph">Start a new chat…</span>
|
||
<svg class="send" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M5 12h13M13 6l6 6-6 6"/></svg>
|
||
</div>
|
||
<div class="nuc-ctrls">
|
||
<!-- Auto is locked on for Control projects (lavender) -->
|
||
<span class="nuc-pill accent"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M13 2 4 14h6l-1 8 9-12h-6z"/></svg>Auto</span>
|
||
<span class="nuc-pill accent"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 7v10l9 4 9-4V7"/></svg>Ship</span>
|
||
<span class="nuc-pill right">Model: Opus 4.8 <span style="color:var(--tx3)">1M</span><span class="chev">▾</span></span>
|
||
<span class="nuc-pill">Effort: xhigh<span class="chev">▾</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<!-- ===== COPY TO HERE ======================================================= -->
|
||
|
||
<p style="text-align:center;margin:16px 0 0;font-family:'JetBrains Mono',monospace;font-size:12px;color:#8b8590">The Nucleic cockpit — Control panel open over the project's chats. Illustrative.</p>
|
||
</div>
|
||
|
||
<!-- ===== COPY: scoped script that sizes the activity grid to its column ===== -->
|
||
<script data-nuc>
|
||
(function () {
|
||
// Fill each activity grid with as many weekly columns as its column width
|
||
// allows — mirroring the app's GeometryReader (weeks = width/(cell+gap),
|
||
// min 16). Deterministic (seeded) so the pattern is stable; recent weeks
|
||
// (right) trend busier, with two streak-freeze cells in blue.
|
||
function build(grid) {
|
||
var probe = document.createElement('i');
|
||
grid.appendChild(probe);
|
||
var cell = probe.getBoundingClientRect().width || 15;
|
||
grid.removeChild(probe);
|
||
var gap = 3, rows = 7;
|
||
var avail = grid.clientWidth || grid.parentElement.clientWidth || 320;
|
||
var weeks = Math.max(16, Math.floor((avail + gap) / (cell + gap)));
|
||
grid.textContent = '';
|
||
var seed = 20260629;
|
||
function rnd() { seed = (seed * 1103515245 + 12345) & 0x7fffffff; return seed / 0x7fffffff; }
|
||
var frozen = {};
|
||
frozen[(weeks - 9) + ',2'] = 1;
|
||
frozen[(weeks - 4) + ',4'] = 1;
|
||
for (var c = 0; c < weeks; c++) {
|
||
var col = document.createElement('div');
|
||
col.className = 'col';
|
||
var recency = c / (weeks - 1);
|
||
for (var r = 0; r < rows; r++) {
|
||
var i = document.createElement('i');
|
||
if (frozen[c + ',' + r]) {
|
||
i.className = 'fz';
|
||
} else {
|
||
var p = rnd() * 0.55 + recency * 0.6;
|
||
var lvl = p < 0.28 ? 0 : p < 0.5 ? 1 : p < 0.72 ? 2 : p < 0.9 ? 3 : 4;
|
||
if (lvl) i.className = 'l' + lvl;
|
||
}
|
||
col.appendChild(i);
|
||
}
|
||
grid.appendChild(col);
|
||
}
|
||
}
|
||
function fill() { document.querySelectorAll('.nuc-cockpit .nuc-grid').forEach(build); }
|
||
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', fill);
|
||
else fill();
|
||
var t; window.addEventListener('resize', function () { clearTimeout(t); t = setTimeout(fill, 150); });
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|