@tutti-os/agent-gui 0.0.58 → 0.0.60

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 (102) hide show
  1. package/README.md +1 -1
  2. package/dist/@-bold-lined-BLLFKBFI.svg +10 -0
  3. package/dist/add-lined-bold-5QPUDZCU.svg +3 -0
  4. package/dist/agent-conversation/index.d.ts +5 -5
  5. package/dist/agent-conversation/index.js +7 -7
  6. package/dist/agent-message-center/index.d.ts +2 -2
  7. package/dist/agent-message-center/index.js +17 -11
  8. package/dist/agent-message-center/index.js.map +1 -1
  9. package/dist/{agentConversationVM-Qbz9GBwR.d.ts → agentConversationVM-DPAgUJlR.d.ts} +1 -1
  10. package/dist/{agentGuiNodeTypes-BRU6P22B.d.ts → agentGuiNodeTypes-CC52zXAV.d.ts} +9 -6
  11. package/dist/app/renderer/agentactivity.css +533 -56
  12. package/dist/app/renderer/assets/icons/@-bold-lined.svg +10 -0
  13. package/dist/app/renderer/assets/icons/@-lined.svg +10 -0
  14. package/dist/app/renderer/assets/icons/add-lined-bold.svg +3 -0
  15. package/dist/app/renderer/assets/icons/add-lined-icon.svg +3 -0
  16. package/dist/app/renderer/assets/icons/add-lined.svg +3 -0
  17. package/dist/app/renderer/assets/icons/agents/claudecode-flat-filled.svg +10 -0
  18. package/dist/app/renderer/assets/icons/agents/codex-flat-filled.svg +10 -0
  19. package/dist/app/renderer/assets/icons/agents/provider-rail-claude-code-colorful.png +0 -0
  20. package/dist/app/renderer/assets/icons/agents/provider-rail-codex-colorful.png +0 -0
  21. package/dist/app/renderer/assets/icons/agents/provider-rail-hermes-colorful.png +0 -0
  22. package/dist/app/renderer/assets/icons/agents/provider-rail-tutti.png +0 -0
  23. package/dist/app/renderer/assets/icons/handoff-lined.png +0 -0
  24. package/dist/app/renderer/assets/icons/handoff-lined.svg +11 -0
  25. package/dist/{chunk-5SRRKWE4.js → chunk-24CUBQKJ.js} +2 -2
  26. package/dist/{chunk-NX6T3DDS.js → chunk-2LGUBUEJ.js} +3 -3
  27. package/dist/{chunk-UCCUIUGK.js → chunk-4OPTXOOZ.js} +2 -2
  28. package/dist/{chunk-Q75AK47T.js → chunk-5WB3NGIN.js} +2 -2
  29. package/dist/{chunk-2WUDORCV.js → chunk-6TEPDMX6.js} +2 -2
  30. package/dist/{chunk-IS6JUDDY.js → chunk-6VVBG4BF.js} +44 -20
  31. package/dist/chunk-6VVBG4BF.js.map +1 -0
  32. package/dist/{chunk-OLI2A3EM.js → chunk-74TIEA6X.js} +2 -2
  33. package/dist/{chunk-N756UO52.js → chunk-AWIZJQXW.js} +68 -65
  34. package/dist/chunk-AWIZJQXW.js.map +1 -0
  35. package/dist/{chunk-SLT5Q37C.js → chunk-B6YDXIZW.js} +5 -3
  36. package/dist/{chunk-SLT5Q37C.js.map → chunk-B6YDXIZW.js.map} +1 -1
  37. package/dist/{chunk-7GM7UQXD.js → chunk-BB2SVMEV.js} +46 -8
  38. package/dist/chunk-BB2SVMEV.js.map +1 -0
  39. package/dist/{chunk-BT5WEZO5.js → chunk-CUMZV32B.js} +5 -5
  40. package/dist/chunk-CUMZV32B.js.map +1 -0
  41. package/dist/{chunk-OFMORNBO.js → chunk-CZSMZRAV.js} +23 -6
  42. package/dist/chunk-CZSMZRAV.js.map +1 -0
  43. package/dist/{chunk-HVU46DDA.js → chunk-FRCIPTUD.js} +13 -2
  44. package/dist/chunk-FRCIPTUD.js.map +1 -0
  45. package/dist/{chunk-CEMXB7LA.js → chunk-I5ZIKJVN.js} +2 -2
  46. package/dist/{chunk-4PSDYKZQ.js → chunk-K3UBSTJ5.js} +12 -9
  47. package/dist/chunk-K3UBSTJ5.js.map +1 -0
  48. package/dist/{chunk-Z2BTIAOC.js → chunk-MPZ3CW5C.js} +1 -1
  49. package/dist/chunk-MPZ3CW5C.js.map +1 -0
  50. package/dist/{chunk-MTFSQWZ6.js → chunk-V4JGVBUN.js} +22 -2
  51. package/dist/chunk-V4JGVBUN.js.map +1 -0
  52. package/dist/{chunk-OQJSZSYB.js → chunk-WNVIKTJK.js} +2 -2
  53. package/dist/{chunk-BEFNWUOZ.js → chunk-YZ3POK7G.js} +374 -316
  54. package/dist/chunk-YZ3POK7G.js.map +1 -0
  55. package/dist/claudecode-flat-filled-NHO4JCVK.svg +10 -0
  56. package/dist/codex-flat-filled-WYHCF5VR.svg +10 -0
  57. package/dist/context-mention-palette/index.js +8 -8
  58. package/dist/handoff-lined-4WQUBVG3.svg +11 -0
  59. package/dist/i18n/index.d.ts +43 -19
  60. package/dist/i18n/index.js +2 -2
  61. package/dist/index.d.ts +42 -18
  62. package/dist/index.js +1512 -494
  63. package/dist/index.js.map +1 -1
  64. package/dist/plan-decision-ops.d.ts +2 -2
  65. package/dist/queued-prompt-runtime.d.ts +4 -4
  66. package/dist/{types-BsHvTjIZ.d.ts → types-DSc2ta3s.d.ts} +1 -1
  67. package/dist/workbench/contribution.d.ts +4 -8
  68. package/dist/workbench/contribution.js +9 -7
  69. package/dist/workbench/index.d.ts +4 -4
  70. package/dist/workbench/index.js +10 -12
  71. package/dist/workbench/launch.d.ts +6 -7
  72. package/dist/workbench/launch.js +2 -4
  73. package/dist/workbench/providerCatalog.d.ts +1 -1
  74. package/dist/workbench/sessionTitle.d.ts +1 -1
  75. package/dist/workbench/sessionTitle.js +3 -3
  76. package/dist/workbench/state.d.ts +1 -1
  77. package/dist/workbench/state.js +2 -2
  78. package/dist/workbench/types.d.ts +3 -1
  79. package/dist/workbench/types.js +1 -1
  80. package/dist/workspace-agent-generated-files.d.ts +1 -1
  81. package/dist/workspace-agent-generated-files.js +3 -3
  82. package/dist/{workspaceAgentActivityListViewModel-B5viw5Da.d.ts → workspaceAgentActivityListViewModel-DJvAqZso.d.ts} +1 -0
  83. package/package.json +12 -12
  84. package/dist/@-lined-14px-64O2KKB4.svg +0 -3
  85. package/dist/chunk-4PSDYKZQ.js.map +0 -1
  86. package/dist/chunk-7GM7UQXD.js.map +0 -1
  87. package/dist/chunk-BEFNWUOZ.js.map +0 -1
  88. package/dist/chunk-BT5WEZO5.js.map +0 -1
  89. package/dist/chunk-HVU46DDA.js.map +0 -1
  90. package/dist/chunk-IS6JUDDY.js.map +0 -1
  91. package/dist/chunk-MTFSQWZ6.js.map +0 -1
  92. package/dist/chunk-N756UO52.js.map +0 -1
  93. package/dist/chunk-OFMORNBO.js.map +0 -1
  94. package/dist/chunk-Z2BTIAOC.js.map +0 -1
  95. /package/dist/{chunk-5SRRKWE4.js.map → chunk-24CUBQKJ.js.map} +0 -0
  96. /package/dist/{chunk-NX6T3DDS.js.map → chunk-2LGUBUEJ.js.map} +0 -0
  97. /package/dist/{chunk-UCCUIUGK.js.map → chunk-4OPTXOOZ.js.map} +0 -0
  98. /package/dist/{chunk-Q75AK47T.js.map → chunk-5WB3NGIN.js.map} +0 -0
  99. /package/dist/{chunk-2WUDORCV.js.map → chunk-6TEPDMX6.js.map} +0 -0
  100. /package/dist/{chunk-OLI2A3EM.js.map → chunk-74TIEA6X.js.map} +0 -0
  101. /package/dist/{chunk-CEMXB7LA.js.map → chunk-I5ZIKJVN.js.map} +0 -0
  102. /package/dist/{chunk-OQJSZSYB.js.map → chunk-WNVIKTJK.js.map} +0 -0
