fraim-framework 2.0.184 → 2.0.186

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.
Files changed (11) hide show
  1. package/dist/src/ai-hub/desktop-main.js +2 -10
  2. package/dist/src/ai-hub/hosts.js +127 -15
  3. package/dist/src/ai-hub/openclaw-bridge.js +17 -6
  4. package/dist/src/ai-hub/remote-hub-gateway.js +88 -0
  5. package/dist/src/ai-hub/server.js +189 -191
  6. package/dist/src/api/ai-hub/manager-team.js +93 -0
  7. package/package.json +1 -1
  8. package/public/ai-hub/index.html +77 -90
  9. package/public/ai-hub/review.css +4 -2
  10. package/public/ai-hub/script.js +733 -553
  11. package/public/ai-hub/styles.css +162 -35
package/public/ai-hub/styles.css CHANGED
@@ -35,8 +35,13 @@
35
35
  --titlebar-inset: env(titlebar-area-height, 0px);
36
36
  }
37
37
 
38
- @media (prefers-color-scheme: dark) {
39
- :root {
38
+ /* #700: theming is driven by an explicit [data-theme] attribute set pre-paint
39
+ by the <head> bootstrap (from localStorage['fraim-theme'] or, when unset, the
40
+ OS prefers-color-scheme). This replaces the old prefers-color-scheme-only
41
+ token block so the in-app toggle can override the OS preference. */
42
+ :root[data-theme="light"] { color-scheme: light; }
43
+ :root[data-theme="dark"] {
44
+ color-scheme: dark;
40
45
  --bg: #1E1E1E;
41
46
  --surface: #2A2A2A;
42
47
  --soft: #323232;
@@ -58,7 +63,6 @@
58
63
  --state-complete-soft: rgba(70, 199, 106, 0.18);
59
64
  --shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
60
65
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 16px rgba(0, 0, 0, 0.40);
61
- }
62
66
  }
63
67
 
64
68
  /* Electron shell: html.electron is set synchronously before CSS paints so there
@@ -105,21 +109,19 @@ html.electron .modal-backdrop {
105
109
  backdrop-filter: blur(4px);
106
110
  -webkit-backdrop-filter: blur(4px);
107
111
  }
108
- @media (prefers-color-scheme: dark) {
109
- html.electron .rail {
112
+ html.electron[data-theme="dark"] .rail {
110
113
  background: rgba(42, 42, 42, 0.78);
111
114
  border-right-color: rgba(255, 255, 255, 0.06);
112
- }
113
- html.electron .conversation {
115
+ }
116
+ html.electron[data-theme="dark"] .conversation {
114
117
  background: rgba(36, 36, 36, 0.88);
115
118
  border-color: rgba(255, 255, 255, 0.08);
116
119
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.20);
117
- }
118
- html.electron .modal {
120
+ }
121
+ html.electron[data-theme="dark"] .modal {
119
122
  background: rgba(30, 30, 30, 0.94);
120
123
  border-color: rgba(255, 255, 255, 0.10);
121
124
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.40);
122
- }
123
125
  }
124
126
 
125
127
  /* ── Native platform feel ───────────────────────────────────────────────────
@@ -183,9 +185,7 @@ body {
183
185
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
184
186
  }
185
187
 
186
- @media (prefers-color-scheme: dark) {
187
- body { scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
188
- }
188
+ [data-theme="dark"] body { scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
189
189
 
190
190
  /* Respect reduced-motion preference */
191
191
  @media (prefers-reduced-motion: reduce) {
@@ -2157,6 +2157,17 @@ button.small { padding: 4px 10px; font-size: 12px; }
2157
2157
  .totals .sep { color: var(--line); }
2158
2158
  .totals strong { color: var(--text); font-weight: 600; }
2159
2159
 
2160
+ /* Issue #711 — adhoc runs have no pizza tracker; render the run totals line on
2161
+ its own without the empty stage rows or a redundant top divider. */
2162
+ .tracker--totals-only {
2163
+ padding: 10px 4px;
2164
+ }
2165
+ .tracker--totals-only .totals {
2166
+ border-top: none;
2167
+ padding-top: 0;
2168
+ margin-top: 0;
2169
+ }
2170
+
2160
2171
 
2161
2172
  /* ── Issue #385: Team roster, Employee selector, Lock badges, Hire notice ── */
2162
2173
 
@@ -2749,6 +2760,12 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
2749
2760
  .am-div { height: 1px; background: var(--line); margin: 4px 0; }
2750
2761
  .am-foot { padding: 8px 16px; font-size: 13px; color: var(--muted); cursor: pointer; }
2751
2762
  .am-foot:hover { background: var(--bg); }
2763
+ /* #700: theme toggle row + iOS-style switch */
2764
+ .am-theme { align-items: center; width: 100%; border: none; background: none; text-align: left; font: inherit; color: var(--text); }
2765
+ .am-theme .am-switch { box-sizing: border-box; margin-left: auto; align-self: center; width: 38px; height: 22px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); position: relative; flex-shrink: 0; transition: background .18s ease, border-color .18s ease; }
2766
+ .am-switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform .18s ease; }
2767
+ .am-theme[aria-checked="true"] .am-switch { background: var(--accent); border-color: var(--accent); }
2768
+ .am-theme[aria-checked="true"] .am-switch-knob { transform: translateX(16px); }
2752
2769
 
