anentrypoint-design 0.0.320 → 0.0.322

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 (8) hide show
  1. package/chat.css +38 -7
  2. package/colors_and_type.css +9 -3
  3. package/dist/247420.css +47 -10
  4. package/dist/247420.js +15 -15
  5. package/package.json +1 -1
  6. package/src/components/agent-chat.js +71 -10
  7. package/src/components/sessions.js +7 -0
  8. package/src/kits/os/shell.js +47 -5
package/chat.css CHANGED
@@ -121,6 +121,37 @@
121
121
  .agentchat-cwd-input[aria-invalid='true'] { border-color: var(--flame); box-shadow: inset 0 0 0 var(--bw-hair) var(--flame); }
122
122
  .agentchat-cwd-input[aria-busy='true'] { border-color: var(--fg-3); box-shadow: inset 0 0 0 var(--bw-hair) var(--fg-3); }
123
123
 
124
+ /* cwd practicality upgrade: editing mode stacks the input row plus any
125
+ optional roots/recent/browse rows the host wires, instead of a single flat
126
+ row - each sub-row wraps independently at narrow widths. */
127
+ .agentchat-cwd-editing { flex-direction: column; align-items: stretch; }
128
+ .agentchat-cwd-row { display: flex; align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap; }
129
+ .agentchat-cwd-roots, .agentchat-cwd-recent {
130
+ display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
131
+ }
132
+ .agentchat-cwd-recent-label { font-size: var(--fs-tiny); color: var(--fg-3); }
133
+ .agentchat-cwd-chip {
134
+ background: var(--bg-2); border: var(--bw-hair) solid var(--rule); color: var(--fg-2);
135
+ border-radius: var(--r-pill); padding: 3px 10px; font: inherit; font-size: var(--fs-tiny);
136
+ cursor: pointer;
137
+ }
138
+ .agentchat-cwd-chip:hover { border-color: var(--accent); color: var(--fg); }
139
+ .agentchat-cwd-chip:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
140
+ .agentchat-cwd-browse {
141
+ border: var(--bw-hair) solid var(--rule); border-radius: var(--r-1);
142
+ padding: var(--space-2, 8px); background: var(--bg-2);
143
+ display: flex; flex-direction: column; gap: 6px;
144
+ max-height: 220px;
145
+ }
146
+ .agentchat-cwd-browse-list { overflow-y: auto; display: flex; flex-direction: column; max-height: 160px; }
147
+ .agentchat-cwd-browse-item {
148
+ background: none; border: none; color: var(--fg-2); text-align: left;
149
+ padding: 6px 8px; border-radius: var(--r-1); font: inherit; font-size: var(--fs-tiny);
150
+ cursor: pointer;
151
+ }
152
+ .agentchat-cwd-browse-item:hover, .agentchat-cwd-browse-item:focus-visible { background: var(--bg-3, var(--bg)); color: var(--fg); }
153
+ .agentchat-cwd-browse-loading, .agentchat-cwd-browse-empty { padding: 6px 8px; font-size: var(--fs-tiny); color: var(--fg-3); }
154
+
124
155
  /* head + thread */
125
156
  .agentchat-head {
126
157
  display: flex;
@@ -322,7 +353,7 @@
322
353
  }
323
354
  /* Coarse-pointer (touch): raise cwd button to 44px minimum tap target */
324
355
  @media (pointer: coarse) {
325
- .agentchat-cwd-btn { min-height: 44px; }
356
+ .agentchat-cwd-btn, .agentchat-cwd-chip, .agentchat-cwd-browse-item { min-height: 44px; }
326
357
  }
327
358
 
328
359
  /* ----------------------------------------------------------------------------
@@ -408,7 +439,7 @@
408
439
  label sticks to the top of the scroll area for Claude-Desktop-style headers. */
409
440
  .ds-session-group { display: flex; flex-direction: column; }
410
441
  .ds-session-group-rows { display: flex; flex-direction: column; gap: 2px; }