@@ -2930,6 +2930,55 @@ aside.workspace-agents-status-panel
2930
2930
  opacity: 0.8;
2931
2931
  }
2932
2932
 
2933
+ .agent-gui-chrome__goal-actions {
2934
+ display: flex;
2935
+ flex: 0 0 auto;
2936
+ align-items: center;
2937
+ gap: 4px;
2938
+ }
2939
+
2940
+ .agent-gui-chrome__goal-actions button {
2941
+ display: inline-flex;
2942
+ align-items: center;
2943
+ gap: 4px;
2944
+ min-height: 22px;
2945
+ padding: 2px 8px;
2946
+ border: 0;
2947
+ border-radius: 6px;
2948
+ background: transparent;
2949
+ font-size: 11px;
2950
+ font-weight: 500;
2951
+ line-height: 16px;
2952
+ color: var(--agent-gui-text-secondary, var(--text-secondary));
2953
+ cursor: pointer;
2954
+ }
2955
+
2956
+ .agent-gui-chrome__goal-actions button:hover {
2957
+ background: color-mix(
2958
+ in srgb,
2959
+ var(--agent-gui-text-primary, var(--text-primary)) 8%,
2960
+ transparent
2961
+ );
2962
+ color: var(--agent-gui-text-primary, var(--text-primary));
2963
+ }
2964
+
2965
+ .agent-gui-chrome__goal-edit-input {
2966
+ min-width: 0;
2967
+ flex: 1 1 auto;
2968
+ border: 0;
2969
+ border-radius: 6px;
2970
+ padding: 2px 6px;
2971
+ background: color-mix(
2972
+ in srgb,
2973
+ var(--agent-gui-text-primary, var(--text-primary)) 6%,
2974
+ transparent
2975
+ );
2976
+ font-size: 12px;
2977
+ line-height: 18px;
2978
+ color: var(--agent-gui-text-primary, var(--text-primary));
2979
+ outline: none;
2980
+ }
2981
+
2933
2982
  .agent-gui-chrome__message-slot {
2934
2983
  display: flex;
2935
2984
  min-width: 0;
@@ -4212,6 +4261,8 @@ aside.workspace-agents-status-panel
4212
4261
  }
