anentrypoint-design 0.0.196 → 0.0.197

package/app-shell.css

@@ -1071,6 +1071,39 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   flex-direction: column;
   gap: 4px;
 }
+.ds-file-grid:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-2); }
+
+/* Listing wrapper holds the optional filter + sort header above the grid. */
+.ds-file-listing { display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; }
+.ds-file-filter { padding: 0 0 var(--space-1); }
+.ds-file-filter-input {
+  width: 100%; padding: 8px 12px; font-size: var(--fs-sm);
+  background: var(--bg); color: var(--fg);
+  border: var(--bw-hair) solid var(--rule); border-radius: var(--r-2);
+}
+.ds-file-filter-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-file-sort { display: flex; gap: var(--space-2); padding: 0 var(--space-2) var(--space-1); }
+.ds-file-sort-btn {
+  font-size: var(--fs-tiny); font-family: var(--ff-mono); color: var(--fg-3);
+  background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: var(--r-1);
+}
+.ds-file-sort-btn:hover { color: var(--fg-2); background: var(--bg-2); }
+.ds-file-sort-btn.active { color: var(--accent); }
+.ds-file-sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+
+/* Skeleton shimmer rows shown while a directory loads. */
+.ds-file-row-skeleton { cursor: default; pointer-events: none; }
+.ds-skel { display: inline-block; border-radius: var(--r-1); background: var(--bg-2); position: relative; overflow: hidden; }
+.ds-skel::after {
+  content: ''; position: absolute; inset: 0;
+  background: linear-gradient(90deg, transparent, var(--bg-3), transparent);
+  transform: translateX(-100%); animation: ds-skel-shimmer 1.2s infinite;
+}
+.ds-skel-icon { width: 22px; height: 22px; }
+.ds-skel-title { height: 12px; width: 60%; }
+.ds-skel-meta { height: 10px; width: 64px; margin-left: auto; }
+@keyframes ds-skel-shimmer { 100% { transform: translateX(100%); } }
+@media (prefers-reduced-motion: reduce) { .ds-skel::after { animation: none; } }
 
 /* File row — linear layout (icon · title · meta · actions) */
 .ds-file-row {
@@ -2711,3 +2744,155 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
   .app-topbar > :last-child { display: none; }
   .brand { font-size: var(--fs-tiny); }
 }
