fraim 2.0.183 → 2.0.185

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 (17) hide show
  1. package/dist/src/ai-hub/desktop-main.js +2 -10
  2. package/dist/src/ai-hub/hosts.js +1 -1
  3. package/dist/src/ai-hub/manager-turns.js +2 -2
  4. package/dist/src/ai-hub/preferences.js +3 -2
  5. package/dist/src/ai-hub/remote-hub-gateway.js +88 -0
  6. package/dist/src/ai-hub/server.js +119 -184
  7. package/dist/src/api/ai-hub/manager-team.js +93 -0
  8. package/dist/src/cli/distribution/marketplace-bundles.js +26 -27
  9. package/dist/src/fraim/db-service.js +25 -3
  10. package/dist/src/routes/oauth-routes.js +40 -5
  11. package/dist/src/services/account-provisioning.js +38 -0
  12. package/dist/src/services/admin-service.js +10 -36
  13. package/package.json +1 -1
  14. package/public/ai-hub/index.html +77 -90
  15. package/public/ai-hub/review.css +4 -2
  16. package/public/ai-hub/script.js +526 -562
  17. package/public/ai-hub/styles.css +151 -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) {
@@ -2749,6 +2749,12 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
2749
2749
  .am-div { height: 1px; background: var(--line); margin: 4px 0; }
2750
2750
  .am-foot { padding: 8px 16px; font-size: 13px; color: var(--muted); cursor: pointer; }
2751
2751
  .am-foot:hover { background: var(--bg); }
2752
+ /* #700: theme toggle row + iOS-style switch */
2753
+ .am-theme { align-items: center; width: 100%; border: none; background: none; text-align: left; font: inherit; color: var(--text); }
2754
+ .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; }
2755
+ .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; }
2756
+ .am-theme[aria-checked="true"] .am-switch { background: var(--accent); border-color: var(--accent); }
2757
+ .am-theme[aria-checked="true"] .am-switch-knob { transform: translateX(16px); }
2752
2758
 
2753
2759
  /* Hub areas */
2754
2760
  .hub-area { display: none; flex: 1; overflow: hidden; }
@@ -3467,15 +3473,6 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
3467
3473
  cursor: pointer;
3468
3474
  }
3469
3475
  #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
3476
 
3480
3477
  /* Relocated Runs section (legacy conversation switcher) inside the tree. */
3481
3478
  #tree-sidebar .rail-section--runs.tree-runs { display: block; margin-top: 6px; }
@@ -4103,13 +4100,11 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
4103
4100
  --green: #34c759;
4104
4101
  --grey: #c7c7cc;
4105
4102
  }