4213
4262
 
4214
4263
  .agent-gui-node__layout {
4264
+ --agent-gui-provider-rail-width: 0px;
4265
+
4215
4266
  position: relative;
4216
4267
  display: grid;
4217
4268
  grid-template-rows: minmax(0, 1fr);
@@ -4259,10 +4310,10 @@ aside.workspace-agents-status-panel
4259
4310
  overflow: hidden;
4260
4311
  }
4261
4312
 
4262
- .workbench-window:has(
4263
- [data-agent-gui-workbench-header="true"][data-agent-gui-workbench-header-collapsed="false"]
4264
- )
4265
- .agent-gui-node__rail-toolbar {
4313
+ .workbench-window:has([data-agent-gui-workbench-header="true"])
4314
+ .agent-gui-node__rail-toolbar,
4315
+ .workbench-window:has([data-agent-gui-workbench-header="true"])
4316
+ .agent-gui-node__provider-rail-panel {
4266
4317
  padding-top: var(--agent-gui-workbench-header-height);
4267
4318
  }
4268
4319
 
@@ -4286,11 +4337,42 @@ aside.workspace-agents-status-panel
4286
4337
  padding-top: 20px;
4287
4338
  }
4288
4339
 
4340
+ .agent-gui-workbench-dock-icon {
4341
+ box-sizing: border-box;
4342
+ display: grid;
4343
+ width: 44px;
4344
+ height: 44px;
4345
+ grid-template-columns: repeat(2, minmax(0, 1fr));
4346
+ gap: 2px;
4347
+ padding: 3px;
4348
+ border: 1px solid var(--agent-gui-workbench-dock-icon-border, var(--line-1));
4349
+ border-radius: 8px;
4350
+ background: var(
4351
+ --agent-gui-workbench-dock-icon-bg,
4352
+ var(--transparency-block)
4353
+ );
4354
+ }
4355
+
4356
+ .agent-gui-workbench-dock-icon__tile {
4357
+ display: block;
4358
+ overflow: hidden;
4359
+ min-width: 0;
4360
+ min-height: 0;
4361
+ border-radius: 6px;
4362
+ background: transparent;
4363
+ }
4364
+
4365
+ .agent-gui-workbench-dock-icon__tile > img {
4366
+ display: block;
4367
+ width: 100%;
4368
+ height: 100%;
4369
+ object-fit: contain;
4370
+ object-position: center;
4371
+ }
4372
+
4289
4373
  .agent-gui-workbench-header {
4290
4374
  --agent-gui-workbench-header-rail-width: 280px;
4291
4375
  --agent-gui-workbench-header-padding-x: 16px;
4292
- --agent-gui-workbench-header-agent-icon-radius: 5px;
4293
- --agent-gui-workbench-header-agent-icon-size: 20px;
4294
4376
  --agent-gui-workbench-header-primary-gap: 12px;
4295
4377
  --agent-gui-workbench-header-traffic-light-hit-area-size: 20px;
4296
4378
  --agent-gui-workbench-header-traffic-light-gap: 8px;
@@ -4320,7 +4402,7 @@ aside.workspace-agents-status-panel
4320
4402
  }
4321
4403
 
4322
4404
  .agent-gui-workbench-header[data-agent-gui-workbench-header-collapsed="true"] {
4323
- grid-template-columns: minmax(0, 1fr);
4405
+ grid-template-columns: minmax(0, 0px) minmax(0, 1fr);
4324
4406
  }
4325
4407
 
4326
4408
  .agent-gui-workbench-header__primary {
@@ -4445,14 +4527,6 @@ aside.workspace-agents-status-panel
4445
4527
  gap: 8px;
4446
4528
  }
4447
4529
 
4448
- .agent-gui-workbench-header__agent-icon {
4449
- width: var(--agent-gui-workbench-header-agent-icon-size);
4450
- height: var(--agent-gui-workbench-header-agent-icon-size);
4451
- flex: 0 0 auto;
4452
- border-radius: var(--agent-gui-workbench-header-agent-icon-radius);
4453
- object-fit: cover;
4454
- }
4455
-
4456
4530
  .agent-gui-workbench-header__agent-name,
4457
4531
  .agent-gui-workbench-header__session-title,
4458
4532
  .agent-gui-workbench-header__detail-title {
@@ -4525,6 +4599,11 @@ aside.workspace-agents-status-panel
4525
4599
  margin-left: auto;
4526
4600
  }
4527
4601
 
4602
+ .workbench-window:has([data-workbench-node-render-error="true"])
4603
+ .agent-gui-workbench-header__rail-toggle {
4604
+ display: none !important;
4605
+ }
4606
+
4528
4607
  .agent-gui-workbench-header[data-agent-gui-workbench-header-collapsed="true"]
4529
4608
  .agent-gui-workbench-header__rail-toggle {
4530
4609
  margin-left: 0;
@@ -4548,6 +4627,7 @@ aside.workspace-agents-status-panel
4548
4627
  }