+
+/* ----------------------------------------------------------------------------
+   WorkspaceShell — Claude-Desktop / cowork three-column app shell.
+   Columns: [ws-rail] [ws-sessions?] [ws-content] [ws-pane?]
+   Collapse via .ws-rail-collapsed / .ws-pane-collapsed classes on .ws-shell.
+   All sizing/colour from kit tokens; no hardcoded palette.
+---------------------------------------------------------------------------- */
+.ws-shell {
+  --ws-rail-w: 232px;
+  --ws-rail-w-collapsed: 60px;
+  --ws-sessions-w: 296px;
+  --ws-pane-w: 320px;
+  display: grid;
+  grid-template-columns: var(--ws-rail-w) var(--ws-sessions-w) 1fr var(--ws-pane-w);
+  grid-template-areas: "rail sessions content pane";
+  height: 100%;
+  min-height: 0;
+  background: var(--bg);
+  color: var(--fg);
+}
+.ws-shell.ws-no-sessions { grid-template-columns: var(--ws-rail-w) 1fr var(--ws-pane-w); grid-template-areas: "rail content pane"; }
+.ws-shell.ws-no-pane.ws-no-sessions { grid-template-columns: var(--ws-rail-w) 1fr; grid-template-areas: "rail content"; }
+.ws-shell.ws-no-pane:not(.ws-no-sessions) { grid-template-columns: var(--ws-rail-w) var(--ws-sessions-w) 1fr; grid-template-areas: "rail sessions content"; }
+.ws-shell.ws-rail-collapsed { --ws-rail-w: var(--ws-rail-w-collapsed); }
+.ws-shell.ws-pane-collapsed { --ws-pane-w: 0px; }
+
+/* Rail (left nav) */
+.ws-rail {
+  grid-area: rail;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--bg-2);
+  border-right: var(--bw-hair) solid var(--bg-3);
+  overflow: hidden;
+  transition: width var(--dur-base) var(--ease);
+}
+.ws-rail-toggle {
+  position: absolute; top: var(--space-2); right: var(--space-2);
+  width: 36px; height: 36px;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: transparent; border: none; color: var(--fg-2);
+  border-radius: var(--r-1); cursor: pointer;
+}
+.ws-rail-toggle:hover { background: var(--bg-3); color: var(--fg); }
+.ws-rail-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ws-rail-inner { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: var(--space-3) var(--space-2); gap: var(--space-2); }
+.ws-rail-head { display: flex; align-items: center; min-height: 36px; padding: 0 var(--space-2); }
+.ws-rail-brand { font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-body); color: var(--fg); white-space: nowrap; overflow: hidden; }
+.ws-rail-action {
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-2) var(--space-3); margin: var(--space-1) 0;
+  background: var(--accent); color: var(--accent-fg, var(--bg));
+  border: none; border-radius: var(--r-1); cursor: pointer;
+  font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 600;
+  min-height: 40px; white-space: nowrap; overflow: hidden;
+}
+.ws-rail-action:hover { filter: brightness(1.08); }
+.ws-rail-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ws-rail-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
+.ws-rail-item {
+  display: flex; align-items: center; gap: var(--space-2);
+  width: 100%; padding: var(--space-2); min-height: 44px;
+  background: transparent; border: none; color: var(--fg-2);
+  border-radius: var(--r-1); cursor: pointer; text-align: left;
+  font-family: var(--ff-body); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden;
+}
+.ws-rail-item:hover { background: var(--bg-3); color: var(--fg); }
+.ws-rail-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.ws-rail-item.active { background: var(--accent-tint); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); }
+.ws-rail-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
+.ws-rail-item-count { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3); }
+.ws-rail-foot { margin-top: auto; padding-top: var(--space-2); border-top: var(--bw-hair) solid var(--bg-3); }
+
+/* Collapsed rail: icon-only — hide text labels, center icons, drop toggle's far-right pin */
+.ws-rail-collapsed .ws-rail-brand,
+.ws-rail-collapsed .ws-rail-action-label,
+.ws-rail-collapsed .ws-rail-item-label,
+.ws-rail-collapsed .ws-rail-item-count { display: none; }
+.ws-rail-collapsed .ws-rail-item,
+.ws-rail-collapsed .ws-rail-action { justify-content: center; gap: 0; }
+.ws-rail-collapsed .ws-rail-head { justify-content: center; }
+
+/* Sessions column */
+.ws-sessions {
+  grid-area: sessions;
+  min-height: 0; display: flex; flex-direction: column;
+  background: var(--bg); border-right: var(--bw-hair) solid var(--bg-3);
+  overflow: hidden;
+}
+.ws-no-sessions .ws-sessions { display: none; }
+
+/* Content column */
+.ws-content { grid-area: content; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
+.ws-crumb { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-1); border-bottom: var(--bw-hair) solid var(--bg-3); }
+.ws-crumb-main { flex: 1 1 auto; min-width: 0; }
+.ws-main { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
+.ws-main:focus { outline: none; }
+
+/* Right context pane */
+.ws-pane {
+  grid-area: pane; position: relative;
+  min-height: 0; display: flex; flex-direction: column;
+  background: var(--bg-2); border-left: var(--bw-hair) solid var(--bg-3);
+  overflow: hidden; transition: width var(--dur-base) var(--ease);
+}
+.ws-pane-collapsed .ws-pane { width: 0; border-left: none; }
+.ws-pane-collapsed .ws-pane > :not(.ws-pane-toggle) { display: none; }
+.ws-pane-toggle {
+  position: absolute; top: var(--space-2); left: calc(-1 * var(--space-5));
+  width: 28px; height: 28px;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); color: var(--fg-2);
+  border-radius: var(--r-1); cursor: pointer; z-index: 2;
+}
+.ws-pane-toggle:hover { background: var(--bg-3); color: var(--fg); }
+.ws-pane-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+/* Responsive: below 900px collapse to a single content column; rail+sessions+pane
+   become overlay drawers the host can toggle, or simply hide on mobile. We keep it
+   honest: stack rail (icon row) over content, hide sessions+pane unless toggled. */
+@media (max-width: 900px) {
+  .ws-shell,
+  .ws-shell.ws-no-sessions,
+  .ws-shell.ws-no-pane,
+  .ws-shell.ws-no-pane.ws-no-sessions {
+    grid-template-columns: 1fr;
+    grid-template-areas: "content";
+  }
+  .ws-rail { position: fixed; inset: 0 auto 0 0; width: var(--ws-rail-w-collapsed); z-index: 40; }
+  .ws-sessions { position: fixed; inset: 0 auto 0 var(--ws-rail-w-collapsed); width: min(var(--ws-sessions-w), 80vw); z-index: 42; transform: translateX(-110%); transition: transform var(--dur-base) var(--ease); }
+  .ws-shell.ws-sessions-open .ws-sessions { transform: translateX(0); }
+  /* On mobile the pane is a drawer driven by .ws-pane-open (an explicit open
+     intent), NOT by :not(.ws-pane-collapsed) - the desktop collapse default is
+     "open" which would otherwise pop the pane over the thread on every load. */
+  .ws-pane { position: fixed; inset: 0 0 0 auto; width: min(var(--ws-pane-w), 85vw); z-index: 42; transform: translateX(110%); transition: transform var(--dur-base) var(--ease); }
+  .ws-shell.ws-pane-open .ws-pane { transform: translateX(0); }
+  .ws-content { grid-area: content; padding-left: var(--ws-rail-w-collapsed); }
+  .ws-rail-collapsed .ws-rail-item-label, .ws-rail-collapsed .ws-rail-brand { display: none; }
+  /* Tap-scrim behind an open drawer; dismiss on click. Hidden unless a drawer
+     is open so it never blocks the content area on desktop. */
+  .ws-scrim { display: none; position: fixed; inset: 0; z-index: 41; background: color-mix(in srgb, var(--fg) 38%, transparent); }
+  .ws-shell.ws-sessions-open .ws-scrim, .ws-shell.ws-pane-open .ws-scrim { display: block; }
+  /* The mobile drawer-toggle affordances live in the crumb bar. */
+  .ws-drawer-toggle { display: inline-flex; }
+}
+/* Drawer toggles are mobile-only chrome; hidden on the desktop grid. */
+.ws-drawer-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: none; color: var(--fg-2); cursor: pointer; border-radius: var(--r-1); }
+.ws-drawer-toggle:hover { background: var(--bg-2); color: var(--fg); }
+.ws-drawer-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ws-scrim { display: none; }

