feat(web): chats are mail threads with one agent; sidebar sections workbenches and chats (CL-8432)

apps/web/src/app.css

@@ -3793,3 +3793,70 @@ button.mission-control-jump-row:hover {
   font-size: 0.85rem;
   font-weight: 600;
 }
+
+/* Sidebar sections: Workbenches above Chats, each with its own label. */
+.shell-panel-section-label {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted-foreground);
+}
+.shell-panel-see-all {
+  padding: 0.25rem 0.5rem;
+  text-align: left;
+  font-size: 0.78rem;
+  color: var(--muted-foreground);
+  background: none;
+  border: 0;
+  cursor: pointer;
+}
+.shell-panel-see-all:hover {
+  color: var(--foreground);
+}
+
+/* A chat: transcript above, composer below. */
+.chat-thread-title {
+  margin: 0 0 1rem;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+.chat-thread-messages {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-bottom: 1rem;
+}
+.chat-thread-message {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+}
+.chat-thread-body {
+  min-width: 0;
+  font-size: 0.9rem;
+  line-height: 1.55;
+}
+.chat-thread-error {
+  margin: 0.5rem 0;
+  font-size: 0.82rem;
+  color: var(--destructive);
+}
+.chat-agent-picker {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  font-size: 0.82rem;
+  color: var(--muted-foreground);
+}
+.chat-composer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: flex-end;
+}
+.chat-composer > textarea {
+  width: 100%;
+}

apps/web/src/chat-path.ts

@@ -0,0 +1,31 @@
+// Chat deep links. `/chats/new` composes a first message to an agent;
+// `/chats/:id` is one chat, addressed by its mailbox thread root uid (or
+// a local id while the agent has not answered yet).
+
+/** One key factory for every chat read, so a send can invalidate the
+ * listing, the transcript, and the agent roster in one call. */
+export const chatKeys = {
+  scope: (tenantId: string) => ["tenant", tenantId, "chats"] as const,
+  list: (tenantId: string) => ["tenant", tenantId, "chats", "list"] as const,
+  agents: (tenantId: string) => ["tenant", tenantId, "chats", "agents"] as const,
+  one: (tenantId: string, chatId: string) => ["tenant", tenantId, "chats", "one", chatId] as const,
+  childTenants: (tenantId: string) => ["tenant", tenantId, "child-tenants"] as const,
+};
+
+export const CHATS_PATH_PREFIX = "/chats";
+export const NEW_CHAT_PATH = `${CHATS_PATH_PREFIX}/new`;
+
+export function chatPath(chatId: string): string {
+  return `${CHATS_PATH_PREFIX}/${encodeURIComponent(chatId)}`;
+}
+
+export function chatIdFromPath(path: string): string | null {
+  if (!path.startsWith(`${CHATS_PATH_PREFIX}/`)) return null;
+  const segment = path.slice(CHATS_PATH_PREFIX.length + 1);
+  if (segment === "" || segment === "new" || segment.includes("/")) return null;
+  return decodeURIComponent(segment);
+}
+
+export function isChatPath(path: string): boolean {
+  return path === CHATS_PATH_PREFIX || path.startsWith(`${CHATS_PATH_PREFIX}/`);
+}