2753
2770
  /* Hub areas */
2754
2771
  .hub-area { display: none; flex: 1; overflow: hidden; }
@@ -3467,15 +3484,6 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
3467
3484
  cursor: pointer;
3468
3485
  }
3469
3486
  #tree-sidebar .pu-menu-item:hover { background: var(--bg, #f6f6f6); }
3470
- #tree-sidebar .pu-job { padding: 4px 0 2px; }
3471
- #tree-sidebar .pu-job + .pu-job { margin-top: 4px; border-top: 1px solid var(--line, #ececec); padding-top: 8px; }
3472
- #tree-sidebar .pu-job-name {
3473
- font-size: 12px;
3474
- font-weight: 700;
3475
- letter-spacing: .02em;
3476
- color: var(--muted, #666);
3477
- padding: 2px 2px 4px;
3478
- }
3479
3487
 
3480
3488
  /* Relocated Runs section (legacy conversation switcher) inside the tree. */
3481
3489
  #tree-sidebar .rail-section--runs.tree-runs { display: block; margin-top: 6px; }
@@ -4103,13 +4111,11 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
4103
4111
  --green: #34c759;
4104
4112
  --grey: #c7c7cc;
4105
4113
  }
4106
- @media (prefers-color-scheme: dark) {
4107
- :root {
4114
+ :root[data-theme="dark"] {
4108
4115
  --red: #ff453a;
4109
4116
  --amber: #ff9f0a;
4110
4117
  --green: #30d158;
4111
4118
  --grey: #636366;
4112
- }
4113
4119
  }
4114
4120
 
4115
4121
  /* ── .av — standalone team avatar chip (proj-team context, set by JS) ── */
@@ -4548,14 +4554,7 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
4548
4554
  .dep-add-btn { padding:4px 12px; background:var(--accent-soft,rgba(0,113,227,.08)); color:var(--accent,#0071e3); border:1px solid rgba(0,113,227,.2); border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; }
4549
4555
  .dep-add-btn:hover { background:var(--accent,#0071e3); color:#fff; }
4550
4556
 
4551
- /* Deployment cards */
4552
- .dep-card { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; padding:8px 10px; background:var(--surface,#fff); border:1px solid var(--line,#e5e5e5); border-radius:10px; margin-bottom:6px; }
4553
- .dep-card-top { display:flex; align-items:center; gap:6px; flex:1; min-width:0; }
4554
- .dep-type-icon { font-size:14px; flex-shrink:0; }
4555
- .dep-label { font-size:13px; font-weight:600; color:var(--text,#1d1d1f); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
4556
- .dep-type-badge { display:inline-block; padding:1px 7px; border-radius:4px; font-size:10px; font-weight:600; flex-shrink:0; }
4557
- .dep-type-badge--scheduled { background:rgba(0,122,255,.12); color:#0071e3; }
4558
- .dep-type-badge--webhook { background:rgba(88,86,214,.12); color:#5856d6; }
4557
+ /* Deployment / assignment detail rows (#693: grouped rows replace flat cards) */
4559
4558
  .dep-detail { width:100%; font-size:11px; color:var(--muted,#888); margin-left:20px; }
4560
4559
  .dep-detail--url { display:flex; align-items:center; gap:6px; }
4561
4560
  .dep-inbound-url { font-size:11px; word-break:break-all; color:var(--muted,#888); flex:1; }
@@ -4572,12 +4571,10 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
4572
4571
  .dep-wh-inbound-header { margin-bottom:8px; }
4573
4572
  .dep-wh-inbound-label { font-size:12px; font-weight:600; color:var(--text,#1d1d1f); display:block; }
4574
4573
  .dep-wh-inbound-hint { font-size:11px; color:var(--muted,#888); display:block; margin-top:2px; }
4575
- .dep-card-actions { display:flex; gap:6px; margin-left:auto; align-items:center; flex-shrink:0; }
4576
4574
  .dep-edit-btn { padding:2px 8px; background:transparent; border:1px solid var(--line,#e5e5e5); border-radius:6px; font-size:11px; color:var(--muted,#888); cursor:pointer; }
4577
4575
  .dep-edit-btn:hover { border-color:var(--accent,#0071e3); color:var(--accent,#0071e3); }
4578
4576
  .dep-del-btn { padding:2px 8px; background:transparent; border:1px solid var(--line,#e5e5e5); border-radius:6px; font-size:11px; color:var(--muted,#888); cursor:pointer; }
4579
4577
  .dep-del-btn:hover { border-color:#ff3b30; color:#ff3b30; }
4580
- .dep-detail--emp { font-style:normal; }
4581
4578
  .dep-empty { color:var(--muted,#888); font-size:12px; margin:4px 0 8px; line-height:1.5; }
4582
4579
  .dep-cron-preview { font-size:11px; color:var(--accent,#0071e3); margin:2px 0 0; }
4583
4580
 
@@ -4587,3 +4584,133 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
4587
4584
  .cancel-button { padding:7px 18px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; background:transparent; color:var(--muted,#888); border:1px solid var(--line,#e5e5e5); }
4588
4585
  .cancel-button:hover { border-color:var(--text,#1d1d1f); color:var(--text,#1d1d1f); }
4589
4586
  .dep-inbound-url-row { display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--bg,#f5f5f7); border-radius:8px; margin-top:6px; }
4587
+
4588
+ /* ==========================================================================
4589
+ Issue #693 — Hub look & feel improvements
4590
+ ========================================================================== */
4591
+
4592
+ /* #693.7 — "+" assign controls: native, optically-centered glyph.
4593
+ Was a fixed line-height hack that let the glyph ride high; flex-center it. */
4594
+ .conv-employee-add {
4595
+ display: inline-flex; align-items: center; justify-content: center;
4596
+ width: 22px; height: 22px; padding: 0;
4597
+ font-size: 16px; font-weight: 400; line-height: 1; border-radius: 6px;
4598
+ }
4599
+ .emp-hero .eh-add {
4600
+ display: inline-flex; align-items: center; justify-content: center;
4601
+ width: 22px; height: 22px; padding: 0;
4602
+ font-size: 16px; font-weight: 400; line-height: 1; border-radius: 6px;
4603
+ }
4604
+
4605
+ /* #693.9 — Job names under employees: single line, not bold, italic, clean.
4606
+ Runs list uses .conv-title (was 17px/700, 2-line clamp); tree jobs use .tj-label. */
4607
+ .conv-title {
4608
+ font-size: 13px; font-weight: 400; font-style: italic;
4609
+ line-height: 1.4; color: var(--text);
4610
+ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
4611
+ -webkit-line-clamp: 1;
4612
+ }
4613
+ .conv-item { align-items: center; }
4614
+ .emp-hero .eh-jobs .tree-job .tj-label,
4615
+ .tree-runs .tj-label {
4616
+ font-style: italic; font-weight: 400; white-space: nowrap;
4617
+ overflow: hidden; text-overflow: ellipsis;
4618
+ }
4619
+
4620
+ /* #693.8 — Watercooler group avatar: real watercooler icon, not a blank
4621
+ dashed circle. The dashed-placeholder rule is replaced by a solid soft chip
4622
+ that holds an inline SVG (injected by renderRail). */
4623
+ .conv-employee-avatar--watercooler {
4624
+ border-style: solid; border-color: var(--line);
4625
+ background: var(--accent-soft); color: var(--accent);
4626
+ }
4627
+ .conv-employee-avatar--watercooler svg { width: 14px; height: 14px; }
4628
+
4629
+ /* #693.6 — DiceBear avatar image for employees in the workspace tree. */
4630
+ img.eh-av { object-fit: cover; background: var(--surface); }
4631
+
4632
+ /* #693.1 (PR round 2) — Watercooler group avatar in the employee tree: the icon
4633
+ must render in accent (the generic .emp-hero .eh-av white color wins on
4634
+ specificity otherwise). */
4635
+ .emp-hero .eh-av.conv-employee-avatar--watercooler {
4636
+ background: var(--accent-soft); color: var(--accent);
4637
+ }
4638
+ .emp-hero .eh-av.conv-employee-avatar--watercooler svg { width: 16px; height: 16px; }
4639
+ /* #693.1 — runs rendered under an employee accordion reuse .tree-job; ensure the
4640
+ run title stays on one clean italic line (item 9) even as a run row. */
4641
+ .emp-hero .eh-jobs .tree-run .tj-label { font-style: italic; }
4642
+
4643
+ /* #693.1 (PR round 2) — in the workspace tree the employee accordion label is the
4644
+ primary content. Reclaim width from tracking + the +/hire buttons so names like
4645
+ "AUDITYA" aren't truncated to a couple letters in the ~175px sidebar. */
4646
+ .tree-runs .conv-employee-tab { gap: 4px; }
4647
+ .tree-runs .conv-employee-avatar { width: 22px; height: 22px; }
4648
+ .tree-runs .conv-employee-tab-label { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
4649
+ .tree-runs .conv-employee-add { width: 20px; height: 20px; font-size: 15px; }
4650
+ .tree-runs .eh-hire-manager { width: 20px; height: 20px; font-size: 11px; line-height: 1; padding: 0; opacity: 1; border-radius: 6px; }
4651
+
4652
+ /* #693.4 — Account menu: every row (header, options, footer) shares one grid so
4653
+ the header name, all option labels, and Sign out line up on a single left
4654
+ edge. First column 30px + 12px gap → labels start at 58px. */
4655
+ #account-menu .am-header,
4656
+ #account-menu .am-item,
4657
+ #account-menu .am-foot {
4658
+ display: grid; grid-template-columns: 30px 1fr; column-gap: 12px;
4659
+ align-items: center; padding: 10px 16px; margin: 0;
4660
+ width: 100%; box-sizing: border-box; text-align: left;
4661
+ }
4662
+ #account-menu .am-header { padding: 13px 16px; }
4663
+ #account-menu .am-item > div { display: flex; flex-direction: column; min-width: 0; }
4664
+ #account-menu .am-ico { width: 30px; margin: 0; text-align: center; font-size: 16px; line-height: 1; }
4665
+ #account-menu .am-av { width: 30px; height: 30px; }
4666
+ #account-menu .am-foot { color: var(--muted); font-weight: 500; cursor: pointer; }
4667
+ #account-menu .am-foot .am-ico { color: var(--muted); }
4668
+
4669
+ /* #693.1 — lifecycle action button placed inside the Brief / Learnings (and
4670
+ Company/Manager context/learnings) accordion bodies, where the action's output
4671
+ lands. Replaces the retired standalone "Project Updates" section. */
4672
+ .ctx-acc-action-row { display: flex; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
4673
+ .ctx-acc-action {
4674
+ display: inline-flex; align-items: center; gap: 7px;
4675
+ padding: 7px 13px; border-radius: 9px; cursor: pointer;
4676
+ font-size: 12.5px; font-weight: 600;
4677
+ background: var(--accent-soft); color: var(--accent);
4678
+ border: 1px solid rgba(0,113,227,.2);
4679
+ }
4680
+ .ctx-acc-action:hover { background: var(--accent); color: #fff; }
4681
+ .ctx-acc-action .caa-ico { font-size: 14px; line-height: 1; }
4682
+
4683
+ /* #693.2 — consolidated New Assignment dialog: segmented Scheduled/Triggered. */
4684
+ .dep-type-seg { display: inline-flex; background: var(--soft); border-radius: 9px; padding: 3px; gap: 3px; margin-bottom: 14px; }
4685
+ .dep-type-btn { border: none; background: transparent; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); padding: 7px 18px; border-radius: 7px; }
4686
+ .dep-type-btn.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
4687
+ .dep-trig-note { font-size: 12px; color: var(--muted); margin: 0 0 6px; line-height: 1.5; }
4688
+
4689
+ /* #693.3 — grouped assignment rows (Runs-style, dedicated class). */
4690
+ .dep-row {
4691
+ box-sizing: border-box; width: 100%; min-width: 0;
4692
+ display: flex; align-items: center; justify-content: space-between; gap: 10px;
4693
+ padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
4694
+ background: transparent; color: var(--text);
4695
+ }
4696
+ .dep-row:hover { background: var(--soft); }
4697
+ .dep-row-title { font-size: 13px; font-weight: 400; font-style: italic; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
4698
+ .assign-row-meta { display: flex; gap: 8px; align-items: center; margin-top: 3px; font-size: 11px; color: var(--muted); }
4699
+ .assign-badge { font-size: 10px; font-weight: 700; letter-spacing: .02em; padding: 1px 7px; border-radius: 999px; }
4700
+ .assign-badge--scheduled { background: rgba(0,113,227,.10); color: var(--accent); }
4701
+ .assign-badge--triggered { background: rgba(255,149,0,.14); color: #b96b00; }
4702
+ .dep-row-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
4703
+ .dep-inbound-sub { display: flex; align-items: center; gap: 8px; width: auto; margin: 0 0 4px 23px; min-width: 0; font-size: 11px; color: var(--muted); }
4704
+ .dep-inbound-sub .dep-inbound-url--inline { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
4705
+
4706
+ /* #693.5 — command palette AI-agent picker. */
4707
+ .cp-employee-footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
4708
+ .cp-agent-label { font-size: 12.5px; color: var(--muted); }
4709
+ .cp-agent-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; }
4710
+ .cp-agent-pill {
4711
+ display: inline-flex; align-items: center; gap: 6px;
4712
+ padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line);
4713
+ background: var(--surface); cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text);
4714
+ }
4715
+ .cp-agent-pill.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
4716
+ .cp-agent-pill:disabled { opacity: .45; cursor: not-allowed; }