411
- .ds-session-group-label { position: sticky; top: 0; z-index: 1; background: var(--bg-1, var(--bg)); font-size: var(--fs-tiny); font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tr-caps); padding: var(--space-2) var(--space-2) var(--space-1); }
442
+ .ds-session-group-label { position: sticky; top: 0; z-index: 1; background: var(--bg-1, var(--bg)); font-size: var(--fs-tiny); font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tr-label); padding: var(--space-2) var(--space-2) var(--space-1); }
412
443
  .ds-session-row {
413
444
  position: relative; display: flex; align-items: center; gap: var(--space-2);
414
445
  width: 100%; padding: var(--space-2); min-height: 52px; margin-bottom: 2px;
@@ -705,15 +736,15 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
705
736
  .ds-session-meta-item + .ds-session-meta-item::before { content: '\00B7'; color: var(--fg-3); margin-right: var(--space-1); }
706
737
  .ds-session-meta-label { color: var(--fg-3); }
707
738
  .ds-session-meta-value { font-family: var(--ff-mono); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
708
- .ds-session-meta-copy {
739
+ .ds-session-meta-copy, .ds-session-meta-action {
709
740
  padding: 2px 8px; min-height: 24px; cursor: pointer;
710
741
  background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-1);
711
742
  color: var(--fg-3); font-family: var(--ff-body); font-size: var(--fs-micro);
712
743
  }
713
- .ds-session-meta-copy:hover { background: var(--bg-3); color: var(--fg); }
714
- .ds-session-meta-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
744
+ .ds-session-meta-copy:hover, .ds-session-meta-action:hover { background: var(--bg-3); color: var(--fg); }
745
+ .ds-session-meta-copy:focus-visible, .ds-session-meta-action:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
715
746
  @media (pointer: coarse), (max-width: 640px) {
716
- .ds-session-meta-copy { min-height: 44px; min-width: 44px; }
747
+ .ds-session-meta-copy, .ds-session-meta-action { min-height: 44px; min-width: 44px; }
717
748
  }
718
749
 
719
750
  /* ============================================================================
@@ -962,7 +993,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
962
993
 
963
994
  /* Live command-center: status-bucket groups + header breakdown + heartbeat. */
964
995
  .ds-dash-group { display: flex; flex-direction: column; gap: var(--space-2); }
965
- .ds-dash-group-label { font-size: var(--fs-tiny); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--fg-3); padding: 0 var(--space-1); }
996
+ .ds-dash-group-label { font-size: var(--fs-tiny); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--fg-3); padding: 0 var(--space-1); }
966
997
  .ds-dash-breakdown { display: flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); color: var(--fg-2); }
967
998
  /* Shape-channel discs mirror the .status-dot-disc vocabulary (solid /
968
999
  solid+halo / hollow ring) so a colour-blind user can scan the breakdown by
package/colors_and_type.css CHANGED
@@ -58,8 +58,14 @@
58
58
  --sky: #3A6EFF;
59
59
  /* --warn = interactive danger controls (buttons, banners, menus, error
60
60
  inputs); --danger below = passive error/status text and metrics
61
- (kpi/sparkline deltas, auth-error text). Two tokens, one convention. */
62
- --warn: #E0241A;
61
+ (kpi/sparkline deltas, auth-error text). Two tokens, one convention.
62
+ #E0241A measured 4.19:1 on --paper — fails WCAG AA 4.5:1 for the many
63
+ TEXT usages (.field-error, .ds-btn-warn, .ds-stat-val.err-rate, toast/
64
+ session error labels), not just the interactive-control (>=3:1) usages.
65
+ Darkened to clear AA on --paper (5.29:1), --paper-2 (4.78:1), and the
66
+ thebird warm-paper preset (5.25:1) while staying visually a clear
67
+ warm red. */
68
+ --warn: #C41C0C;
63
69
  /* Syntax-token aliases: light values pass 4.5:1 on paper; the dark blocks
64
70
  restore the bright dark-tuned originals. Components reference ONLY these. */
65
71
  --code-string: var(--green);
@@ -475,7 +481,7 @@ select:focus-visible {
475
481
  --accent: var(--acid); --accent-fg: var(--ink); --accent-ink: var(--acid-deep);
476
482
  --accent-tint: color-mix(in oklab, var(--accent-ink) 22%, var(--bg));
477
483
  /* A paper island under a dark ancestor must not inherit the dark signal pair. */
478
- --flame: #C53E00; --amber: #7C570F; --warn: #E0241A; --sky: #3A6EFF;
484
+ --flame: #C53E00; --amber: #7C570F; --warn: #C41C0C; --sky: #3A6EFF;
479
485
  }
480
486
 
