@pat-lewczuk/cezar 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/web/index.html CHANGED
@@ -4,7 +4,7 @@
4
4
  <meta charset="utf-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1">
6
6
  <title>cezar</title>
7
- <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚡</text></svg>">
7
+ <link rel="icon" type="image/svg+xml" href="/open-mercato.svg">
8
8
  <!-- Theme before first paint — no flash. Falls back to dark. -->
9
9
  <script>document.documentElement.dataset.theme = localStorage.getItem('cez-theme') || 'dark';</script>
10
10
  <!-- Web fonts degrade quietly to system fonts when offline. -->
@@ -16,7 +16,7 @@
16
16
  <body>
17
17
  <aside id="sidebar">
18
18
  <div id="brand">
19
- <svg width="11" height="15" viewBox="0 0 24 30" fill="none" aria-hidden="true"><path d="M14 1L3 17h7l-2 12L20 12h-7l1-11z" fill="var(--accent)"/></svg>
19
+ <img src="/open-mercato.svg" alt="open-mercato" width="18" height="18" style="border-radius:5px;flex:none">
20
20
  <span class="brand-name">cezar</span>
21
21
  <span id="repo-chip" class="mono" hidden></span>
22
22
  </div>
@@ -44,7 +44,6 @@
44
44
  <div id="form-error" class="error-text" hidden></div>
45
45
  <input type="file" id="task-file" accept="image/*" multiple hidden>
46
46
  </form>
47
- <div id="plan-panel" hidden></div>
48
47
  </div>
49
48
 
50
49
  <nav id="tabs">
@@ -56,18 +55,22 @@
56
55
  <svg viewBox="0 0 24 24"><path d="M3 13h4l2 3h6l2-3h4M5 5h14l2 8v6H3v-6l2-8z"/></svg>
57
56
  Inbox <span id="inbox-badge" class="count-badge" hidden></span>
58
57
  </button>
59
- <button data-view="github">
60
- <svg viewBox="0 0 24 24"><path d="M6 4a2 2 0 100 4 2 2 0 000-4zM6 8v8M6 16a2 2 0 100 4 2 2 0 000-4zM18 4a2 2 0 100 4 2 2 0 000-4zM18 8c0 6-6 8-10 8"/></svg>
61
- GitHub
62
- </button>
63
58
  <button data-view="repo">
64
59
  <svg viewBox="0 0 24 24"><path d="M3 8a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8z"/></svg>
65
60
  Repo
66
61
  </button>
62
+ <button data-view="github">
63
+ <svg viewBox="0 0 24 24"><path d="M6 4a2 2 0 100 4 2 2 0 000-4zM6 8v8M6 16a2 2 0 100 4 2 2 0 000-4zM18 4a2 2 0 100 4 2 2 0 000-4zM18 8c0 6-6 8-10 8"/></svg>
64
+ GitHub
65
+ </button>
67
66
  <button data-view="skills">
68
67
  <svg viewBox="0 0 24 24"><path d="M12 3l2 5.5L19.5 10 14 12l-2 5.5L10 12l-5.5-2L10 8.5 12 3z"/></svg>
69
68
  Skills
70
69
  </button>
70
+ <button data-view="workflows">
71
+ <svg viewBox="0 0 24 24"><path d="M4 3.5h7v7H4zM13 13.5h7v7h-7zM7.5 10.5v2a2 2 0 002 2H13"/></svg>
72
+ Workflows
73
+ </button>
71
74
  </nav>
72
75
 
73
76
  <div id="run-list-wrap">
@@ -88,12 +91,17 @@
88
91
  </section>
89
92
  </section>
90
93
 
94
+ <section id="view-workflows" class="view" hidden></section>
91
95
  <section id="view-inbox" class="view scroll-view" hidden></section>
92
96
  <section id="view-github" class="view" hidden></section>
93
97
  <section id="view-repo" class="view scroll-view" hidden></section>
94
98
  <section id="view-skills" class="view" hidden></section>
95
99
  </main>
96
100
 
101
+ <!-- proposed chain (spec 008) — an overlay over the main area, roomy enough
102
+ to read full step prompts; the sidebar was too tight for it -->
103
+ <div id="plan-overlay" hidden><div id="plan-panel"></div></div>
104
+
97
105
  <script src="/app.js"></script>
98
106
  </body>
99
107
  </html>
