From 487993aa26a5a3a88e39f7e1b7a88317f1c96bf6 Mon Sep 17 00:00:00 2001
From: galuis116 <galuis116@gmail.com>
Date: Thu, 16 Jul 2026 05:37:02 -0400
Subject: [PATCH] docs(ui): audit ui-kit for existing chat-adjacent UI
 primitives (#6244)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Research-only groundwork for #6230's eventual chat interface: an
inventory of what apps/loopover-ui and packages/loopover-ui-kit
already have that a future chat surface could reuse against the four
primitives it will need (message list, composer, streaming renderer,
typing indicator).

- Reusable as-is: state-views.tsx's loading/empty/error scaffolding,
  scroll-area.tsx, avatar.tsx, and the raw textarea/input/button
  primitives.
- Close but needs adaptation: audit-feed.tsx (filtered live-data list,
  but table-rendered, not bubble-rendered), command-palette.tsx (the
  only text-input + filtered-list combo, but click-to-navigate, no
  Enter-to-submit), animated-terminal.tsx (interval-driven typewriter
  reveal over static scenes, the closest streaming-text precedent).
- Entirely absent: a submit-on-Enter composer, any real streaming
  consumer (grepped for EventSource/ReadableStream/text/event-stream
  across apps/loopover-ui/src — the one hit is a comment explaining
  why analytics-proxy.ts deliberately avoids a streaming body), a
  chat-bubble/message-list component, and an inline typing indicator.

No functional code changes accompany this doc, per the issue's own
scope ("do not build anything new").

Closes #6244
---
 .../src/chat-ui-primitives-audit.md           | 85 +++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 apps/loopover-ui/src/chat-ui-primitives-audit.md

diff --git a/apps/loopover-ui/src/chat-ui-primitives-audit.md b/apps/loopover-ui/src/chat-ui-primitives-audit.md
new file mode 100644
index 0000000000..1340b67bda
--- /dev/null
+++ b/apps/loopover-ui/src/chat-ui-primitives-audit.md
@@ -0,0 +1,85 @@
+# Chat-adjacent UI primitives audit (#6244)
+
+Part of #6230 (chat interface spec — scope/backend/placement still open there). This is groundwork
+only, per the issue's own scope: an inventory of what `apps/loopover-ui/src/components/**` and
+`packages/loopover-ui-kit/src/components/**` already have that a future chat surface could reuse,
+against the four primitives #6230 will eventually need. No code changes accompany this doc.
+
+## What exists and is reusable as-is
+
+- **Loading / empty / error scaffolding** — `apps/loopover-ui/src/components/site/state-views.tsx`
+  exports `LoadingState`, `EmptyState`, `ErrorState`, and the composing `StateBoundary`, plus a bare
+  `Spinner` (a `Loader2` icon with `animate-spin`, disabled under `motion-reduce`). These are already
+  the app-wide convention for "is this panel loading/empty/erroring" and would drop straight into a
+  chat panel's outer shell with no adaptation — see the note below on why `Spinner` is not itself a
+  typing indicator.
+- **Composer building blocks** — `packages/loopover-ui-kit/src/components/textarea.tsx` (a plain
+  `forwardRef` wrapper around `<textarea>`, token-styled, no built-in submit handling) and
+  `input.tsx`/`button.tsx` are the raw primitives a composer would be built from. They carry no
+  keyboard-submit or auto-grow logic themselves — see "entirely absent" below.
+- **Scrollable container** — `packages/loopover-ui-kit/src/components/scroll-area.tsx` wraps
+  Radix's `ScrollArea` with the app's scrollbar styling. This is the direct building block for a
+  scrollable message list's viewport; it renders whatever children are passed, so it doesn't imply
+  message layout on its own.
+- **Avatars** — `packages/loopover-ui-kit/src/components/avatar.tsx` (Radix `Avatar` wrapper,
+  image + fallback) is reusable as-is for per-message sender avatars.
+
+## What's close but would need adaptation
+
+- **`apps/loopover-ui/src/components/site/audit-feed.tsx`** (`AuditFeed`) is structurally the
+  closest existing analog to a filtered, live-data timeline: it owns filter state
+  (`reason`/`repoFullName`/`sinceIso`/`limit`), fetches and re-fetches on filter change, and renders
+  through the same `EmptyState`/`ErrorState`/`LoadingState` scaffolding above. But it renders results
+  as an HTML `<table>` with fixed columns (Time / Repository / Pull request / Reason / Remediation),
+  not a bubble/timeline list — reusing it for chat would mean keeping its data-fetching and state
+  shell but replacing the `<table>` row renderer with a per-message component (sender, bubble,
+  timestamp), which is effectively a rewrite of the view layer, not a prop change.
+- **`apps/loopover-ui/src/components/site/command-palette.tsx`** (`CommandPalette`) has the only
+  bare `<input>` + live-filtered scrollable `<ul>` combination in the app (⌘K-triggered, `Escape`
+  closes it, results navigate on click). It's close to "text input driving a list," but it is a
+  *search-and-navigate* palette, not a composer: there's no `onKeyDown` handling for `Enter` at all
+  (results are selected by click, not by keyboard submit), no multi-line/auto-grow textarea, and no
+  concept of "submit this text as a message." A submit-on-Enter composer would need to be built new,
+  informed by this file's open/close and keyboard-listener patterns rather than by reusing its input.
+- **`apps/loopover-ui/src/components/site/animated-terminal.tsx`** (`AnimatedTerminal`) is the
+  closest existing "reveal text incrementally" precedent: a `setInterval`-driven character-by-character
+  typewriter over `scene.prompt`, a `motion.pre` fade-in reveal for `scene.output` via
+  `AnimatePresence`, and a `useReducedMotion()` escape hatch that skips the animation outright. The
+  reveal mechanics (interval-driven character reveal, reduced-motion handling) are a reasonable
+  starting point for a streaming-text renderer, but the data source is a hardcoded
+  `DEFAULT_SCENES: TerminalScene[]` array timed by a fixed `HOLD` duration — there is no chunked
+  input, no cancellation on new input arriving mid-type, and no backpressure handling. Adapting it to
+  real streaming would mean replacing the `setInterval` scene-walk with a consumer of whatever chunk
+  source #6230 picks (see below), while keeping the reduced-motion and fade-in-reveal behavior.
+
+## What's entirely absent
+
+- **A submit-on-Enter composer.** No component anywhere in `apps/loopover-ui/src/components/**` or
+  `packages/loopover-ui-kit/src/components/**` wires a textarea to `Enter`-to-submit /
+  `Shift+Enter`-for-newline, and none auto-grow. `textarea.tsx` is unstyled-behavior raw material
+  only.
+- **A live streaming-text consumer.** Grepping `apps/loopover-ui/src` for
+  `EventSource|ReadableStream|text/event-stream|streaming` returns exactly one hit outside this
+  audit: a comment in `apps/loopover-ui/src/lib/analytics-proxy.ts` explaining that the analytics
+  proxy buffers its (tiny) request body specifically so it does *not* need a streaming/duplex
+  request — i.e. the one file that mentions "streaming" is explicitly the case of avoiding it. There
+  is no code anywhere in the app that consumes an `EventSource`, a `fetch` response's `ReadableStream`
+  body, or a `text/event-stream` response today. `animated-terminal.tsx` (above) is the closest
+  *rendering* precedent, but it has no real stream to consume from.
+- **A chat-bubble / message-list component.** Nothing pairs an avatar, a role-colored bubble, and a
+  timestamp into a reusable per-message unit. `audit-feed.tsx`'s table rows are the nearest list
+  pattern, but as noted above they're tabular, not conversational.
+- **A typing / "in progress" indicator.** `state-views.tsx`'s `Spinner`/`LoadingState` communicate
+  "this whole panel is loading," not "the other side is composing a response inline in the
+  conversation." There is no dot-pulse, no inline avatar-with-ellipsis, nor any other
+  chat-specific in-progress affordance anywhere in the codebase.
+
+## Summary for #6230's eventual scoping
+
+The reusable pieces (`state-views.tsx`'s state scaffolding, `scroll-area.tsx`, `avatar.tsx`,
+`textarea.tsx`/`input.tsx`/`button.tsx` as raw material) cover the outer shell and building blocks,
+not the chat-specific behavior. The four primitives #6230 will need — message list, composer,
+streaming renderer, typing indicator — are each either absent or only structurally adjacent
+(`audit-feed.tsx` for the list, `command-palette.tsx` for the input, `animated-terminal.tsx` for the
+renderer), so whoever implements #6230 should plan to build all four from scratch, informed by these
+adjacent patterns rather than assuming any can be reused directly.