4549
4628
 
4550
4629
  .agent-gui-node__rail-panel--collapsed {
4630
+ overflow: hidden;
4551
4631
  pointer-events: none;
4552
4632
  }
4553
4633
 
@@ -4555,7 +4635,10 @@ aside.workspace-agents-status-panel
4555
4635
  position: absolute;
4556
4636
  top: 0;
4557
4637
  bottom: 0;
4558
- left: calc(var(--agent-gui-conversation-rail-width) - 6px);
4638
+ left: calc(
4639
+ var(--agent-gui-provider-rail-width, 0px) +
4640
+ var(--agent-gui-conversation-rail-width) - 6px
4641
+ );
4559
4642
  z-index: 20;
4560
4643
  width: 12px;
4561
4644
  min-width: 12px;
@@ -4572,7 +4655,7 @@ aside.workspace-agents-status-panel
4572
4655
  }
4573
4656
 
4574
4657
  .agent-gui-node__rail-resize-handle--collapsed {
4575
- left: -6px;
4658
+ left: calc(var(--agent-gui-provider-rail-width, 0px) - 6px);
4576
4659
  opacity: 0;
4577
4660
  }
4578
4661
 
@@ -4618,14 +4701,57 @@ aside.workspace-agents-status-panel
4618
4701
  position: relative;
4619
4702
  display: flex;
4620
4703
  flex-direction: column;
4704
+ width: var(
4705
+ --agent-gui-conversation-rail-content-width,
4706
+ var(--agent-gui-conversation-rail-width)
4707
+ );
4708
+ min-width: var(
4709
+ --agent-gui-conversation-rail-content-width,
4710
+ var(--agent-gui-conversation-rail-width)
4711
+ );
4621
4712
  height: 100%;
4622
- min-width: 0;
4623
4713
  min-height: 0;
4624
4714
  background: var(--agent-gui-session-sidepanel-background);
4625
4715
  box-shadow: none;
4626
4716
  opacity: 1;
4627
4717
  }
4628
4718
 