package/chat.css

@@ -110,6 +110,8 @@
 }
 .agentchat-title { font-size: 1em; margin: 0; }
 .agentchat-sub { font-size: .85em; color: var(--fg-3); }
+/* Thread wrapper hosts the absolutely-positioned jump-to-latest button. */
+.agentchat-thread-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
 .agentchat-thread {
   flex: 1;
   min-height: 0;
@@ -119,6 +121,39 @@
   gap: var(--space-2, 8px);
 }
 
+/* Jump-to-latest: hidden until the thread scroll listener adds .show. */
+.agentchat-jump {
+  position: absolute; right: 16px; bottom: 12px; z-index: 3;
+  display: none; align-items: center; gap: .35em;
+  padding: .4em .8em; font: inherit; font-size: .8em; cursor: pointer;
+  border-radius: 999px; border: var(--bw-hair) solid var(--rule);
+  background: var(--bg-2); color: var(--fg-2, var(--fg));
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--fg) 14%, transparent);
+}
+.agentchat-jump.show { display: inline-flex; }
+.agentchat-jump:hover { background: var(--bg-3); }
+.agentchat-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+/* Streaming caret: a thin blinking bar at the live edge of an assistant turn. */
+.chat-stream-caret {
+  display: inline-block; width: 2px; height: 1.05em; margin-left: 1px;
+  vertical-align: text-bottom; background: var(--accent, var(--fg));
+  animation: chat-caret-blink 1s step-end infinite;
+}
+@keyframes chat-caret-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .chat-stream-caret { animation: none; opacity: .8; } }
+
+/* Per-message hover-revealed action row (copy / retry / edit). */
+.chat-msg-actions { display: flex; gap: 2px; margin-top: 3px; opacity: 0; transition: opacity var(--dur-snap, .12s) var(--ease, ease); }
+.chat-msg:hover .chat-msg-actions, .chat-msg:focus-within .chat-msg-actions { opacity: 1; }
+.chat-msg-action {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 26px; height: 26px; padding: 0; cursor: pointer;
+  border: none; border-radius: var(--r-1, 4px); background: none; color: var(--fg-3);
+}
+.chat-msg-action:hover { background: var(--bg-2); color: var(--fg); }
+.chat-msg-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
+
 /* Empty state: a fresh thread is an invitation, not a void. */
 .agentchat-empty {
   margin: auto;
@@ -192,3 +227,102 @@
   .agentchat-cwd-text { max-width: 42vw; }
   .agentchat-controls { gap: .4em; }
 }