481
487
  /* thebird — warm-paper brand preset. A first-class swappable theme: it lives
package/dist/247420.css CHANGED
@@ -60,8 +60,14 @@
60
60
  --sky: #3A6EFF;
61
61
  /* --warn = interactive danger controls (buttons, banners, menus, error
62
62
  inputs); --danger below = passive error/status text and metrics
63
- (kpi/sparkline deltas, auth-error text). Two tokens, one convention. */
64
- --warn: #E0241A;
63
+ (kpi/sparkline deltas, auth-error text). Two tokens, one convention.
64
+ #E0241A measured 4.19:1 on --paper — fails WCAG AA 4.5:1 for the many
65
+ TEXT usages (.field-error, .ds-btn-warn, .ds-stat-val.err-rate, toast/
66
+ session error labels), not just the interactive-control (>=3:1) usages.
67
+ Darkened to clear AA on --paper (5.29:1), --paper-2 (4.78:1), and the
68
+ thebird warm-paper preset (5.25:1) while staying visually a clear
69
+ warm red. */
70
+ --warn: #C41C0C;
65
71
  /* Syntax-token aliases: light values pass 4.5:1 on paper; the dark blocks
66
72
  restore the bright dark-tuned originals. Components reference ONLY these. */
67
73
  --code-string: var(--green);
@@ -477,7 +483,7 @@
477
483
  --accent: var(--acid); --accent-fg: var(--ink); --accent-ink: var(--acid-deep);
478
484
  --accent-tint: color-mix(in oklab, var(--accent-ink) 22%, var(--bg));
479
485
  /* A paper island under a dark ancestor must not inherit the dark signal pair. */
480
- --flame: #C53E00; --amber: #7C570F; --warn: #E0241A; --sky: #3A6EFF;
486
+ --flame: #C53E00; --amber: #7C570F; --warn: #C41C0C; --sky: #3A6EFF;
481
487
  }
482
488
 
483
489
  /* thebird — warm-paper brand preset. A first-class swappable theme: it lives
@@ -7093,6 +7099,37 @@
7093
7099
  .ds-247420 .agentchat-cwd-input[aria-invalid='true'] { border-color: var(--flame); box-shadow: inset 0 0 0 var(--bw-hair) var(--flame); }
7094
7100
  .ds-247420 .agentchat-cwd-input[aria-busy='true'] { border-color: var(--fg-3); box-shadow: inset 0 0 0 var(--bw-hair) var(--fg-3); }
7095
7101
 
7102
+ /* cwd practicality upgrade: editing mode stacks the input row plus any
7103
+ optional roots/recent/browse rows the host wires, instead of a single flat
7104
+ row - each sub-row wraps independently at narrow widths. */
7105
+ .ds-247420 .agentchat-cwd-editing { flex-direction: column; align-items: stretch; }
7106
+ .ds-247420 .agentchat-cwd-row { display: flex; align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap; }
7107
+ .ds-247420 .agentchat-cwd-roots, .ds-247420 .agentchat-cwd-recent {
7108
+ display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
7109
+ }
7110
+ .ds-247420 .agentchat-cwd-recent-label { font-size: var(--fs-tiny); color: var(--fg-3); }
7111
+ .ds-247420 .agentchat-cwd-chip {
7112
+ background: var(--bg-2); border: var(--bw-hair) solid var(--rule); color: var(--fg-2);
7113
+ border-radius: var(--r-pill); padding: 3px 10px; font: inherit; font-size: var(--fs-tiny);
7114
+ cursor: pointer;
7115
+ }
7116
+ .ds-247420 .agentchat-cwd-chip:hover { border-color: var(--accent); color: var(--fg); }
7117
+ .ds-247420 .agentchat-cwd-chip:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
7118
+ .ds-247420 .agentchat-cwd-browse {
7119
+ border: var(--bw-hair) solid var(--rule); border-radius: var(--r-1);
7120
+ padding: var(--space-2, 8px); background: var(--bg-2);
7121
+ display: flex; flex-direction: column; gap: 6px;
7122
+ max-height: 220px;
7123
+ }
7124
+ .ds-247420 .agentchat-cwd-browse-list { overflow-y: auto; display: flex; flex-direction: column; max-height: 160px; }
7125
+ .ds-247420 .agentchat-cwd-browse-item {
7126
+ background: none; border: none; color: var(--fg-2); text-align: left;
7127
+ padding: 6px 8px; border-radius: var(--r-1); font: inherit; font-size: var(--fs-tiny);
7128
+ cursor: pointer;
7129
+ }
7130
+ .ds-247420 .agentchat-cwd-browse-item:hover, .ds-247420 .agentchat-cwd-browse-item:focus-visible { background: var(--bg-3, var(--bg)); color: var(--fg); }
7131
+ .ds-247420 .agentchat-cwd-browse-loading, .ds-247420 .agentchat-cwd-browse-empty { padding: 6px 8px; font-size: var(--fs-tiny); color: var(--fg-3); }
7132
+
7096
7133
  /* head + thread */