4719
+ .agent-gui-node__provider-rail-panel {
4720
+ position: relative;
4721
+ z-index: 3;
4722
+ display: flex;
4723
+ width: var(--agent-gui-provider-rail-width, 52px);
4724
+ min-width: 0;
4725
+ min-height: 0;
4726
+ flex-direction: column;
4727
+ align-items: center;
4728
+ background: var(--agent-gui-session-sidepanel-background);
4729
+ overflow: hidden;
4730
+ transition: width 180ms cubic-bezier(0.22, 1, 0.36, 1);
4731
+ }
4732
+
4733
+ .agent-gui-node__provider-rail-panel::after {
4734
+ content: "";
4735
+ pointer-events: none;
4736
+ position: absolute;
4737
+ top: 0;
4738
+ right: 0;
4739
+ bottom: 0;
4740
+ width: 1px;
4741
+ background: linear-gradient(
4742
+ 180deg,
4743
+ transparent 0,
4744
+ var(--line-1) 24px,
4745
+ var(--line-1) calc(100% - 24px),
4746
+ transparent 100%
4747
+ );
4748
+ }
4749
+
4750
+ .workbench-window:has([data-agent-gui-workbench-header="true"])
4751
+ .agent-gui-node__provider-rail-panel::after {
4752
+ top: var(--agent-gui-workbench-header-height);
4753
+ }
4754
+
4629
4755
  .agent-gui-node__rail > * {
4630
4756
  transition:
4631
4757
  opacity 120ms ease,
@@ -4667,6 +4793,7 @@ aside.workspace-agents-status-panel
4667
4793
  .agent-gui-node__layout,
4668
4794
  .agent-gui-workbench-header,
4669
4795
  .agent-gui-node__rail-resize-handle,
4796
+ .agent-gui-node__provider-rail-panel,
4670
4797
  .agent-gui-node__rail > *,
4671
4798
  .agent-gui-node__rail::after {
4672
4799
  transition: none;
@@ -5431,7 +5558,7 @@ button.agent-gui-node__conversation-section-toggle:hover
5431
5558
  display: grid;
5432
5559
  box-sizing: border-box;
5433
5560
  grid-template-columns: minmax(0, 1fr) auto;
5434
- gap: 10px;
5561
+ gap: 8px;
5435
5562
  align-items: center;
5436
5563
  width: 100%;
5437
5564
  max-width: 100%;
@@ -5580,6 +5707,28 @@ button.agent-gui-node__conversation-section-toggle:hover
5580
5707
  opacity: 0;
5581
5708
  }
5582
5709
 
5710
+ .agent-gui-node__conversation-title-row {
5711
+ display: inline-flex;
5712
+ align-items: center;
5713
+ min-width: 0;
5714
+ max-width: 100%;
5715
+ gap: 6px;
5716
+ overflow: hidden;
5717
+ }
5718
+
5719
+ .agent-gui-node__conversation-provider-icon {
5720
+ display: inline-block;
5721
+ flex: 0 0 14px;
5722
+ width: 14px;
5723
+ height: 14px;
5724
+ color: var(--text-secondary);
5725
+ background-color: currentColor;
5726
+ mask: var(--agent-gui-conversation-provider-icon-url) center / contain
5727
+ no-repeat;
5728
+ -webkit-mask: var(--agent-gui-conversation-provider-icon-url) center / contain
5729
+ no-repeat;
5730
+ }
5731
+
5583
5732
  .agent-gui-node__conversation-actions
5584
5733
  > button.agent-gui-node__conversation-open-window-button:not(:disabled):hover,
5585
5734
  .agent-gui-node__conversation-actions
@@ -5670,6 +5819,7 @@ button.agent-gui-node__conversation-section-toggle:hover
5670
5819
 
5671
5820
  .agent-gui-node__conversation-title {
5672
5821
  display: block;
5822
+ flex: 1 1 auto;
5673
5823
  min-width: 0;
5674
5824
  overflow: hidden;
5675
5825
  color: var(--text-primary);
@@ -6244,6 +6394,62 @@ button.agent-gui-node__conversation-section-toggle:hover
6244
6394
  pointer-events: none;
6245
6395
  }
6246
6396
 
6397
+ .agent-gui-node__bottom-dock-scroll-to-bottom {
6398
+ position: absolute;
6399
+ bottom: calc(
6400
+ 100% + var(--agent-gui-bottom-dock-floating-safe-area, 0px) + 8px
6401
+ );
6402
+ left: 50%;
6403
+ z-index: 6;
6404
+ display: inline-grid;
6405
+ place-items: center;
6406
+ width: 34px;
6407
+ height: 34px;
6408
+ margin: 0;
6409
+ padding: 0;
6410
+ border: 1px solid
6411
+ color-mix(in srgb, var(--line-2, var(--tutti-line-2)) 72%, transparent);
6412
+ border-radius: 999px;
6413
+ background: var(--background-fronted, var(--tutti-surface-1));
6414
+ box-shadow: 0 10px 26px rgb(0 0 0 / 10%);
6415
+ color: var(--text-secondary, var(--tutti-text-secondary));
6416
+ pointer-events: auto;
6417
+ cursor: pointer;
6418
+ transform: translateX(-50%);
6419
+ transition:
6420
+ background 140ms ease,
6421
+ color 140ms ease,
6422
+ transform 140ms ease;
6423
+ }
6424
+
6425
+ .agent-gui-node__bottom-dock-scroll-to-bottom:hover {
6426
+ background: var(--background-fronted, var(--tutti-surface-1));
6427
+ color: var(--text-primary, var(--tutti-text-primary));
6428
+ transform: translateX(-50%) translateY(-1px);
6429
+ }
6430
+
6431
+ .agent-gui-node__bottom-dock-scroll-to-bottom:focus-visible {
6432
+ border-color: color-mix(
6433
+ in srgb,
6434
+ var(--text-secondary, var(--tutti-text-secondary)) 46%,
6435
+ transparent
6436
+ );
6437
+ background: var(--background-fronted, var(--tutti-surface-1));
6438
+ color: var(--text-primary, var(--tutti-text-primary));
6439
+ outline: none;
6440
+ transform: translateX(-50%) translateY(-1px);
6441
+ }
6442
+
6443
+ .agent-gui-node__bottom-dock-scroll-to-bottom:active {
6444
+ transform: translateX(-50%);
6445
+ }
6446
+
6447
+ @media (prefers-reduced-motion: reduce) {
6448
+ .agent-gui-node__bottom-dock-scroll-to-bottom {
6449
+ transition: none;
6450
+ }
6451
+ }
6452
+
6247
6453
  .agent-gui-node__bottom-dock > .agent-gui-chrome__session-chrome,
6248
6454
  .agent-gui-node__bottom-dock-prompt,
6249
6455
  .agent-gui-node__bottom-dock
@@ -7635,6 +7841,75 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
7635
7841
  min-width: 0;
7636
7842
  }
7637
7843
 
7844
+ .agent-gui-node__composer-handoff-trigger {
7845
+ padding-left: 6px;
7846
+ }
7847
+
7848
+ .agent-gui-node__composer-handoff-icon {
7849
+ position: relative;
7850
+ display: inline-flex;
7851
+ width: 18px;
7852
+ height: 18px;
7853
+ flex: 0 0 18px;
7854
+ align-items: center;
7855
+ justify-content: center;
7856
+ color: var(--text-secondary);
7857
+ }
7858
+
7859
+ .agent-gui-node__composer-handoff-icon[data-playing="true"] {
7860
+ color: var(--text-primary);
7861
+ }
7862
+
7863
+ .agent-gui-node__composer-handoff-icon-static,
7864
+ .agent-gui-node__composer-handoff-icon-animated {
7865
+ width: 18px;
7866
+ height: 18px;
7867
+ display: block;
7868
+ }
7869
+
7870
+ .agent-gui-node__composer-handoff-icon-static {
7871
+ background-color: currentColor;
7872
+ opacity: 1;
7873
+ }
7874
+
7875
+ .agent-gui-node__composer-handoff-icon[data-playing="true"]
7876
+ .agent-gui-node__composer-handoff-icon-static {
7877
+ opacity: 0;
7878
+ }
7879
+
7880
+ .agent-gui-node__composer-handoff-icon-animated {
7881
+ position: absolute;
7882
+ inset: 0;
7883
+ filter: var(--agent-gui-handoff-lottie-filter, none);
7884
+ opacity: 0;
7885
+ pointer-events: none;
7886
+ }
7887
+
7888
+ .agent-gui-node__composer-handoff-icon-animated[data-active="true"] {
7889
+ opacity: 1;
7890
+ }
7891
+
7892
+ :root[data-theme="dark"] .agent-gui-node__composer-handoff-icon-animated {
7893
+ --agent-gui-handoff-lottie-filter: brightness(0) invert(1);
7894
+ }
7895
+
7896
+ @media (prefers-color-scheme: dark) {
7897
+ :root:not([data-theme="light"])
7898
+ .agent-gui-node__composer-handoff-icon-animated {
7899
+ --agent-gui-handoff-lottie-filter: brightness(0) invert(1);
7900
+ }
7901
+ }
7902
+
7903
+ .agent-gui-node__composer-handoff-menu-content [data-slot="select-item"] {
7904
+ padding-right: 0.5rem;
7905
+ }
7906
+
7907
+ .agent-gui-node__composer-handoff-menu-content
7908
+ [data-slot="select-item"]
7909
+ > span:first-child {
7910
+ display: none;
7911
+ }
7912
+
7638
7913
  .agent-gui-node__composer-prompt-tips {
7639
7914
  display: flex;
7640
7915
  flex: 1 1 0;
@@ -7781,6 +8056,10 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
7781
8056
  gap: 10px;
7782
8057
  }