@@ -0,0 +1,11 @@
1
+ <svg width="176" height="176" viewBox="0 0 176 176" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M0 24C0 10.7452 10.7452 0 24 0H152C165.255 0 176 10.7452 176 24V152C176 165.255 165.255 176 152 176H24C10.7452 176 0 165.255 0 152V24Z" fill="url(#paint0_linear_337_310)"/>
3
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M85.6802 33.9483C87.131 33.165 88.8788 33.1758 90.3296 33.9591L108.206 43.6446H108.195C110.132 44.6926 110.132 47.4755 108.195 48.5235L90.563 58.0821C88.9852 58.9394 87.9996 60.5904 87.9995 62.3897V82.9669L88.0103 82.9561L87.9995 82.9825C88.004 83.1917 88.09 85.451 89.7153 86.2481C91.0073 86.8832 92.6382 85.7823 92.6382 85.7823V85.7931L111.35 75.6534L111.339 75.6632C112.186 75.2081 113.214 75.2083 114.061 75.6632L135.909 87.4972C136.83 87.9946 137.402 88.9582 137.402 90.0059V115.452C137.402 116.5 136.83 116.405 135.909 116.902L116.92 127.191C116.657 127.335 116.385 127.451 116.113 127.541L108.481 131.891L89.2495 142.316C88.4765 142.74 87.5439 142.74 86.7603 142.316L67.5298 131.891L58.729 127.297L58.7349 127.294L41.2876 118.501C39.6357 117.675 38.5981 115.981 38.5981 114.129V91.213C38.5981 89.4136 39.5828 87.7618 41.1606 86.9044L60.7417 76.3097C62.3196 75.4523 63.3042 73.8005 63.3042 72.0011V48.8731C63.3042 47.0632 64.2998 45.4122 65.8882 44.5548L85.6802 33.9483ZM89.2173 89.254C87.5681 88.7974 85.6955 89.5707 85.4702 89.6681C85.4589 89.6743 85.4484 89.6824 85.437 89.6886L65.8667 100.295C64.2891 101.152 63.3042 102.803 63.3042 104.603V125.688C63.3042 125.838 63.2896 125.984 63.2642 126.124C63.2652 126.661 63.444 127.567 64.5327 128.101C65.3946 128.518 66.3513 128.101 66.9468 127.732C67.1141 127.57 67.3088 127.426 67.5298 127.307L86.7603 116.881C87.5333 116.458 88.4659 116.458 89.2495 116.881L108.48 127.308H108.481C111.423 127.588 112.408 125.563 112.706 124.624V103.386C112.706 102.338 112.134 101.375 111.212 100.877L92.6382 90.8106C92.525 90.7492 92.4192 90.6807 92.3188 90.6085C91.753 90.2807 90.5109 89.6123 89.2173 89.254Z" fill="#1B1B1B"/>
4
+ <defs>
5
+ <linearGradient id="paint0_linear_337_310" x1="179.177" y1="-54.654" x2="22.4367" y2="188.461" gradientUnits="userSpaceOnUse">
6
+ <stop offset="0.122322" stop-color="#B4F372"/>
7
+ <stop offset="0.583527" stop-color="#EEFB63"/>
8
+ <stop offset="1" stop-color="#BC9AFF"/>
9
+ </linearGradient>
10
+ </defs>
11
+ </svg>
package/web/style.css CHANGED
@@ -128,6 +128,18 @@ summary::-webkit-details-marker { display: none; }
128
128
  white-space: nowrap;
129
129
  }
130
130
  .btn-text:hover { background: var(--panel2); color: var(--text); }
131
+ .btn-text .bi, .btn-dark .bi {
132
+ width: 12px;
133
+ height: 12px;
134
+ margin-right: 6px;
135
+ vertical-align: -1.5px;
136
+ fill: none;
137
+ stroke: currentColor;
138
+ stroke-width: 1.8;
139
+ stroke-linecap: round;
140
+ stroke-linejoin: round;
141
+ }
142
+ .btn-text .bi-fill, .btn-dark .bi-fill { fill: currentColor; stroke: none; width: 11px; height: 11px; }
131
143
  .btn-text.danger { color: var(--red); }
132
144
  .btn-text:disabled { opacity: 0.45; cursor: default; }
133
145
 
@@ -382,6 +394,16 @@ summary::-webkit-details-marker { display: none; }
382
394
  .pill-menu .menu-item:hover { background: color-mix(in oklab, var(--text) 7%, transparent); }
383
395
  .pill-menu .mi-title { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text); }
384
396
  .pill-menu .mi-title .chk { width: 12px; flex: none; color: var(--accent); font-size: 11px; }
