(MOT-3554) feat(console): landing-page demo build of the console for the website

console/web/.gitignore

@@ -6,3 +6,4 @@ storybook-static
 *.log
 .vite
 *.tsbuildinfo
+dist-demo

console/web/demo.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en" class="antialiased">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="robots" content="noindex" />
+    <title>iii console — recorded session</title>
+    <script>
+      /* Theme before first paint so the embed never flashes the wrong one. */
+      try {
+        const t = new URLSearchParams(location.search).get('theme');
+        document.documentElement.dataset.theme = t === 'dark' ? 'dark' : 'light';
+      } catch (_) {
+        document.documentElement.dataset.theme = 'light';
+      }
+    </script>
+  </head>
+  <body class="bg-bg text-ink font-sans">
+    <div id="root"></div>
+    <script type="module" src="/src/demo/main.tsx"></script>
+  </body>
+</html>

console/web/package.json

@@ -18,7 +18,8 @@
     "test:e2e": "playwright test",
     "test:e2e:install": "playwright install chromium",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "build:demo": "vite build --config vite.demo.config.ts"
   },
   "dependencies": {
     "@fontsource/chivo-mono": "^5.2.8",

console/web/src/components/chat/FunctionTriggerGroup.tsx

@@ -6,6 +6,7 @@ import {
 } from '@/components/function-trigger/FunctionTriggerCard'
 import type { FilesystemAccessAction } from '@/components/permissions/FilesystemAccessPrompt'
 import { StatusDot } from '@/components/ui/StatusDot'
+import { formatCallDuration } from '@/lib/format-call-duration'
 import { cn } from '@/lib/utils'
 import type { FunctionTriggerMessage as FunctionTriggerMessageType } from '@/types/chat'
 
@@ -117,7 +118,7 @@ function deriveStatus(messages: FunctionTriggerMessageType[]): GroupStatus {
     label: (
       <>
         <span className="tabular-nums">{total}</span> functions for{' '}
-        <span className="tabular-nums">{sum}</span>ms
+        <span className="tabular-nums">{formatCallDuration(sum)}</span>
       </>
     ),
   }

console/web/src/components/chat/Message.tsx

@@ -38,6 +38,8 @@ interface MessageProps {
   /** Copy payload for an assistant turn (prose + its function calls). Lazy so
       the string is built on click, not on every streaming re-render. */
   copyText?: string | (() => string)
+  /** Render function-call cards already expanded (showcase surfaces). */
+  defaultOpenCalls?: boolean
 }
 
 export function Message({
@@ -48,6 +50,7 @@ export function Message({
   onManageFilesystemAccess,
   workingDir,
   copyText,
+  defaultOpenCalls,
 }: MessageProps) {
   switch (message.role) {
     case 'user':
@@ -89,6 +92,7 @@ export function Message({
       return (
         <FunctionTriggerCard
           message={message}
+          defaultOpen={defaultOpenCalls}
           onApprove={onApprove}
           onDeny={onDeny}
           onAlwaysAllow={onAlwaysAllowHandler}

console/web/src/components/chat/MessageList.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react'
+import { type ReactNode, useEffect, useMemo, useRef } from 'react'
 import type { FilesystemAccessAction } from '@/components/permissions/FilesystemAccessPrompt'
 import { useConversationsCtxOptional } from '@/lib/conversations-context'
 import {
@@ -25,6 +25,10 @@ interface MessageListProps {
       when absent. */
   thinkingDetail?: string
   density?: 'route' | 'dock'
+  /** Rendered at the top of the transcript scroller, above the messages, so
+      it scrolls away with them instead of unmounting. When set it replaces
+      the `EmptyState` on an empty transcript (landing demo). */
+  header?: ReactNode
   onResolveApproval?: (
     sessionId: string,
     functionTriggerId: string,
@@ -42,6 +46,12 @@ interface MessageListProps {
   ) => Promise<void>
   onManageFilesystemAccess?: () => void
   workingDir?: string | null
+  /**
+   * Render every function-call card (and group) already expanded. Off in the
+   * product, where a turn's calls collapse to one line each; on for showcase
+   * surfaces whose whole point is the result renderers.
+   */
+  defaultOpenCalls?: boolean
 }
 
 type RenderItem =
@@ -94,11 +104,13 @@ export function MessageList({
   isThinking,
   thinkingDetail,
   density = 'route',
+  header,
   onResolveApproval,
   onAlwaysAllow,
   onResolveFilesystemAccess,
   onManageFilesystemAccess,
   workingDir,
+  defaultOpenCalls,
 }: MessageListProps) {
   const bottomRef = useRef<HTMLDivElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -166,7 +178,7 @@ export function MessageList({
     })
   }, [messages])
 
-  if (messages.length === 0) {
+  if (messages.length === 0 && !header) {
     return <EmptyState {...resolveEmptyState(ctx, density)} />
   }
 
@@ -175,12 +187,14 @@ export function MessageList({
   return (
     <div ref={containerRef} className={cn('flex-1 overflow-y-auto', listPad)}>
       <div className="mx-auto max-w-[760px] flex flex-col gap-y-8">
+        {header}
         {items.map((item) => {
           if (item.kind === 'fcall-group') {
             return (
               <FunctionTriggerGroup
                 key={item.key}
                 messages={item.messages}
+                defaultOpen={defaultOpenCalls}
                 onResolveApproval={onResolveApproval}
                 onAlwaysAllow={onAlwaysAllow}
                 onResolveFilesystemAccess={onResolveFilesystemAccess}
@@ -205,6 +219,7 @@ export function MessageList({
               key={item.key}
               message={m}
               copyText={copyText}
+              defaultOpenCalls={defaultOpenCalls}
               onResolveApproval={onResolveApproval}
               onAlwaysAllow={onAlwaysAllow}
               onResolveFilesystemAccess={onResolveFilesystemAccess}

console/web/src/components/function-trigger/FunctionTriggerCard.tsx

@@ -14,6 +14,7 @@ import { Button } from '@/components/ui/Button'
 import { StatusDot } from '@/components/ui/StatusDot'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/Tabs'
 import { copyTextToClipboard } from '@/lib/clipboard'
+import { formatCallDuration } from '@/lib/format-call-duration'
 import { JsonHighlight } from '@/lib/syntax'
 import { cn } from '@/lib/utils'
 import type { FunctionTriggerMessage as FunctionTriggerMessageType } from '@/types/chat'
@@ -365,8 +366,10 @@ export function FunctionTriggerCard({
               typeof message.durationMs === 'number' ? (
                 <span className="text-ink-faint">
                   {' '}
-                  for <span className="tabular-nums">{message.durationMs}</span>
-                  ms
+                  for{' '}
+                  <span className="tabular-nums">
+                    {formatCallDuration(message.durationMs)}
+                  </span>
                 </span>
               ) : null}
             </span>

console/web/src/demo/EmptyState.tsx

@@ -0,0 +1,36 @@
+/**
+ * Demo-local copy of the chat empty state's hero. The product's `EmptyState`
+ * keeps its own words; the landing demo wants this greeting, rendered inside
+ * the transcript scroller (via `MessageList`'s `header` slot) so the replay
+ * scrolls it away instead of unmounting it.
+ */
+
+import { Prompt } from '@/components/ui/Prompt'
+
+export function DemoEmptyState() {
+  return (
+    <div className="flex max-w-[520px] flex-col gap-6">
+      <div className="font-mono text-[11px] uppercase tracking-[0.06em] text-ink-faint">
+        <Prompt symbol="$">new session</Prompt>
+      </div>
+      <h1 className="font-mono text-[28px] font-medium tracking-[-0.01em] text-ink lowercase">
+        welcome to iii! 👋
+      </h1>
+      <div className="flex flex-col gap-2">
+        <p className="font-mono text-[14px] leading-[1.7] text-ink-faint lowercase">
+          You're in a 1:1 reproduction of our agent-oriented workspace where you
+          can leverage the power of a full-featured agentic system:
+        </p>
+        <ul className="font-mono text-[13px] leading-[1.7] text-ink-faint flex flex-col gap-1">
+          <li>· trigger functions via the function registry</li>
+          <li>· spawn subagents for parallel/async work</li>
+          <li>· register triggers for loop and graph control</li>
+          <li>
+            · query state, publish to queues, and do everything production
+            systems do
+          </li>
+        </ul>
+      </div>
+    </div>
+  )
+}