Skip to content

Commit 18b9452

Browse files
kateebonnerkateebonner
authored
Merge pull request #57 from harmoniqs/kate/amicode-entity-modals
amicode: formulation equations + consistent entity modals
2 parents 16d096d + 4e2e24a commit 18b9452

9 files changed

Lines changed: 449 additions & 702 deletions

File tree

‎packages/app/src/components/debug-bar.tsx‎

Lines changed: 0 additions & 443 deletions
This file was deleted.

‎packages/app/src/pages/layout.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,6 @@ import { SessionRouteKey, SessionStateKey } from "@/utils/server-scope"
6161
import { useDialog } from "@opencode-ai/ui/context/dialog"
6262
import { useCommand, type CommandOption } from "@/context/command"
6363
import { ConstrainDragXAxis, getDraggableId } from "@/utils/solid-dnd"
64-
import { DebugBar } from "@/components/debug-bar"
6564
import { Titlebar, type TitlebarUpdate } from "@/components/titlebar"
6665
import { useDirectoryPicker } from "@/components/directory-picker"
6766
import { ServerConnection, useServer } from "@/context/server"
@@ -2286,7 +2285,6 @@ export default function Layout(props: ParentProps) {
22862285
{props.children}
22872286
</Show>
22882287
</main>
2289-
{import.meta.env.DEV && <DebugBar />}
22902288
<ToastRegion v2={newDesign()} />
22912289
</div>
22922290
}
@@ -2438,7 +2436,6 @@ export default function Layout(props: ParentProps) {
24382436
</div>
24392437
</div>
24402438
</div>
2441-
{import.meta.env.DEV && <DebugBar />}
24422439
</div>
24432440
<ToastRegion v2={newDesign()} />
24442441
</div>

‎packages/ui/src/amicode/amicode.css‎

Lines changed: 64 additions & 162 deletions
Original file line numberDiff line numberDiff line change
@@ -305,20 +305,12 @@
305305
border: 1px solid var(--v2-border-border-muted);
306306
overflow-x: auto;
307307
}
308-
[data-component="amicode-entity-view"] .amc-ev-formula-label {
309-
font-family: var(--font-family-mono, ui-monospace, monospace);
310-
font-size: 9px;
311-
letter-spacing: 0.14em;
312-
text-transform: uppercase;
313-
color: var(--v2-text-text-faint);
314-
margin-bottom: 10px;
315-
}
316308

317309
[data-component="amicode-entity-view"] .amc-ev-sec {
318310
display: flex;
319311
align-items: center;
320312
gap: 10px;
321-
margin: 20px 4px 8px;
313+
margin: 12px 4px 8px;
322314
font-family: var(--font-family-mono, ui-monospace, monospace);
323315
font-size: 9px;
324316
letter-spacing: 0.16em;
@@ -331,29 +323,36 @@
331323
height: 1px;
332324
background: var(--v2-border-border-muted);
333325
}
326+
/* a section header that LEADS a modal (Run, Pulse, system-without-identity)
327+
shouldn't carry the full inter-section top gap — trim it so the dialog doesn't
328+
open with dead space. Only applies when the header is the first element. */
329+
[data-component="amicode-entity-view"] .amc-ev-sec:first-child { margin-top: 4px; }
334330

335331
[data-component="amicode-entity-view"] .amc-ev-group {
336-
margin: 8px 4px 2px;
332+
margin: 8px 4px 4px;
337333
font-size: 11px;
338334
font-weight: 600;
339335
color: var(--v2-text-text-muted);
340336
}
341337