7783
8058
 
8059
+ .agent-gui-node__composer-footer-left {
8060
+ gap: 4px;
8061
+ }
8062
+
7784
8063
  .agent-gui-node__composer-footer-right {
7785
8064
  flex: 1 1 auto;
7786
8065
  gap: 2px;
@@ -8035,36 +8314,61 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
8035
8314
  }
8036
8315
 
8037
8316
  .agent-gui-node__provider-rail {
8038
- display: grid;
8039
- grid-template-columns: repeat(4, minmax(0, 1fr));
8040
- gap: 10px 8px;
8041
- padding: 10px 14px 12px;
8042
- border-bottom: 1px solid var(--line-2);
8317
+ display: flex;
8318
+ width: 52px;
8319
+ min-width: 0;
8320
+ min-height: 0;
8321
+ flex: 1 1 auto;
8322
+ flex-direction: column;
8323
+ align-items: center;
8324
+ padding: 0 0 12px;
8325
+ overflow-x: hidden;
8326
+ overflow-y: auto;
8043
8327
  }
8044
8328
 
8045
8329
  .agent-gui-node__provider-rail-tile {
8046
8330
  display: grid;
8331
+ width: 52px;
8047
8332
  min-width: 0;
8048
- grid-template-rows: 36px 16px;
8049
- gap: 4px;
8333
+ grid-template-rows: 32px;
8334
+ gap: 0;
8050
8335
  place-items: center;
8051
8336
  border: 0;
8052
8337
  background: transparent;
8053
8338
  color: var(--text-tertiary);
8054
8339
  padding: 0;
8055
- font-size: 11px;
8340
+ font-size: 10px;
8056
8341
  font-weight: 600;
8057
- line-height: 16px;
8342
+ line-height: 14px;
8058
8343
  text-align: center;
8059
8344
  }
8060
8345
 
8346
+ .agent-gui-node__provider-rail-tile + .agent-gui-node__provider-rail-tile {
8347
+ margin-top: 12px;
8348
+ }
8349
+
8350
+ .agent-gui-node__provider-rail-tile:has(
8351
+ + .agent-gui-node__provider-rail-separator
8352
+ ) {
8353
+ padding-bottom: 0;
8354
+ }
8355
+
8061
8356
  .agent-gui-node__provider-rail-tile:hover:not(:disabled) {
8062
8357
  color: var(--text-secondary);
8063
8358
  }
8064
8359
 
8065
8360
  .agent-gui-node__provider-rail-tile:disabled {
8066
8361
  cursor: not-allowed;
8067
- opacity: 0.6;
8362
+ opacity: 0.3;
8363
+ }
8364
+
8365
+ .agent-gui-node__provider-rail-separator {
8366
+ display: block;
8367
+ width: 28px;
8368
+ height: 1px;
8369
+ flex: 0 0 auto;
8370
+ margin-block: 12px;
8371
+ background: var(--line-2);
8068
8372
  }
8069
8373
 
8070
8374
  .agent-gui-node__provider-rail-tile[data-loading="true"] {
@@ -8072,21 +8376,28 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
8072
8376
  }
8073
8377
 
8074
8378
  .agent-gui-node__provider-rail-avatar {
8379
+ box-sizing: border-box;
8075
8380
  display: grid;
8076
- width: 36px;
8077
- height: 36px;
8381
+ width: 32px;
8382
+ height: 32px;
8078
8383
  place-items: center;
8079
- border: 1px solid transparent;
8080
- border-radius: 999px;
8081
- background: var(--fill-tertiary);
8384
+ border: 2px solid transparent;
8385
+ border-radius: 8px;
8386
+ background: transparent;
8082
8387
  color: var(--text-tertiary);
8083
8388
  transition:
8084
8389
  border-color 140ms ease,
8085
8390
  background-color 140ms ease,
8086
8391
  color 140ms ease,
8392
+ opacity 140ms ease,
8087
8393
  transform 140ms ease;
8088
8394
  }
8089
8395
 
8396
+ .agent-gui-node__provider-rail-tile:not([data-selected="true"])
8397
+ .agent-gui-node__provider-rail-avatar {
8398
+ opacity: 0.5;
8399
+ }
8400
+
8090
8401
  .agent-gui-node__provider-rail-tile:hover:not(:disabled)