397
+ .pill-menu .mi-title .mi-ic {
398
+ width: 11px;
399
+ height: 11px;
400
+ flex: none;
401
+ fill: none;
402
+ stroke: var(--accent);
403
+ stroke-width: 1.8;
404
+ stroke-linejoin: round;
405
+ opacity: 0.9;
406
+ }
385
407
  .pill-menu .mi-desc {
386
408
  margin: 2px 0 0 19px;
387
409
  font-size: 11px;
@@ -443,44 +465,86 @@ summary::-webkit-details-marker { display: none; }
443
465
  #run-btn:hover { opacity: 0.88; }
444
466
  #run-btn:disabled { opacity: 0.45; cursor: default; }
445
467
 
446
- /* plan panel (spec 008) */
468
+ /* plan overlay (spec 008; moved from the sidebar to the main window) */
469
+ #plan-overlay {
470
+ position: fixed;
471
+ inset: 0;
472
+ z-index: 60;
473
+ background: color-mix(in oklab, var(--bg) 55%, transparent);
474
+ backdrop-filter: blur(3px);
475
+ display: flex;
476
+ align-items: flex-start;
477
+ justify-content: center;
478
+ padding: 9vh 24px 24px;
479
+ }
480
+ #plan-overlay[hidden] { display: none; }
447
481
  #plan-panel {
448
- margin-top: 10px;
449
- border: 1px solid var(--line);
450
- border-radius: 12px;
482
+ width: min(640px, 94vw);
483
+ max-height: 78vh;
484
+ overflow-y: auto;
485
+ border: 1px solid var(--line2);
486
+ border-radius: 16px;
451
487
  background: var(--card);
452
- box-shadow: var(--shadow-sm);
453
- padding: 10px 11px;
488
+ box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
489
+ padding: 18px 20px;
454
490
  display: flex;
455
491
  flex-direction: column;
456
- gap: 8px;
492
+ gap: 10px;
493
+ }
494
+ .plan-head { display: flex; align-items: flex-start; gap: 10px; }
495
+ .plan-head > div:first-child { flex: 1; }
496
+ .plan-task {
497
+ font-family: var(--serif);
498
+ font-size: 17px;
499
+ font-weight: 500;
500
+ letter-spacing: -0.01em;
501
+ line-height: 1.35;
457
502
  }