4106
- @media (prefers-color-scheme: dark) {
4107
- :root {
4103
+ :root[data-theme="dark"] {
4108
4104
  --red: #ff453a;
4109
4105
  --amber: #ff9f0a;
4110
4106
  --green: #30d158;
4111
4107
  --grey: #636366;
4112
- }
4113
4108
  }
4114
4109
 
4115
4110
  /* ── .av — standalone team avatar chip (proj-team context, set by JS) ── */
@@ -4548,14 +4543,7 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
4548
4543
  .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
4544
  .dep-add-btn:hover { background:var(--accent,#0071e3); color:#fff; }
4550
4545
 
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; }
4546
+ /* Deployment / assignment detail rows (#693: grouped rows replace flat cards) */
4559
4547
  .dep-detail { width:100%; font-size:11px; color:var(--muted,#888); margin-left:20px; }
4560
4548
  .dep-detail--url { display:flex; align-items:center; gap:6px; }
4561
4549
  .dep-inbound-url { font-size:11px; word-break:break-all; color:var(--muted,#888); flex:1; }
@@ -4572,12 +4560,10 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
4572
4560
  .dep-wh-inbound-header { margin-bottom:8px; }
4573
4561
  .dep-wh-inbound-label { font-size:12px; font-weight:600; color:var(--text,#1d1d1f); display:block; }
4574
4562
  .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
4563
  .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
4564
  .dep-edit-btn:hover { border-color:var(--accent,#0071e3); color:var(--accent,#0071e3); }
4578
4565
  .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
4566
  .dep-del-btn:hover { border-color:#ff3b30; color:#ff3b30; }
4580
- .dep-detail--emp { font-style:normal; }
4581
4567
  .dep-empty { color:var(--muted,#888); font-size:12px; margin:4px 0 8px; line-height:1.5; }
4582
4568
  .dep-cron-preview { font-size:11px; color:var(--accent,#0071e3); margin:2px 0 0; }
4583
4569
 
@@ -4587,3 +4573,133 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
4587
4573
  .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
4574
  .cancel-button:hover { border-color:var(--text,#1d1d1f); color:var(--text,#1d1d1f); }
4589
4575
  .dep-inbound-url-row { display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--bg,#f5f5f7); border-radius:8px; margin-top:6px; }
4576
+
4577
+ /* ==========================================================================
4578
+ Issue #693 — Hub look & feel improvements
4579
+ ========================================================================== */
4580
+
4581
+ /* #693.7 — "+" assign controls: native, optically-centered glyph.
4582
+ Was a fixed line-height hack that let the glyph ride high; flex-center it. */
4583
+ .conv-employee-add {
4584
+ display: inline-flex; align-items: center; justify-content: center;
4585
+ width: 22px; height: 22px; padding: 0;
4586
+ font-size: 16px; font-weight: 400; line-height: 1; border-radius: 6px;
4587
+ }
4588
+ .emp-hero .eh-add {
4589
+ display: inline-flex; align-items: center; justify-content: center;
4590
+ width: 22px; height: 22px; padding: 0;
4591
+ font-size: 16px; font-weight: 400; line-height: 1; border-radius: 6px;
4592
+ }
4593
+
4594
+ /* #693.9 — Job names under employees: single line, not bold, italic, clean.
4595
+ Runs list uses .conv-title (was 17px/700, 2-line clamp); tree jobs use .tj-label. */
4596
+ .conv-title {
4597
+ font-size: 13px; font-weight: 400; font-style: italic;
4598
+ line-height: 1.4; color: var(--text);
4599
+ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
4600
+ -webkit-line-clamp: 1;
4601
+ }
4602
+ .conv-item { align-items: center; }
4603
+ .emp-hero .eh-jobs .tree-job .tj-label,
4604
+ .tree-runs .tj-label {
4605
+ font-style: italic; font-weight: 400; white-space: nowrap;
4606
+ overflow: hidden; text-overflow: ellipsis;
4607
+ }
4608
+
4609
+ /* #693.8 — Watercooler group avatar: real watercooler icon, not a blank
4610
+ dashed circle. The dashed-placeholder rule is replaced by a solid soft chip
4611
+ that holds an inline SVG (injected by renderRail). */
4612
+ .conv-employee-avatar--watercooler {
4613
+ border-style: solid; border-color: var(--line);
4614
+ background: var(--accent-soft); color: var(--accent);
4615
+ }
4616
+ .conv-employee-avatar--watercooler svg { width: 14px; height: 14px; }
4617
+
4618
+ /* #693.6 — DiceBear avatar image for employees in the workspace tree. */
4619
+ img.eh-av { object-fit: cover; background: var(--surface); }
4620
+
4621
+ /* #693.1 (PR round 2) — Watercooler group avatar in the employee tree: the icon
4622
+ must render in accent (the generic .emp-hero .eh-av white color wins on
4623
+ specificity otherwise). */
4624
+ .emp-hero .eh-av.conv-employee-avatar--watercooler {
4625
+ background: var(--accent-soft); color: var(--accent);
4626
+ }
4627
+ .emp-hero .eh-av.conv-employee-avatar--watercooler svg { width: 16px; height: 16px; }
4628
+ /* #693.1 — runs rendered under an employee accordion reuse .tree-job; ensure the
4629
+ run title stays on one clean italic line (item 9) even as a run row. */
4630
+ .emp-hero .eh-jobs .tree-run .tj-label { font-style: italic; }
4631
+
4632
+ /* #693.1 (PR round 2) — in the workspace tree the employee accordion label is the
4633
+ primary content. Reclaim width from tracking + the +/hire buttons so names like
4634
+ "AUDITYA" aren't truncated to a couple letters in the ~175px sidebar. */
4635
+ .tree-runs .conv-employee-tab { gap: 4px; }
4636
+ .tree-runs .conv-employee-avatar { width: 22px; height: 22px; }
4637
+ .tree-runs .conv-employee-tab-label { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
4638
+ .tree-runs .conv-employee-add { width: 20px; height: 20px; font-size: 15px; }
4639
+ .tree-runs .eh-hire-manager { width: 20px; height: 20px; font-size: 11px; line-height: 1; padding: 0; opacity: 1; border-radius: 6px; }
4640
+
4641
+ /* #693.4 — Account menu: every row (header, options, footer) shares one grid so
4642
+ the header name, all option labels, and Sign out line up on a single left
4643
+ edge. First column 30px + 12px gap → labels start at 58px. */
4644
+ #account-menu .am-header,
4645
+ #account-menu .am-item,
4646
+ #account-menu .am-foot {
4647
+ display: grid; grid-template-columns: 30px 1fr; column-gap: 12px;
4648
+ align-items: center; padding: 10px 16px; margin: 0;
4649
+ width: 100%; box-sizing: border-box; text-align: left;
4650
+ }
4651
+ #account-menu .am-header { padding: 13px 16px; }
4652
+ #account-menu .am-item > div { display: flex; flex-direction: column; min-width: 0; }
4653
+ #account-menu .am-ico { width: 30px; margin: 0; text-align: center; font-size: 16px; line-height: 1; }
4654
+ #account-menu .am-av { width: 30px; height: 30px; }
4655
+ #account-menu .am-foot { color: var(--muted); font-weight: 500; cursor: pointer; }
4656
+ #account-menu .am-foot .am-ico { color: var(--muted); }
4657
+
4658
+ /* #693.1 — lifecycle action button placed inside the Brief / Learnings (and
4659
+ Company/Manager context/learnings) accordion bodies, where the action's output
4660
+ lands. Replaces the retired standalone "Project Updates" section. */
4661
+ .ctx-acc-action-row { display: flex; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
4662
+ .ctx-acc-action {
4663
+ display: inline-flex; align-items: center; gap: 7px;
4664
+ padding: 7px 13px; border-radius: 9px; cursor: pointer;
4665
+ font-size: 12.5px; font-weight: 600;
4666
+ background: var(--accent-soft); color: var(--accent);
4667
+ border: 1px solid rgba(0,113,227,.2);
4668
+ }
4669
+ .ctx-acc-action:hover { background: var(--accent); color: #fff; }
4670
+ .ctx-acc-action .caa-ico { font-size: 14px; line-height: 1; }
4671
+
4672
+ /* #693.2 — consolidated New Assignment dialog: segmented Scheduled/Triggered. */
4673
+ .dep-type-seg { display: inline-flex; background: var(--soft); border-radius: 9px; padding: 3px; gap: 3px; margin-bottom: 14px; }
4674
+ .dep-type-btn { border: none; background: transparent; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); padding: 7px 18px; border-radius: 7px; }
4675
+ .dep-type-btn.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
4676
+ .dep-trig-note { font-size: 12px; color: var(--muted); margin: 0 0 6px; line-height: 1.5; }
4677
+
4678
+ /* #693.3 — grouped assignment rows (Runs-style, dedicated class). */
4679
+ .dep-row {
4680
+ box-sizing: border-box; width: 100%; min-width: 0;
4681
+ display: flex; align-items: center; justify-content: space-between; gap: 10px;
4682
+ padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
4683
+ background: transparent; color: var(--text);
4684
+ }
4685
+ .dep-row:hover { background: var(--soft); }
4686
+ .dep-row-title { font-size: 13px; font-weight: 400; font-style: italic; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
4687
+ .assign-row-meta { display: flex; gap: 8px; align-items: center; margin-top: 3px; font-size: 11px; color: var(--muted); }
4688
+ .assign-badge { font-size: 10px; font-weight: 700; letter-spacing: .02em; padding: 1px 7px; border-radius: 999px; }
4689
+ .assign-badge--scheduled { background: rgba(0,113,227,.10); color: var(--accent); }
4690
+ .assign-badge--triggered { background: rgba(255,149,0,.14); color: #b96b00; }
4691
+ .dep-row-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
4692
+ .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); }
4693
+ .dep-inbound-sub .dep-inbound-url--inline { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
4694
+
4695
+ /* #693.5 — command palette AI-agent picker. */
4696
+ .cp-employee-footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
4697
+ .cp-agent-label { font-size: 12.5px; color: var(--muted); }
4698
+ .cp-agent-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; }
4699
+ .cp-agent-pill {
4700
+ display: inline-flex; align-items: center; gap: 6px;
4701
+ padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line);
4702
+ background: var(--surface); cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text);
4703
+ }
4704
+ .cp-agent-pill.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
4705
+ .cp-agent-pill:disabled { opacity: .45; cursor: not-allowed; }