8091
8402
  .agent-gui-node__provider-rail-avatar {
8092
8403
  background: var(--fill-secondary);
@@ -8100,38 +8411,108 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
8100
8411
  .agent-gui-node__provider-rail-tile[data-selected="true"]
8101
8412
  .agent-gui-node__provider-rail-avatar {
8102
8413
  border-color: var(--brand-primary, var(--tutti-purple));
8103
- background: color-mix(
8104
- in srgb,
8105
- var(--brand-primary, var(--tutti-purple)) 14%,
8106
- var(--fill-primary)
8107
- );
8414
+ background: transparent;
8108
8415
  color: var(--brand-primary, var(--tutti-purple));
8109
8416
  }
8110
8417
 
8418
+ .agent-gui-node__provider-rail-avatar:has(
8419
+ > .agent-gui-node__provider-rail-launchpad-icon
8420
+ ),
8421
+ .agent-gui-node__provider-rail-tile:hover:not(:disabled)
8422
+ .agent-gui-node__provider-rail-avatar:has(
8423
+ > .agent-gui-node__provider-rail-launchpad-icon
8424
+ ) {
8425
+ border-color: transparent;
8426
+ background: transparent;
8427
+ }
8428
+
8429
+ .agent-gui-node__provider-rail-tile[data-selected="true"]
8430
+ .agent-gui-node__provider-rail-avatar:has(
8431
+ > .agent-gui-node__provider-rail-launchpad-icon
8432
+ ),
8433
+ .agent-gui-node__provider-rail-tile[data-selected="true"]:hover:not(:disabled)
8434
+ .agent-gui-node__provider-rail-avatar:has(
8435
+ > .agent-gui-node__provider-rail-launchpad-icon
8436
+ ) {
8437
+ border-color: var(--tutti-purple);
8438
+ background: var(--transparency-block);
8439
+ }
8440
+
8111
8441
  .agent-gui-node__provider-rail-avatar-icon {
8112
8442
  width: 18px;
8113
8443
  height: 18px;
8114
8444
  }
8115
8445
 
8116
8446
  .agent-gui-node__provider-rail-avatar-image {
8117
- width: 22px;
8118
- height: 22px;
8447
+ width: 28px;
8448
+ height: 28px;
8119
8449
  border-radius: 6px;
8120
8450
  object-fit: contain;
8121
8451
  }
8122
8452
 
8123
- .agent-gui-node__provider-rail-tile-label {
8124
- width: 100%;
8453
+ .agent-gui-node__provider-rail-launchpad-icon {
8454
+ box-sizing: border-box;
8455
+ display: grid;
8456
+ width: 28px;
8457
+ height: 28px;
8458
+ grid-template-columns: repeat(2, 1fr);
8459
+ gap: 2px;
8460
+ padding: 1px;
8461
+ border: 0;
8462
+ border-radius: 6px;
8463
+ background: transparent;
8464
+ }
8465
+
8466
+ .agent-gui-node__provider-rail-launchpad-item {
8467
+ display: grid;
8125
8468
  min-width: 0;
8469
+ min-height: 0;
8470
+ place-items: center;
8126
8471
  overflow: hidden;
8127
- text-overflow: ellipsis;
8128
- white-space: nowrap;
8472
+ background: var(--background-fronted);
8473
+ border-radius: 4px;
8474
+ box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--line-2) 70%, transparent);
8475
+ transition: opacity 140ms ease;
8476
+ }
8477
+
8478
+ .agent-gui-node__provider-rail-launchpad-icon img {
8479
+ width: 100%;
8480
+ height: 100%;
8481
+ object-fit: cover;
8482
+ }
8483
+
8484
+ .agent-gui-node__empty-hero-launchpad-icon {
8485
+ width: 54px;
8486
+ height: 54px;
8487
+ border-color: var(--tutti-purple);
8488
+ border-radius: 8px;
8489
+ background: var(--transparency-block);
8490
+ color: var(--tutti-purple);
8491
+ animation: agent-gui-empty-hero-enter 260ms cubic-bezier(0.16, 1, 0.3, 1) 40ms
8492
+ both;
8493
+ }
8494
+
8495
+ .agent-gui-node__empty-hero-launchpad-icon
8496
+ .agent-gui-node__provider-rail-launchpad-icon {
8497
+ width: 48px;
8498
+ height: 48px;
8499
+ gap: 3px;
8500
+ padding: 1px;
8501
+ border-radius: 8px;
8502
+ }
8503
+
8504
+ .agent-gui-node__empty-hero-launchpad-icon
8505
+ .agent-gui-node__provider-rail-launchpad-item {
8506
+ border-radius: 6px;
8507
+ }
8508
+
8509
+ .agent-gui-node__empty-hero-launchpad-icon
8510
+ .agent-gui-node__provider-rail-launchpad-item[data-provider-active="false"] {
8511
+ opacity: 0.5;
8129
8512
  }
8130
8513
 
8131
8514
  .agent-gui-node__provider-rail-tile[data-loading="true"]