342338
[data-component="amicode-entity-view"] .amc-field {
343339
display: grid;
344-
grid-template-columns: 160px 1fr auto;
340+
grid-template-columns: 10rem 1fr auto;
345341
align-items: baseline;
346-
gap: 14px;
347-
padding: 8px 8px 8px 4px;
342+
gap: 16px;
343+
padding: 4px 8px 4px 4px;
348344
border-radius: var(--radius-md);
349345
transition: background 0.12s ease;
350346
}
351347
[data-component="amicode-entity-view"] .amc-field:hover { background: var(--v2-background-bg-layer-01); }
352348
[data-component="amicode-entity-view"] .amc-field .amc-fk { min-width: 0; }
349+
/* match the shared entity row: an uppercase micro-label, wire key as faint sub */
353350
[data-component="amicode-entity-view"] .amc-field .amc-fk .name {
354-
font-size: 13px;
355-
font-weight: 560;
356-
color: var(--v2-text-text-base);
351+
font-size: 0.68rem;
352+
font-weight: 500;
353+
text-transform: uppercase;
354+
letter-spacing: 0.06em;
355+
color: var(--v2-text-text-muted);
357356
}
358357
[data-component="amicode-entity-view"] .amc-field .amc-fk .raw {
359358
display: block;
@@ -363,10 +362,9 @@
363362
margin-top: 1px;
364363
}
365364
[data-component="amicode-entity-view"] .amc-field .amc-fv {
366-
font-family: var(--font-family-mono, ui-monospace, monospace);
367-
font-size: 13px;
365+
font-size: 0.82rem;
368366
color: var(--v2-text-text-base);
369-
text-align: right;
367+
text-align: left;
370368
font-variant-numeric: tabular-nums;
371369
word-break: break-word;
372370
min-width: 0;
@@ -545,12 +543,6 @@
545543
font-weight: 600;
546544
}
547545

548-
[data-component="amicode-entity-view"] .amc-ev-empty {
549-
font-size: 13px;
550-
color: var(--v2-text-text-muted);
551-
padding: 4px;
552-
}
553-
554546
/* error + skeleton states */
555547
[data-component="amicode-entity-view"] .amc-ev-error {
556548
display: flex;
@@ -728,38 +720,11 @@
728720
}
729721

730722
/* ---- System hero (spec §6.1): identity + schematic + table + Hamiltonian ---- */
731-
[data-component="amicode-system-view"] { display: flex; flex-direction: column; gap: 12px; }
732-
[data-component="amicode-system-view"] .amc-sys-identity {
733-
font-size: 13px;
734-
font-weight: 550;
735-
color: var(--v2-text-text-base);
736-
padding: 2px 4px 0;
737-
}
738-
[data-component="amicode-system-view"] .amc-schematic {
739-
display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 8px 4px;
740-
}
741-
[data-component="amicode-system-view"] .amc-node {
742-
display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
743-
padding: 6px 12px; border-radius: var(--radius-md);
744-
border: 1px solid var(--v2-border-border-base);
745-
background: var(--v2-background-bg-layer-01);
746-
}
747-
[data-component="amicode-system-view"] .amc-node-id { font-weight: 600; color: var(--v2-text-text-base); }
748-
[data-component="amicode-system-view"] .amc-node-lvl { font-size: 0.72rem; color: var(--v2-text-text-muted); }
749-
[data-component="amicode-system-view"] .amc-edge {
750-
display: inline-flex; flex-direction: column; align-items: center; min-width: 40px; padding: 0 4px;
751-
}
752-
[data-component="amicode-system-view"] .amc-edge-line { color: var(--v2-border-border-base); line-height: 1; }
753-
[data-component="amicode-system-view"] .amc-edge-label {
754-
font-size: 0.7rem; letter-spacing: 0.02em; color: var(--v2-text-text-accent);
755-
}
756-
[data-component="amicode-system-view"] .amc-loose {
757-
display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.78rem; color: var(--v2-text-text-muted);
758-
}
723+
[data-component="amicode-system-view"] { display: flex; flex-direction: column; gap: 8px; }
759724
[data-component="amicode-system-view"] .amc-systbl { display: flex; flex-direction: column; }
760725
[data-component="amicode-system-view"] .amc-systbl-row {
761726
display: grid; grid-template-columns: 3rem 5rem auto 1fr; gap: 8px; align-items: baseline;
762-
padding: 4px 2px; border-top: 1px solid color-mix(in srgb, var(--v2-border-border-base) 55%, transparent);
727+
padding: 4px; border-top: 1px solid color-mix(in srgb, var(--v2-border-border-base) 55%, transparent);
763728
font-variant-numeric: tabular-nums;
764729
}
765730
[data-component="amicode-system-view"] .amc-systbl-row.amc-coupling { grid-template-columns: 8rem 5rem 1fr; }
@@ -768,37 +733,51 @@
768733
[data-component="amicode-system-view"] .amc-c-lvl { color: var(--v2-text-text-muted); font-size: 0.8rem; }
769734
[data-component="amicode-system-view"] .amc-c-params { color: var(--v2-text-text-base); font-size: 0.8rem; }
770735
[data-component="amicode-system-view"] .amc-ev-formula { margin-top: 4px; }
771-
[data-component="amicode-system-view"] .amc-ev-formula-label {
772-
font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--v2-text-text-muted); margin-bottom: 2px;
773-
}
774736