7097
7134
  .ds-247420 .agentchat-head {
7098
7135
  display: flex;
@@ -7293,7 +7330,7 @@
7293
7330
  }
7294
7331
  /* Coarse-pointer (touch): raise cwd button to 44px minimum tap target */
7295
7332
  @media (pointer: coarse) {
7296
- .ds-247420 .agentchat-cwd-btn { min-height: 44px; }
7333
+ .ds-247420 .agentchat-cwd-btn, .ds-247420 .agentchat-cwd-chip, .ds-247420 .agentchat-cwd-browse-item { min-height: 44px; }
7297
7334
  }
7298
7335
 
7299
7336
  /* ----------------------------------------------------------------------------
@@ -7379,7 +7416,7 @@
7379
7416
  label sticks to the top of the scroll area for Claude-Desktop-style headers. */
7380
7417
  .ds-247420 .ds-session-group { display: flex; flex-direction: column; }
7381
7418
  .ds-247420 .ds-session-group-rows { display: flex; flex-direction: column; gap: 2px; }
7382
- .ds-247420 .ds-session-group-label { position: sticky; top: 0; z-index: 1; background: var(--bg-1, var(--bg)); font-size: var(--fs-tiny); font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tr-caps); padding: var(--space-2) var(--space-2) var(--space-1); }
7419
+ .ds-247420 .ds-session-group-label { position: sticky; top: 0; z-index: 1; background: var(--bg-1, var(--bg)); font-size: var(--fs-tiny); font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tr-label); padding: var(--space-2) var(--space-2) var(--space-1); }
7383
7420
  .ds-247420 .ds-session-row {
7384
7421
  position: relative; display: flex; align-items: center; gap: var(--space-2);
7385
7422
  width: 100%; padding: var(--space-2); min-height: 52px; margin-bottom: 2px;
@@ -7676,15 +7713,15 @@
7676
7713
  .ds-247420 .ds-session-meta-item + .ds-session-meta-item::before { content: '\00B7'; color: var(--fg-3); margin-right: var(--space-1); }
7677
7714
  .ds-247420 .ds-session-meta-label { color: var(--fg-3); }
7678
7715
  .ds-247420 .ds-session-meta-value { font-family: var(--ff-mono); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
7679
- .ds-247420 .ds-session-meta-copy {
7716
+ .ds-247420 .ds-session-meta-copy, .ds-247420 .ds-session-meta-action {
7680
7717
  padding: 2px 8px; min-height: 24px; cursor: pointer;
7681
7718
  background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-1);
7682
7719
  color: var(--fg-3); font-family: var(--ff-body); font-size: var(--fs-micro);
7683
7720
  }
7684
- .ds-247420 .ds-session-meta-copy:hover { background: var(--bg-3); color: var(--fg); }
7685
- .ds-247420 .ds-session-meta-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
7721
+ .ds-247420 .ds-session-meta-copy:hover, .ds-247420 .ds-session-meta-action:hover { background: var(--bg-3); color: var(--fg); }
7722
+ .ds-247420 .ds-session-meta-copy:focus-visible, .ds-247420 .ds-session-meta-action:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
7686
7723
  @media (pointer: coarse), (max-width: 640px) {
7687
- .ds-247420 .ds-session-meta-copy { min-height: 44px; min-width: 44px; }
7724
+ .ds-247420 .ds-session-meta-copy, .ds-247420 .ds-session-meta-action { min-height: 44px; min-width: 44px; }
7688
7725
  }
7689
7726
 
7690
7727
  /* ============================================================================
@@ -7933,7 +7970,7 @@
7933
7970
 
7934
7971
  /* Live command-center: status-bucket groups + header breakdown + heartbeat. */
7935
7972
  .ds-247420 .ds-dash-group { display: flex; flex-direction: column; gap: var(--space-2); }
7936
- .ds-247420 .ds-dash-group-label { font-size: var(--fs-tiny); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--fg-3); padding: 0 var(--space-1); }
7973
+ .ds-247420 .ds-dash-group-label { font-size: var(--fs-tiny); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--fg-3); padding: 0 var(--space-1); }
7937
7974
  .ds-247420 .ds-dash-breakdown { display: flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); color: var(--fg-2); }
7938
7975
  /* Shape-channel discs mirror the .status-dot-disc vocabulary (solid /
7939
7976
  solid+halo / hollow ring) so a colour-blind user can scan the breakdown by