8132
- .agent-gui-node__provider-rail-avatar,
8133
- .agent-gui-node__provider-rail-tile[data-loading="true"]
8134
- .agent-gui-node__provider-rail-tile-label {
8515
+ .agent-gui-node__provider-rail-avatar {
8135
8516
  background: linear-gradient(
8136
8517
  90deg,
8137
8518
  var(--fill-tertiary),
@@ -8142,12 +8523,6 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
8142
8523
  animation: agent-gui-provider-target-loading 1.2s ease-in-out infinite;
8143
8524
  }
8144
8525
 
8145
- .agent-gui-node__provider-rail-tile[data-loading="true"]
8146
- .agent-gui-node__provider-rail-tile-label {
8147
- height: 10px;
8148
- border-radius: 999px;
8149
- }
8150
-
8151
8526
  @keyframes agent-gui-provider-target-loading {
8152
8527
  0% {
8153
8528
  background-position: 100% 0;
@@ -8185,6 +8560,63 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
8185
8560
  both;
8186
8561
  }
8187
8562
 
8563
+ .agent-gui-node__empty-hero-icon-rail {
8564
+ display: flex;
8565
+ width: min(216px, 44vw);
8566
+ height: 64px;
8567
+ align-items: center;
8568
+ overflow: hidden;
8569
+ object-fit: unset;
8570
+ }
8571
+
8572
+ .agent-gui-node__empty-hero-icon-rail-scroller {
8573
+ display: flex;
8574
+ width: 100%;
8575
+ min-width: 0;
8576
+ align-items: center;
8577
+ gap: 12px;
8578
+ overflow-x: auto;
8579
+ overflow-y: hidden;
8580
+ padding: 8px 20px;
8581
+ overscroll-behavior-x: contain;
8582
+ scrollbar-width: none;
8583
+ scroll-snap-type: x proximity;
8584
+ mask-image: linear-gradient(
8585
+ 90deg,
8586
+ transparent 0,
8587
+ #000 24px,
8588
+ #000 calc(100% - 24px),
8589
+ transparent 100%
8590
+ );
8591
+ }
8592
+
8593
+ .agent-gui-node__empty-hero-icon-rail-scroller::-webkit-scrollbar {
8594
+ display: none;
8595
+ }
8596
+
8597
+ .agent-gui-node__empty-hero-icon-rail-item {
8598
+ display: grid;
8599
+ width: 48px;
8600
+ height: 48px;
8601
+ flex: 0 0 48px;
8602
+ place-items: center;
8603
+ scroll-snap-align: center;
8604
+ transition:
8605
+ opacity 140ms ease,
8606
+ transform 140ms ease;
8607
+ }
8608
+
8609
+ .agent-gui-node__empty-hero-icon-rail-item:hover {
8610
+ transform: translateY(-1px);
8611
+ }
8612
+
8613
+ .agent-gui-node__empty-hero-icon-rail-item > img {
8614
+ display: block;
8615
+ width: 48px;
8616
+ height: 48px;
8617
+ object-fit: contain;
8618
+ }
8619
+
8188
8620
  .agent-gui-node__empty-hero-title {
8189
8621
  margin: 0;
8190
8622
  text-align: center;
@@ -8236,12 +8668,57 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
8236
8668
  }
8237
8669
 
8238
8670
  .agent-gui-node__empty-provider-gate-action {
8239
- min-width: 132px;
8240
- gap: 8px;
8241
8671
  animation: agent-gui-empty-hero-enter 300ms cubic-bezier(0.16, 1, 0.3, 1)
8242
8672
  190ms both;
8243
8673
  }
8244
8674
 
8675
+ .agent-gui-node__empty-hero-provider-select {
8676
+ display: inline-flex;
8677
+ width: auto;
8678
+ min-width: 0;
8679
+ height: auto;
8680
+ min-height: 0;
8681
+ vertical-align: baseline;
8682
+ border: 0;
8683
+ border-radius: 0;
8684
+ background: transparent;
8685
+ padding: 0;
8686
+ color: inherit;
8687
+ font: inherit;
8688
+ gap: 0.08em;
8689
+ line-height: inherit;
8690
+ letter-spacing: inherit;
8691
+ box-shadow: none;
8692
+ white-space: nowrap;
8693
+ }
8694
+
8695
+ .agent-gui-node__empty-hero-provider-select:hover,
8696
+ .agent-gui-node__empty-hero-provider-select:focus,
8697
+ .agent-gui-node__empty-hero-provider-select:focus-visible,
8698
+ .agent-gui-node__empty-hero-provider-select[data-state="open"] {
8699
+ background: transparent;
8700
+ color: inherit;
8701
+ box-shadow: none;
8702
+ }
8703
+
8704
+ .agent-gui-node__empty-hero-provider-select > svg {
8705
+ width: 20px;
8706
+ height: 20px;
8707
+ flex: 0 0 auto;
8708
+ margin-top: 0.08em;
8709
+ margin-left: 2px;
8710
+ opacity: 0.72;
8711
+ stroke-width: 3px;
8712
+ }
8713
+
8714
+ .agent-gui-node__empty-provider-gate-action:disabled {
8715
+ border-color: var(--line-2);
8716
+ background: var(--fill-tertiary);
8717
+ color: var(--text-disabled);
8718
+ cursor: not-allowed;
8719
+ opacity: 0.65;
8720
+ }
8721
+
8245
8722
  .agent-gui-node__empty-hero-body > .agent-gui-node__composer-hero {
8246
8723
  animation: agent-gui-empty-hero-enter 300ms cubic-bezier(0.16, 1, 0.3, 1)
8247
8724
  180ms both;