+
+/* ----------------------------------------------------------------------------
+   Global status disc — a CSS-drawn status indicator (no text glyph) usable
+   outside .agentchat-status (session rows, dashboard cards). Tone via modifier.
+---------------------------------------------------------------------------- */
+.status-dot-disc {
+  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
+  background: var(--fg-3); flex: 0 0 auto;
+}
+.status-dot-disc.status-dot-live { background: var(--green); }
+.status-dot-disc.status-dot-error { background: var(--flame); }
+
+/* ----------------------------------------------------------------------------
+   ConversationList — left-rail "Chats" column.
+---------------------------------------------------------------------------- */
+.ds-sessions { display: flex; flex-direction: column; min-height: 0; height: 100%; }
+.ds-session-head { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-bottom: var(--bw-hair) solid var(--bg-3); }
+.ds-session-new {
+  display: flex; align-items: center; gap: var(--space-2); justify-content: center;
+  padding: var(--space-2) var(--space-3); min-height: 44px;
+  background: var(--accent); color: var(--accent-fg, var(--bg)); border: none;
+  border-radius: var(--r-1); cursor: pointer; font-family: var(--ff-body);
+  font-size: var(--fs-sm); font-weight: 600;
+}
+.ds-session-new:hover { filter: brightness(1.08); }
+.ds-session-new:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ds-session-search {
+  width: 100%; padding: var(--space-2) var(--space-3); min-height: 44px;
+  background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); color: var(--fg);
+  border-radius: var(--r-1); font-family: var(--ff-body); font-size: var(--fs-sm);
+}
+.ds-session-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-session-list, .ds-session-groups { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-2); }
+/* Grouped rows (Today/Yesterday/...) lay out like the flat list; the section
+   label sticks to the top of the scroll area for Claude-Desktop-style headers. */
+.ds-session-group { display: flex; flex-direction: column; }
+.ds-session-group-rows { display: flex; flex-direction: column; gap: 2px; }
+.ds-session-group-label { position: sticky; top: 0; z-index: 1; background: var(--bg-1, var(--bg)); font-size: var(--fs-tiny); color: var(--fg-3); text-transform: uppercase; letter-spacing: .04em; padding: var(--space-2) var(--space-2) var(--space-1); }
+.ds-session-row {
+  position: relative; display: flex; align-items: center; gap: var(--space-2);
+  width: 100%; padding: var(--space-2); min-height: 52px; margin-bottom: 2px;
+  background: transparent; border: none; border-radius: var(--r-1);
+  cursor: pointer; text-align: left; color: var(--fg);
+}
+.ds-session-row:hover { background: var(--bg-2); }
+.ds-session-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.ds-session-row.active { background: var(--accent-tint); box-shadow: inset 2px 0 0 var(--accent); }
+.ds-session-row.rail-green::before, .ds-session-row.rail-purple::before, .ds-session-row.rail-flame::before {
+  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px;
+}
+.ds-session-row.rail-green::before { background: var(--green); }
+.ds-session-row.rail-purple::before { background: var(--purple, var(--accent)); }
+.ds-session-row.rail-flame::before { background: var(--flame); }
+.ds-session-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.ds-session-title { font-size: var(--fs-sm); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ds-session-sub { font-size: var(--fs-tiny); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ds-session-meta { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
+.ds-session-agent { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3); }
+.ds-session-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
+.ds-session-state { padding: var(--space-5) var(--space-3); text-align: center; color: var(--fg-3); font-size: var(--fs-sm); }
+.ds-session-state-error { color: var(--flame); }
+
+/* ----------------------------------------------------------------------------
+   SessionDashboard — grid of live-session cards.
+---------------------------------------------------------------------------- */
+.ds-dash { display: flex; flex-direction: column; min-height: 0; }
+.ds-dash-header { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4) 0; }
+.ds-dash-count { font-size: var(--fs-sm); color: var(--fg-2); font-weight: 600; }
+.ds-dash-header .btn, .ds-dash-header .btn-primary { margin-left: auto; }
+.ds-dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); padding: var(--space-4); }
+.ds-dash-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-2); }
+.ds-dash-card.is-error { border-color: var(--flame); }
+.ds-dash-card-head { display: flex; align-items: center; gap: var(--space-2); }
+.ds-dash-status { font-size: var(--fs-tiny); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
+.ds-dash-status.is-running { color: var(--green); }
+.ds-dash-status.is-error { color: var(--flame); }
+.ds-dash-agent { font-size: var(--fs-body); font-weight: 600; color: var(--fg); }
+.ds-dash-model { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3); margin-left: auto; }
+.ds-dash-meta { display: flex; flex-direction: column; gap: 2px; }
+.ds-dash-cwd { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ds-dash-stat { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-2); }
+.ds-dash-activity { font-size: var(--fs-tiny); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ds-dash-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
+.ds-dash-state { padding: var(--space-6) var(--space-4); text-align: center; color: var(--fg-3); font-size: var(--fs-body); }
+.ds-dash-state-error { color: var(--flame); }
+
+@media (max-width: 640px) {
+  .ds-dash-grid { grid-template-columns: 1fr; padding: var(--space-3); }
+}
+
+/* ----------------------------------------------------------------------------
+   ContextPane — compact right-hand context panel for the chat surface.
+---------------------------------------------------------------------------- */
+.ds-context { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); }
+.ds-context .panel { background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-2); }
+.ds-context .row { font-size: var(--fs-sm); }
+.ds-context .row .meta { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-2); }
+.ds-context .row .sub { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ds-context-actions { display: flex; gap: var(--space-2); }