775737
/* ---- Formulation hero (spec §6.2): mode badges + objective + constraints ---- */
776738
[data-component="amicode-formulation-view"] { display: flex; flex-direction: column; gap: 8px; }
777-
[data-component="amicode-formulation-view"] .amc-modebar { display: flex; flex-wrap: wrap; gap: 6px; }
778-
[data-component="amicode-formulation-view"] .amc-badge {
739+
[data-component="amicode-entity-view"] .amc-modebar { display: flex; flex-wrap: wrap; gap: 6px; }
740+
[data-component="amicode-entity-view"] .amc-badge {
779741
display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 8px; border-radius: var(--radius-full);
780742
border: 1px solid var(--v2-border-border-base); background: var(--v2-background-bg-layer-01);
781-
font-size: 0.76rem;
782-
}
783-
[data-component="amicode-formulation-view"] .amc-badge.active {
784-
border-color: var(--accent-edge);
785-
background: var(--accent-fill-soft);
743+
color: var(--v2-text-text-base); font-size: 0.76rem; line-height: 1.35;
786744
}
787-
[data-component="amicode-formulation-view"] .amc-badge .k { color: var(--v2-text-text-muted); }
788-
[data-component="amicode-formulation-view"] .amc-badge .v { color: var(--v2-text-text-base); font-weight: 600; }
789-
[data-component="amicode-formulation-view"] .amc-obj { display: flex; flex-direction: column; gap: 4px; }
790-
[data-component="amicode-formulation-view"] .amc-obj-primary { display: flex; align-items: baseline; gap: 8px; }
791-
[data-component="amicode-formulation-view"] .amc-obj-name { color: var(--v2-text-text-base); font-weight: 600; }
792-
[data-component="amicode-formulation-view"] .amc-obj-tag {
793-
font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--v2-text-text-muted);
794-
}
795-
[data-component="amicode-formulation-view"] .amc-obj-latex { margin: 2px 0; }
796-
[data-component="amicode-formulation-view"] .amc-obj-term,
797-
[data-component="amicode-formulation-view"] .amc-constraint {
745+
[data-component="amicode-entity-view"] .amc-badge .k { color: var(--v2-text-text-muted); }
746+
[data-component="amicode-entity-view"] .amc-badge .v { color: var(--v2-text-text-base); font-weight: 600; }
747+
[data-component="amicode-formulation-view"] .amc-obj { display: flex; flex-direction: column; gap: 8px; }
748+
[data-component="amicode-formulation-view"] .amc-constraints { display: flex; flex-direction: column; gap: 8px; }
749+
750+
/* ---- shared entity row primitive — used by formulation, system, run, device,
751+
calibration and the generic field table so every entity modal reads the same:
752+
a quiet uppercase micro-label in a fixed left column + value in the right
753+
column (an optional faint physics symbol / wire-key beside it). ---- */
754+
[data-component="amicode-entity-view"] .amc-term {
755+
display: flex; flex-direction: row; align-items: baseline; gap: 16px;
756+
}
757+
[data-component="amicode-entity-view"] .amc-term-head {
758+
flex: 0 0 10rem; min-width: 0; display: flex; flex-direction: column; gap: 1px;
759+
}
760+
[data-component="amicode-entity-view"] .amc-obj-name,
761+
[data-component="amicode-entity-view"] .amc-term-name {
762+
font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
763+
color: var(--v2-text-text-muted); font-variant-numeric: tabular-nums;
764+
}
765+
/* secondary annotation under a name (ensemble "M = 3", a wire key, …) */
766+
[data-component="amicode-entity-view"] .amc-term-sub {
767+
font-size: 0.62rem; color: var(--v2-text-text-faint); font-variant-numeric: tabular-nums;
768+
}
769+
/* value column — plain text/number, with an optional faint physics symbol */
770+
[data-component="amicode-entity-view"] .amc-term-val {
771+
flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 6px;
798772
font-size: 0.82rem; color: var(--v2-text-text-base); font-variant-numeric: tabular-nums;
799-
padding: 2px 0; border-top: 1px solid color-mix(in srgb, var(--v2-border-border-base) 45%, transparent);
773+
overflow-wrap: anywhere;
800774
}
801-
[data-component="amicode-formulation-view"] .amc-solve { font-size: 0.82rem; color: var(--v2-text-text-muted); font-variant-numeric: tabular-nums; }
775+
[data-component="amicode-entity-view"] .amc-term-sym { flex: none; font-size: 0.72rem; color: var(--v2-text-text-faint); }
776+
[data-component="amicode-entity-view"] .amc-term-val.is-unset { color: var(--v2-text-text-faint); font-style: italic; }
777+
778+
/* formulation-only: the KaTeX equation as the value (Solve is now mode badges) */
779+
[data-component="amicode-formulation-view"] .amc-obj-latex,
780+
[data-component="amicode-formulation-view"] .amc-term-latex { flex: 1 1 auto; min-width: 0; margin: 0; }
802781

803782
/* ---- overflow hardening: keep the entity-view dialog from bleeding past its
804783
width. Grid/flex children default to min-width:auto (content-based), so a long
@@ -813,15 +792,13 @@
813792
[data-component="amicode-entity-view"] .amc-event .summary .v { overflow-wrap: anywhere; min-width: 0; }
814793
[data-component="amicode-system-view"] .amc-systbl-row > * { min-width: 0; }
815794
[data-component="amicode-system-view"] .amc-c-params,
816-
[data-component="amicode-system-view"] .amc-loose,
817795
[data-component="amicode-formulation-view"] .amc-obj-latex,
818-
[data-component="amicode-formulation-view"] .amc-obj-term,
819-
[data-component="amicode-formulation-view"] .amc-constraint,
820-
[data-component="amicode-formulation-view"] .amc-solve { overflow-wrap: anywhere; min-width: 0; }
821-
[data-component="amicode-system-view"] .amc-schematic,
796+
[data-component="amicode-formulation-view"] .amc-term-latex,
797+
[data-component="amicode-formulation-view"] .amc-term-name { overflow-wrap: anywhere; min-width: 0; }
822798
[data-component="amicode-formulation-view"] .amc-modebar { max-width: 100%; }
823799
[data-component="amicode-system-view"] .amc-ev-formula,
824-
[data-component="amicode-formulation-view"] .amc-obj-latex { overflow-x: auto; }
800+
[data-component="amicode-formulation-view"] .amc-obj-latex,
801+
[data-component="amicode-formulation-view"] .amc-term-latex { overflow-x: auto; }
825802

826803
/* ---- Widget grid edit mode (spec T3.1/T2.6) ------------------------------
827804
Rebuilt for clarity: instead of a heavy row of buttons floating above each
@@ -1167,8 +1144,7 @@
11671144
[data-component="amicode-calibration-view"] {
11681145
display: flex;
11691146
flex-direction: column;
1170-
gap: 10px;
1171-
margin: 4px 4px 2px;
1147+
gap: 8px;
11721148
}
11731149

11741150
/* Run: big fidelity + status badge */
@@ -1198,16 +1174,6 @@
11981174
background: var(--v2-background-bg-layer-02);
11991175
color: var(--v2-text-text-muted);
12001176
}
1201-
[data-component="amicode-run-view"] .amc-run-sub {
1202-
display: flex;
1203-
align-items: center;
1204-
gap: 10px;
1205-
flex-wrap: wrap;
1206-
font-family: var(--font-family-mono, ui-monospace, monospace);
1207-
font-size: 11px;
1208-
color: var(--v2-text-text-muted);
1209-
}
1210-
12111177
/* verdict tones (shared across run status + device/calibration pills) */
12121178
[data-component="amicode-run-view"] .amc-run-status[data-tone="ok"],
12131179
[data-component="amicode-device-view"] .amc-vpill[data-tone="ok"],
@@ -1262,85 +1228,21 @@
12621228
[data-component="amicode-device-view"] .amc-device-links {
12631229
display: flex;
12641230
flex-direction: column;
1265-
gap: 4px;
1231+
gap: 8px;
12661232
}
1267-
[data-component="amicode-device-view"] .amc-device-link,
12681233
[data-component="amicode-calibration-view"] .amc-calib-source {
12691234
display: flex;
1270-
align-items: baseline;
1271-
gap: 10px;
1272-
font-size: 12px;
1273-
}
1274-
[data-component="amicode-device-view"] .amc-vk,
1275-
[data-component="amicode-calibration-view"] .amc-vk {
1276-
font-family: var(--font-family-mono, ui-monospace, monospace);
1277-
font-size: 9px;
1278-
letter-spacing: 0.12em;
1279-
text-transform: uppercase;
1280-
color: var(--v2-text-text-faint);
1281-
min-width: 3rem;
1282-
}
1283-
[data-component="amicode-device-view"] .amc-vv,
1284-
[data-component="amicode-calibration-view"] .amc-vv {
1285-
font-family: var(--font-family-mono, ui-monospace, monospace);
1286-
color: var(--v2-text-text-base);
1287-
overflow-wrap: anywhere;
1235+
flex-direction: column;
12881236
}
12891237
[data-component="amicode-device-view"] .amc-device-note {
12901238
font-size: 12px;
12911239
color: var(--v2-text-text-muted);
12921240
overflow-wrap: anywhere;
12931241
}
12941242

