web-ui: a UI pass over the chat, inbox, settings, and sidebar surfaces

plugins/web-ui/src/chat.ts

@@ -128,6 +128,7 @@ import { createForkOriginController, forkOriginView } from "./fork-origin";
 import { base64ToBytes } from "./paste-text";
 import { tip } from "./tooltip";
 import { workSeconds, workedLabel } from "./work-duration";
+import { markClampedPrompts } from "./prompt-clamp";
 import { decorateTextCodeBlocks, normalizePlainTextFences } from "./text-code";
 
 import { createTranscriptViewport } from "./transcript-viewport";
@@ -150,6 +151,7 @@ interface SettledRowKey {
   speakerLabel: string | undefined;
   edited: boolean;
   deleted: boolean;
+  expanded: boolean;
   tpl: TemplateResult | typeof nothing;
 }
 const settledRowCache = new WeakMap<object, SettledRowKey>();
@@ -219,6 +221,7 @@ export function createChatSurface(
     inheritedLoaded: false,
     pins: [] as SessionPin[],
     pinsExpanded: false,
+    expandedPrompt: null as number | null,
     labelSpeakers: false,
   };
 
@@ -398,6 +401,7 @@ export function createChatSurface(
     chatState.earlierCount = 0;
     chatState.loadingEarlier = false;
     chatState.pins = [];
+    chatState.expandedPrompt = null;
     chatState.host = document.createElement("div");
     chatState.host.className = "custom-chat";
 
@@ -929,6 +933,7 @@ export function createChatSurface(
     if (!sameSession) {
       chatState.inheritedExpanded = false;
       chatState.pins = [];
+      chatState.expandedPrompt = null;
     }
     syncLocation();
 
@@ -1029,6 +1034,7 @@ export function createChatSurface(
       );
       requestAnimationFrame(() => {
         decorateTextCodeBlocks(host);
+        markClampedPrompts(host);
         if (host.isConnected) transcriptViewport.sync(host.querySelector<HTMLElement>(".chat-scroll"));
       });
     };
@@ -1069,6 +1075,12 @@ export function createChatSurface(
     else readonlyRedraw?.();
   }
 
+  function togglePromptExpanded(index: number): void {
+    chatState.expandedPrompt = chatState.expandedPrompt === index ? null : index;
+    if (chatState.agent) drawActiveChat(chatState.agent);
+    else readonlyRedraw?.();
+  }
+
   function linkifiedText(text: string): TemplateResult {
     return html`${splitLinks(text).map((seg) =>
       seg.kind === "link"
@@ -1286,7 +1298,10 @@ export function createChatSurface(
       chatState.host,
     );
     decorateStreamingTail();
-    requestAnimationFrame(() => decorateTextCodeBlocks(chatState.host));
+    requestAnimationFrame(() => {
+      decorateTextCodeBlocks(chatState.host);
+      markClampedPrompts(chatState.host);
+    });
     ctx.composer.resizeComposer();
     scrollTranscript(opts.forceScroll);
     postCurrentPaneState();
@@ -1422,6 +1437,7 @@ export function createChatSurface(
     const speakerLabel = speakerLabelFor(message);
     const edited = Boolean((message as { edited?: boolean }).edited);
     const deleted = Boolean((message as { deleted?: boolean }).deleted);
+    const expanded = chatState.expandedPrompt === index;
     const hit = settledRowCache.get(message as object);
     if (
       hit &&
@@ -1437,7 +1453,8 @@ export function createChatSurface(
       hit.forkable === forkable &&
       hit.speakerLabel === speakerLabel &&
       hit.edited === edited &&
-      hit.deleted === deleted
+      hit.deleted === deleted &&
+      hit.expanded === expanded
     ) {
       return hit.tpl;
     }
@@ -1456,6 +1473,7 @@ export function createChatSurface(
       speakerLabel,
       edited,
       deleted,
+      expanded,
       tpl,
     });
     return tpl;
@@ -1476,10 +1494,21 @@ export function createChatSurface(
         <article class="message-row user-row ${steered ? "steered-row" : ""}" data-index=${index}>
           ${steered ? html`<div class="steer-label">↪ steered the running task</div>` : nothing}
           ${speaker ? html`<div class="speaker-label">${speaker}</div>` : nothing}
-          <div class="message-bubble user-bubble ${deleted ? "deleted-bubble" : ""}">
+          <div
+            class="message-bubble user-bubble ${deleted ? "deleted-bubble" : ""}"
+            data-expanded=${chatState.expandedPrompt === index ? "true" : "false"}
+          >
             ${isReadOnlySlackView() ? slackWireBubble(messageText(message)) : markdown(messageText(message))}
             ${attachments.length ? html`<div class="message-files">${attachments.map(userAttachmentBadge)}</div>` : nothing}
             ${edited || deleted ? html`<span class="revision-badge">(${deleted ? "deleted" : "edited"})</span>` : nothing}
+            <button
+              class="prompt-toggle"
+              type="button"
+              aria-expanded=${chatState.expandedPrompt === index ? "true" : "false"}
+              @click=${() => togglePromptExpanded(index)}
+            >
+              ${chatState.expandedPrompt === index ? "Show less" : "Show more"}
+            </button>
           </div>
           ${
             sendFailure

plugins/web-ui/src/contexts.ts

@@ -2,8 +2,6 @@ import { html, nothing, render, type TemplateResult } from "lit";
 import {
   ArrowLeft,
   Boxes,
-  Check,
-  ChevronDown,
   Folder,
   FolderPlus,
   Hash,
@@ -27,7 +25,7 @@ import {
 } from "./core-bridge";
 import { UI_BASE } from "./deep-link";
 import { errMessage } from "../../chassis/src/errors";
-import { actionSnippet, closeFormMenus, fieldSelect, formatBytes, icon, initials, relTime, toggleFormMenu } from "./ui";
+import { actionSnippet, fieldSelect, formatBytes, icon, initials, menuSelect, relTime } from "./ui";
 import { appState, replacePanePreservingFocus, switchView, syncUrlFromState } from "./shell";
 import { startNewChat } from "./sessions";
 import { groupDmTitle, openSession, refreshSessions, sessionsState, slackLogo, surfaceOf } from "./sessions";
@@ -274,38 +272,21 @@ export function scopeChip(scopeId: string | null, fallbackName?: string | null):
 }
 
 export function scopeFilterControl(current: string | null, onSelect: (scopeId: string | null) => void): TemplateResult {
-  const label = current ? metaForScope(current).title : "All contexts";
-  const option = (scopeId: string | null, text: string, glyph: IconNode) => {
-    const active = (current ?? null) === scopeId;
-    return html`
-      <button
-        class="menu-option ${active ? "active" : ""}"
-        type="button"
-        role="menuitemradio"
-        aria-checked=${active ? "true" : "false"}
-        @click=${(e: Event) => {
-          e.stopPropagation();
-          closeFormMenus();
-          onSelect(scopeId);
-        }}
-      >
-        <span class="menu-option-label scope-option-label">${icon(glyph, 14)}<span>${text}</span></span>
-        ${active ? icon(Check, 15) : nothing}
-      </button>
-    `;
-  };
-  return html`
-    <div class="menu-control form-menu-control scope-filter">
-      <button class="menu-button" type="button" aria-haspopup="menu" aria-expanded="false" @click=${toggleFormMenu}>
-        <span class="menu-label">Filter by: ${label}</span>${icon(ChevronDown, 14)}
-      </button>
-      <div class="menu-popover" role="menu" hidden>
-        <div class="menu-title">Filter by context</div>
-        ${option(null, "All contexts", Boxes)}
-        ${contextsState.list.map((c) => option(c.scopeId, contextMeta(c).title, contextMeta(c).glyph))}
-      </div>
-    </div>
-  `;
+  return menuSelect({
+    value: current,
+    prefix: "Filter by: ",
+    ariaLabel: "Filter by context",
+    className: "scope-filter",
+    onSelect,
+    options: [
+      { value: null, label: "All contexts", glyph: Boxes },
+      ...contextsState.list.map((c) => ({
+        value: c.scopeId,
+        label: contextMeta(c).title,
+        glyph: contextMeta(c).glyph,
+      })),
+    ],
+  });
 }
 
 function sessionsIn(scopeId: string): CoreSession[] {

plugins/web-ui/src/crons.ts

@@ -362,7 +362,7 @@ function cronPageRow(c: CronView, mine: boolean): TemplateResult {
 function cronRowActions(c: CronView): TemplateResult {
   let stateAction = html`
     <button
-      class="icon-btn subtle cron-action-btn"
+      class="icon-btn subtle compact"
       type="button"
       ${tip("Enable")}
       aria-label="Enable cron"
@@ -374,7 +374,7 @@ function cronRowActions(c: CronView): TemplateResult {
   if (c.archived) {
     stateAction = html`
       <button
-        class="icon-btn subtle cron-action-btn"
+        class="icon-btn subtle compact"
         type="button"
         ${tip("Unarchive")}
         aria-label="Unarchive cron"
@@ -386,7 +386,7 @@ function cronRowActions(c: CronView): TemplateResult {
   } else if (c.enabled) {
     stateAction = html`
       <button
-        class="icon-btn subtle cron-action-btn"
+        class="icon-btn subtle compact"
         type="button"
         ${tip("Disable")}
         aria-label="Disable cron"
@@ -399,7 +399,7 @@ function cronRowActions(c: CronView): TemplateResult {
   return html`
     <div class="cron-row-actions" aria-label="Cron actions">
       <button
-        class="icon-btn subtle cron-action-btn"
+        class="icon-btn subtle compact"
         type="button"
         ${tip("Edit")}
         aria-label="Edit cron"
@@ -416,7 +416,7 @@ function cronRowActions(c: CronView): TemplateResult {
           ? nothing
           : html`
               <button
-                class="icon-btn subtle cron-action-btn"
+                class="icon-btn subtle compact"
                 type="button"
                 ${tip("Archive")}
                 aria-label="Archive cron"