458
- #plan-panel[hidden] { display: none; }
459
- .plan-note { font-size: 11.5px; color: var(--amber); }
460
- .plan-rationale { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
461
- .plan-steps { display: flex; flex-direction: column; gap: 5px; }
503
+ .plan-close {
504
+ width: 26px;
505
+ height: 26px;
506
+ flex: none;
507
+ display: inline-flex;
508
+ align-items: center;
509
+ justify-content: center;
510
+ border: none;
511
+ border-radius: 99px;
512
+ background: transparent;
513
+ color: var(--text3);
514
+ cursor: pointer;
515
+ font-size: 16px;
516
+ }
517
+ .plan-close:hover { color: var(--text); background: var(--panel2); }
518
+ .plan-note { font-size: 12px; color: var(--amber); }
519
+ .plan-rationale { font-size: 12.5px; color: var(--text2); line-height: 1.55; max-width: 64ch; }
520
+ .plan-steps { display: flex; flex-direction: column; gap: 7px; }
462
521
  .plan-step {
463
522
  display: flex;
464
- align-items: center;
465
- gap: 6px;
523
+ align-items: flex-start;
524
+ gap: 10px;
466
525
  border: 1px solid var(--line);
467
- border-radius: 9px;
468
- padding: 5px 8px;
526
+ border-radius: 11px;
527
+ padding: 10px 12px;
469
528
  background: var(--bg);
470
- font-size: 12px;
529
+ font-size: 13px;
530
+ cursor: grab;
471
531
  }
472
532
  .plan-step.drag-over { border-color: var(--accent); }
473
- .plan-step .grip { cursor: grab; color: var(--text3); user-select: none; }
474
- .plan-step .num { color: var(--text3); font-family: var(--mono); font-size: 10.5px; }
475
- .plan-step .name { font-weight: 600; white-space: nowrap; }
533
+ .plan-step .grip { cursor: grab; color: var(--text3); user-select: none; margin-top: 1px; }
534
+ .plan-step .num { color: var(--text3); font-family: var(--mono); font-size: 10.5px; margin-top: 3px; }
535
+ .plan-step-main { flex: 1; min-width: 0; }
536
+ .plan-step .row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
537
+ .plan-step .name { font-weight: 600; }
476
538
  .plan-step .hint {
477
- flex: 1;
478
- min-width: 0;
479
- overflow: hidden;
480
- text-overflow: ellipsis;
481
- white-space: nowrap;
539
+ margin-top: 3px;
482
540
  font-family: var(--mono);
483
- font-size: 10.5px;
541
+ font-size: 11px;
542
+ line-height: 1.55;
543
+ color: var(--text3);
544
+ display: -webkit-box;
545
+ -webkit-line-clamp: 3;
546
+ -webkit-box-orient: vertical;
547
+ overflow: hidden;
484
548
  }
485
549
  .plan-badge {
486
550
  font-size: 9px;
@@ -500,11 +564,13 @@ summary::-webkit-details-marker { display: none; }
500
564
  color: var(--text3);
501
565
  cursor: pointer;
502
566
  padding: 0 2px;
503
- font-size: 12px;
567
+ font-size: 13px;
568
+ margin-top: 1px;
504
569
  }
505
570
  .plan-step .plan-remove:hover { color: var(--red); }
506
- .plan-actions { display: flex; gap: 6px; }
507
- .plan-actions .btn-dark, .plan-actions .btn-ghost { flex: 1; justify-content: center; height: 28px; font-size: 12px; }
571
+ .plan-actions { display: flex; gap: 8px; margin-top: 2px; }
572
+ .plan-actions .btn-dark, .plan-actions .btn-ghost { flex: 1; justify-content: center; height: 30px; font-size: 12.5px; }
573
+ #plan-btn.busy svg { animation: cz-pulse 1.2s ease-in-out infinite; }
508
574
 
509
575
  /* nav */
510
576
  #tabs { display: flex; flex-direction: column; gap: 1px; padding: 0 8px 10px; }
@@ -733,6 +799,44 @@ main { flex: 1; min-width: 0; display: flex; min-height: 0; background: var(--bg
733
799
  margin-bottom: 9px;
734
800
  }
735
801
 
802
+ /* rendered markdown (handoff notes) */
803
+ .md { font-size: 13px; line-height: 1.65; color: var(--text); max-width: 72ch; }
804
+ .md h1, .md h2, .md h3, .md h4 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; margin: 18px 0 6px; }
805
+ .md h1 { font-size: 17px; }
806
+ .md h2 { font-size: 15px; }
807
+ .md h3, .md h4 { font-size: 13.5px; }
808
+ .md h1:first-child, .md h2:first-child { margin-top: 0; }
809
+ .md p { margin: 6px 0; }
810
+ .md ul, .md ol { margin: 6px 0; padding-left: 22px; }
811
+ .md li { margin: 3px 0; }
812
+ .md code {
813
+ font-family: var(--mono);
814
+ font-size: 11.5px;
815
+ background: var(--panel2);
816
+ border-radius: 5px;
817
+ padding: 1px 6px;
818
+ word-break: break-all;
819
+ }
820
+ .md pre {
821
+ margin: 8px 0;
822
+ padding: 11px 14px;
823
+ background: var(--card);
824
+ border: 1px solid var(--line);
825
+ border-radius: 10px;
826
+ overflow-x: auto;
827
+ }
828
+ .md pre code { background: transparent; padding: 0; word-break: normal; font-size: 11.5px; line-height: 1.6; }
829
+ .md hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; }
830
+ .md strong { font-weight: 600; }
831
+ .md blockquote {
832
+ margin: 8px 0;
833
+ padding: 3px 14px;
834
+ border-left: 3px solid var(--line2);
835
+ color: var(--text2);
836
+ }
837
+ .md li.task { list-style: none; margin-left: -18px; }
838
+ .md li.task .cb { margin-right: 7px; color: var(--text2); }
839
+
736
840
  #review-panel { background: var(--accent-soft); border-bottom: 1px solid var(--accent-line); }
737
841
  #review-panel .panel-label { color: var(--accent); }
738
842
  #review-notes {