1295-
/* "Show all fields" toggle — mirrors the history toggle, as a standalone row */
1296-
[data-component="amicode-entity-view"] .amc-ev-fields-toggle {
1297-
align-self: flex-start;
1298-
margin: 16px 4px 0;
1299-
background: none;
1300-
border: none;
1301-
padding: 2px 4px;
1302-
font-size: 11.5px;
1303-
font-weight: 550;
1304-
color: var(--v2-text-text-accent);
1305-
cursor: pointer;
1306-
}
1307-
[data-component="amicode-entity-view"] .amc-ev-fields-toggle:hover { text-decoration: underline; }
1308-
[data-component="amicode-entity-view"] .amc-ev-fields-toggle:focus-visible {
1309-
outline: 1px solid var(--v2-icon-icon-accent);
1310-
outline-offset: 2px;
1311-
border-radius: var(--radius-sm);
1312-
}
1313-
13141243
/* ---- System physics spec (physics-forward System hero) --------------------- */
13151244
[data-component="amicode-system-view"] .amc-sys-physics {
13161245
display: flex;
13171246
flex-direction: column;
1318-
margin-top: 8px;
1319-
}
1320-
[data-component="amicode-system-view"] .amc-phys-row {
1321-
display: grid;
1322-
grid-template-columns: 8rem 1fr;
1323-
align-items: baseline;
1324-
gap: var(--space-3);
1325-
padding: var(--space-1) 4px;
1326-
font-size: 13px;
1327-
}
1328-
[data-component="amicode-system-view"] .amc-phys-row + .amc-phys-row {
1329-
border-top: 1px solid var(--v2-border-border-muted);
1330-
}
1331-
[data-component="amicode-system-view"] .amc-phys-key {
1332-
color: var(--v2-text-text-muted);
1333-
}
1334-
[data-component="amicode-system-view"] .amc-phys-sym {
1335-
font-family: var(--font-family-mono, ui-monospace, monospace);
1336-
color: var(--v2-text-text-faint);
1337-
}
1338-
[data-component="amicode-system-view"] .amc-phys-val {
1339-
font-family: var(--font-family-mono, ui-monospace, monospace);
1340-
color: var(--v2-text-text-base);
1341-
font-variant-numeric: tabular-nums;
1342-
}
1343-
[data-component="amicode-system-view"] .amc-phys-row.is-unset .amc-phys-val {
1344-
color: var(--v2-text-text-faint);
1345-
font-style: italic;
1247+
gap: 8px;
13461248
}

‎packages/ui/src/amicode/calibration-view.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,17 @@ export function CalibrationView(props: { verdict: CalibrationVerdict }) {
3636
</Show>
3737
<Show when={v().source}>
3838
{(src) => (
39-
<div class="amc-calib-source" data-slot="amicode-calibration-source">
40-
<span class="amc-vk">source</span>
41-
<span class="amc-vv">{src()}</span>
42-
</div>
39+
<>
40+
<div class="amc-ev-sec">Source</div>
41+
<div class="amc-calib-source" data-slot="amicode-calibration-source">
42+
<div class="amc-term">
43+
<div class="amc-term-head">
44+
<span class="amc-term-name">source</span>
45+
</div>
46+
<div class="amc-term-val">{src()}</div>
47+
</div>
48+
</div>
49+
</>
4350
)}
4451
</Show>
4552
</div>

0 commit comments

Comments
 (0)