@@ -771,47 +875,48 @@ main { flex: 1; min-width: 0; display: flex; min-height: 0; background: var(--bg
771
875
  line-height: 1.7;
772
876
  margin: 9px 0;
773
877
  max-width: 66ch;
774
- white-space: pre-wrap;
775
878
  word-break: break-word;
776
879
  }
880
+ .ev.text.md p:first-child { margin-top: 0; }
881
+ .ev.text.md p:last-child { margin-bottom: 0; }
777
882
 
778
- .ev.tool, .ev.result > summary {
883
+ .ev.tool, .ev.result summary {
779
884
  display: inline-flex;
780
885
  align-items: center;
781
- gap: 8px;
782
- margin: 3px 8px 3px 0;
783
- padding: 5px 11px 5px 9px;
886
+ gap: 7px;
887
+ margin: 2px 8px 2px 0;
888
+ padding: 3px 9px 3px 8px;
784
889
  border: 1px solid var(--line);
785
- border-radius: 9px;
890
+ border-radius: 8px;
786
891
  background: var(--card);
787
- font-size: 12px;
892
+ font-size: 11.5px;
788
893
  color: var(--text2);
789
894
  max-width: 100%;
790
895
  }
791
- .ev.tool .ok { color: var(--green); font-size: 11px; }
896
+ .ev.tool .ok { color: var(--green); font-size: 10px; }
792
897
  .ev.tool .arg, .ev.tool code {
793
898
  font-family: var(--mono);
794
- font-size: 11px;
899
+ font-size: 10.5px;
795
900
  color: var(--text);
796
901
  background: var(--panel2);
797
902
  border-radius: 5px;
798
- padding: 1px 7px;
903
+ padding: 1px 6px;
799
904
  overflow: hidden;
800
905
  text-overflow: ellipsis;
801
906
  white-space: nowrap;
802
907
  max-width: 46ch;
803
908
  }
804
909
  .ev.result { margin: 4px 0; }
805
- .ev.result > summary { cursor: pointer; }
806
- .ev.result > summary:hover { border-color: var(--line2); }
807
- .ev.result > summary .lead-in { color: var(--text3); font-size: 11px; }
808
- .ev.result > summary .head {
910
+ .ev.result summary { cursor: pointer; }
911
+ .ev.result summary:hover { border-color: var(--line2); }
912
+ .ev.result summary .lead-in { color: var(--text3); font-size: 10px; }
913
+ .ev.result summary .head {
809
914
  overflow: hidden;
810
915
  text-overflow: ellipsis;
811
916
  white-space: nowrap;
812
917
  max-width: 60ch;
813
918
  }
814
- .ev.result > summary .show { font-family: var(--mono); font-size: 10px; color: var(--text3); }
919
+ .ev.result summary .show { font-family: var(--mono); font-size: 10px; color: var(--text3); }
815
920
  .ev.result pre, .ev.tool-detail pre {
816
921
  margin: 7px 0 4px;
817
922
  padding: 12px 15px;
@@ -824,7 +929,7 @@ main { flex: 1; min-width: 0; display: flex; min-height: 0; background: var(--bg
824
929
  font-family: var(--mono);
825
930
  font-size: 11.5px;
826
931
  }
827
- .ev.result.error > summary { color: var(--red); }
932
+ .ev.result.error summary { color: var(--red); }
828
933
 
829
934
  .ev.check {
830
935
  margin: 10px 0;
@@ -1039,7 +1144,9 @@ main { flex: 1; min-width: 0; display: flex; min-height: 0; background: var(--bg
1039
1144
 
1040
1145
  /* ---- split views (GitHub / Skills) ---- */
1041
1146
 
1042
- .split { flex: 1; min-height: 0; display: grid; grid-template-columns: 352px minmax(0, 1fr); }
1147
+ /* The list column grows with the viewport 352px was cramped on wide
1148
+ screens (feedback 2026-07-11). */
1149
+ .split { flex: 1; min-height: 0; display: grid; grid-template-columns: clamp(340px, 27vw, 560px) minmax(0, 1fr); }
1043
1150
  .split-list { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
1044
1151
  .split-list .split-head { padding: 24px 18px 0; }
1045
1152
  .split-list .head-row { display: flex; align-items: baseline; gap: 10px; }
@@ -1077,7 +1184,7 @@ main { flex: 1; min-width: 0; display: flex; min-height: 0; background: var(--bg
1077
1184
  .split-list .sub-tabs button.active { background: var(--panel2); color: var(--text); }
1078
1185
  .split-rows { flex: 1; overflow-y: auto; padding: 0 10px 14px; }
1079
1186
  .split-detail { overflow-y: auto; min-width: 0; }
1080
- .split-detail .inner { max-width: 700px; padding: 30px 38px 44px; }
1187
+ .split-detail .inner { max-width: 840px; padding: 30px 38px 44px; }
1081
1188
  .split-detail h1 {
1082
1189
  margin: 0;
1083
1190
  font-family: var(--serif);
@@ -1143,8 +1250,7 @@ main { flex: 1; min-width: 0; display: flex; min-height: 0; background: var(--bg
1143
1250
  border-bottom: 1px solid var(--line);
1144
1251
  font-size: 14px;
1145
1252
  line-height: 1.7;
1146
- max-width: 64ch;
1147
- white-space: pre-wrap;
1253
+ max-width: 68ch;
1148
1254
  word-break: break-word;
1149
1255
  }
1150
1256
  .gh-hand { margin-top: 24px; }
@@ -1192,6 +1298,8 @@ main { flex: 1; min-width: 0; display: flex; min-height: 0; background: var(--bg
1192
1298
  background: var(--panel2);
1193
1299
  }
1194
1300
  .skill-tag.team { color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); }
1301
+ .skill-tag.agents { color: var(--green); background: color-mix(in oklab, var(--green) 11%, transparent); }
1302
+ .skill-tag.global { color: var(--amber); background: color-mix(in oklab, var(--amber) 12%, transparent); }
1195
1303
  .skill-detail .title-row { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
1196
1304
  .skill-detail .path-line { font-family: var(--mono); font-size: 11px; color: var(--text3); margin-top: 9px; word-break: break-all; }
1197
1305
  .skill-detail .desc { color: var(--text2); font-size: 14px; line-height: 1.65; margin-top: 12px; max-width: 60ch; }
@@ -1237,6 +1345,49 @@ main { flex: 1; min-width: 0; display: flex; min-height: 0; background: var(--bg
1237
1345
  .commit-row .hash { font-family: var(--mono); font-size: 11px; color: var(--text3); flex: none; }
1238
1346
  .commit-row .subj { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1239
1347
  .commit-row .when { font-family: var(--mono); font-size: 10.5px; color: var(--text3); flex: none; }
1348
+ .base-branch-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
1349
+ #base-branch {
1350
+ height: 30px;
1351
+ padding: 0 10px;
1352
+ border: 1px solid var(--line2);
1353
+ border-radius: 9px;
1354
+ background: var(--panel2);
1355
+ color: var(--text);
1356
+ font-family: var(--mono);
1357
+ font-size: 12px;
1358
+ outline: none;
1359
+ cursor: pointer;
1360
+ max-width: 320px;
1361
+ }
1362
+
1363
+ .commit-row.clickable { cursor: pointer; border-radius: 8px; padding: 5px 8px; margin: 0 -8px; align-items: center; }
1364
+ .commit-row.clickable:hover { background: var(--panel2); }
1365
+ .commit-row .chev {
1366
+ width: 10px;
1367
+ height: 10px;
1368
+ flex: none;
1369
+ fill: none;
1370
+ stroke: var(--text3);
1371
+ stroke-width: 2.2;
1372
+ stroke-linecap: round;
1373
+ transition: transform 0.12s ease;
1374
+ }
1375
+ .commit-row.open .chev { transform: rotate(90deg); }
1376
+ .commit-diff { margin: 2px 0 8px 22px; }
1377
+ .commit-gh { display: inline-block; font-size: 11.5px; margin: 4px 0 2px; }
1378
+ .commit-head {
1379
+ margin: 4px 0 8px;
1380
+ padding: 10px 13px;
1381
+ background: var(--card);
1382
+ border: 1px solid var(--line);
1383
+ border-radius: 10px;
1384
+ font-family: var(--mono);
1385
+ font-size: 11px;
1386
+ line-height: 1.6;
1387
+ color: var(--text2);
1388
+ overflow-x: auto;
1389
+ white-space: pre-wrap;
1390
+ }
1240
1391
  .repo-diff {
1241
1392
  border: 1px solid var(--line);
1242
1393
  border-radius: 12px;
@@ -1357,9 +1508,240 @@ a.bm:hover { border-color: var(--accent-line); color: var(--accent); text-decora
1357
1508
  .bm-copy:hover { border-color: var(--text3); color: var(--text); }
1358
1509
  .bm-hint { font-size: 11.5px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1359
1510
 
1511
+ /* ---- workflow builder (spec 012) ---- */
1512
+
1513
+ .wb-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
1514
+ .wb-main { overflow-y: auto; min-width: 0; }
1515
+ .wb-inner { max-width: 620px; margin: 0 auto; padding: 30px 40px 60px; }
1516
+
1517
+ .wb-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
1518
+ .wb-head h1 {
1519
+ margin: 0;
1520
+ font-family: var(--serif);
1521
+ font-size: 25px;
1522
+ font-weight: 500;
1523
+ letter-spacing: -0.015em;
1524
+ flex: 1;
1525
+ min-width: 180px;
1526
+ }
1527
+ .wb-head .btn-dark { height: 29px; }
1528
+
1529
+ .wb-meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
1530
+ .wb-name-pill {
1531
+ display: inline-flex;
1532
+ align-items: center;
1533
+ gap: 7px;
1534
+ height: 30px;
1535
+ padding: 0 13px;
1536
+ border: 1px solid var(--line);
1537
+ border-radius: 99px;
1538
+ background: var(--panel2);
1539
+ }
1540
+ .wb-name-pill svg { width: 11px; height: 11px; fill: none; stroke: var(--text3); stroke-width: 2; stroke-linecap: round; flex: none; }
1541
+ .wb-name-pill input {
1542
+ border: none;
1543
+ background: transparent;
1544
+ color: var(--text);
1545
+ font-family: var(--mono);
1546
+ font-size: 12px;
1547
+ font-weight: 600;
1548
+ outline: none;
1549
+ padding: 0;
1550
+ width: 170px;
1551
+ }
1552
+ #wb-count { font-size: 11px; }
1553
+
1554
+ .wb-load { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
1555
+ .wb-load .wb-k { font-size: 12px; color: var(--text3); }
1556
+ .wb-load .chip-toggle { height: 25px; font-size: 11.5px; }
1557
+
1558
+ .wb-import {
1559
+ margin-top: 14px;
1560
+ border: 1px solid var(--accent-line);
1561
+ border-radius: 13px;
1562
+ background: var(--card);
1563
+ padding: 13px 14px;
1564
+ box-shadow: var(--shadow-sm);
1565
+ }
1566
+ .wb-import-label {
1567
+ font-size: 10.5px;
1568
+ font-weight: 600;
1569
+ letter-spacing: 0.09em;
1570
+ text-transform: uppercase;
1571
+ color: var(--accent);
1572
+ margin-bottom: 8px;
1573
+ }
1574
+ .wb-import textarea {
1575
+ width: 100%;
1576
+ border: 1px solid var(--line);
1577
+ border-radius: 9px;
1578
+ background: var(--bg);
1579
+ color: var(--text);
1580
+ font-family: var(--mono);
1581
+ font-size: 11.5px;
1582
+ line-height: 1.6;
1583
+ resize: vertical;
1584
+ outline: none;
1585
+ padding: 9px 11px;
1586
+ }
1587
+ .wb-import-actions { display: flex; gap: 8px; margin-top: 9px; }
1588
+ .wb-import-actions .btn-dark, .wb-import-actions .btn-ghost { height: 28px; font-size: 12px; }
1589
+
1590
+ #wb-steps { margin-top: 16px; }
1591
+
1592
+ /* insertion gaps: a hairline at rest, dashed slots while dragging, an accent
1593
+ "drop to insert" slot under the pointer */
1594
+ .wb-gap { position: relative; display: flex; align-items: center; justify-content: center; height: 16px; transition: height 0.12s ease; }
1595
+ .wb-gap-inner {
1596
+ width: 1.5px;
1597
+ height: 100%;
1598
+ background: var(--line2);
1599
+ pointer-events: none;
1600
+ overflow: hidden;
1601
+ font-size: 0;
1602
+ color: transparent;
1603
+ }
1604
+ .wb-dragging .wb-gap { height: 28px; }
1605
+ .wb-dragging .wb-gap-inner {
1606
+ width: 100%;
1607
+ height: 16px;
1608
+ border: 1.5px dashed var(--line2);
1609
+ border-radius: 9px;
1610
+ background: transparent;
1611
+ }
1612
+ .wb-dragging .wb-gap.over { height: 46px; }
1613
+ .wb-dragging .wb-gap.over .wb-gap-inner {
1614
+ height: 36px;
1615
+ border-color: var(--accent);
1616
+ border-radius: 11px;
1617
+ background: color-mix(in oklab, var(--accent) 7%, transparent);
1618
+ display: flex;
1619
+ align-items: center;
1620
+ justify-content: center;
1621
+ font-size: 11px;
1622
+ font-weight: 600;
1623
+ color: var(--accent);
1624
+ }
1625
+ /* empty canvas: one big always-visible drop slot */
1626
+ .wb-gap.tall, .wb-dragging .wb-gap.tall { height: 72px; }
1627
+ .wb-gap.tall .wb-gap-inner, .wb-dragging .wb-gap.tall .wb-gap-inner {
1628
+ width: 100%;
1629
+ height: 100%;
1630
+ border: 1.5px dashed var(--line2);
1631
+ border-radius: 13px;
1632
+ background: transparent;
1633
+ display: flex;
1634
+ align-items: center;
1635
+ justify-content: center;
1636
+ font-size: 12px;
1637
+ color: var(--text3);
1638
+ }
1639
+ .wb-gap.tall.over .wb-gap-inner, .wb-dragging .wb-gap.tall.over .wb-gap-inner {
1640
+ border-color: var(--accent);
1641
+ color: var(--accent);
1642
+ background: color-mix(in oklab, var(--accent) 7%, transparent);
1643
+ }
1644
+
1645
+ .wb-step {
1646
+ display: flex;
1647
+ gap: 12px;
1648
+ align-items: center;
1649
+ padding: 12px 15px;
1650
+ border: 1px solid var(--line2);
1651
+ border-radius: 13px;
1652
+ box-shadow: var(--shadow-sm);
1653
+ cursor: grab;
1654
+ background: var(--card);
1655
+ }
1656
+ .wb-step.drag-src { opacity: 0.35; }
1657
+ .wb-step .grip { flex: none; fill: var(--text3); }
1658
+ .wb-step .num { font-size: 10px; color: var(--text3); flex: none; width: 18px; }
1659
+ .wb-ic { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; flex: none; }
1660
+ .wb-step-main { flex: 1; min-width: 0; }
1661
+ .wb-step-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
1662
+ .wb-step-desc {
1663
+ font-size: 11px;
1664
+ color: var(--text3);
1665
+ margin-top: 2px;
1666
+ line-height: 1.45;
1667
+ overflow: hidden;
1668
+ text-overflow: ellipsis;
1669
+ white-space: nowrap;
1670
+ }
1671
+ .wb-badge {
1672
+ flex: none;
1673
+ font-size: 9.5px;
1674
+ font-weight: 600;
1675
+ letter-spacing: 0.06em;
1676
+ text-transform: uppercase;
1677
+ padding: 2px 8px;
1678
+ border-radius: 99px;
1679
+ color: var(--text2);
1680
+ background: var(--panel2);
1681
+ }
1682
+ .wb-badge.unknown { color: var(--amber); background: color-mix(in oklab, var(--amber) 13%, transparent); }
1683
+ .wb-badge.check { color: var(--green); background: color-mix(in oklab, var(--green) 12%, transparent); }
1684
+ .wb-remove {
1685
+ width: 24px;
1686
+ height: 24px;
1687
+ flex: none;
1688
+ display: inline-flex;
1689
+ align-items: center;
1690
+ justify-content: center;
1691
+ border: none;
1692
+ border-radius: 99px;
1693
+ background: transparent;
1694
+ color: var(--text3);
1695
+ cursor: pointer;
1696
+ font-size: 14px;
1697
+ }
1698
+ .wb-remove:hover { color: var(--red); background: color-mix(in oklab, var(--red) 10%, transparent); }
1699
+ .wb-flow-note { display: flex; align-items: center; gap: 9px; justify-content: center; margin-top: 2px; font-size: 11.5px; color: var(--text3); }
1700
+ .wb-flow-note svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
1701
+
1702
+ .wb-aside { border-left: 1px solid var(--line); background: var(--panel); overflow-y: auto; padding: 24px 16px; }
1703
+ .wb-hint { font-size: 11px; color: var(--text3); margin-bottom: 9px; line-height: 1.5; }
1704
+ #wb-palette { display: flex; flex-direction: column; gap: 6px; }
1705
+ .wb-skill {
1706
+ display: flex;
1707
+ align-items: center;
1708
+ gap: 8px;
1709
+ padding: 8px 12px;
1710
+ border: 1px solid var(--line);
1711
+ border-radius: 99px;
1712
+ background: var(--card);
1713
+ cursor: grab;
1714
+ }
1715
+ .wb-skill:hover { border-color: var(--accent-line); }
1716
+ .wb-skill .wb-ic { width: 12px; height: 12px; }
1717
+ .wb-skill .name { font-size: 11.5px; font-weight: 600; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1718
+ .wb-skill-right { margin-left: auto; display: flex; align-items: center; gap: 7px; flex: none; }
1719
+ .wb-skill .in-flow { width: 11px; height: 11px; fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
1720
+ .wb-skill .dots { width: 10px; height: 10px; fill: var(--text3); }
1721
+
1722
+ .wb-yaml-head { display: flex; align-items: center; gap: 8px; margin: 20px 0 9px; }
1723
+ .wb-yaml-head .spacer { flex: 1; }
1724
+ .wb-yaml {
1725
+ margin: 0;
1726
+ padding: 12px 14px;
1727
+ background: var(--bg);
1728
+ border: 1px solid var(--line);
1729
+ border-radius: 11px;
1730
+ font-family: var(--mono);
1731
+ font-size: 10.5px;
1732
+ line-height: 1.7;
1733
+ color: var(--text2);
1734
+ overflow-x: auto;
1735
+ white-space: pre-wrap;
1736
+ }
1737
+ .wb-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; font-size: 11px; color: var(--text3); line-height: 1.5; }
1738
+ .wb-note svg { flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
1739
+
1360
1740
  /* narrow screens: sidebar shrinks, splits stack */
1361
1741
  @media (max-width: 900px) {
1362
1742
  #sidebar { width: 240px; min-width: 240px; }
1363
1743
  .split { grid-template-columns: 1fr; grid-template-rows: minmax(0, 45%) minmax(0, 1fr); }
1364
1744
  .split-list { border-right: none; border-bottom: 1px solid var(--line); }
1745
+ .wb-grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 45%); }
1746
+ .wb-aside { border-left: none; border-top: 1px solid var(--line); }
1365
1747
  }