drown0315 · drown0315 · Jul 13, 2026 · Jul 13, 2026 · Jul 13, 2026
diff --git a/apps/bridge/web/assets/index-BnXjqDIA.css b/apps/bridge/web/assets/index-BnXjqDIA.css
diff --git a/apps/bridge/web/assets/index-Cf93crWF.css b/apps/bridge/web/assets/index-Cf93crWF.css
diff --git a/apps/bridge/web/assets/index-CKHto2yr.js → apps/bridge/web/assets/index-DFOyQHSo.js b/apps/bridge/web/assets/index-CKHto2yr.js → apps/bridge/web/assets/index-DFOyQHSo.js
diff --git a/apps/bridge/web/index.html b/apps/bridge/web/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Ask UI</title>
-    <script type="module" crossorigin src="/assets/index-CKHto2yr.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Cf93crWF.css">
+    <script type="module" crossorigin src="/assets/index-DFOyQHSo.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BnXjqDIA.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/apps/web/src/chat/chatSessionState.test.ts b/apps/web/src/chat/chatSessionState.test.ts
@@ -251,7 +251,7 @@ test('adds a temporary Agent working placeholder to visible Chat History', () =>
     {
       id: 'agent-working-placeholder',
       role: 'agent',
-      text: 'Agent working...',
+      text: 'Agent working',
     },
   ]);
 });

diff --git a/apps/web/src/chat/chatSessionState.ts b/apps/web/src/chat/chatSessionState.ts
@@ -128,7 +128,7 @@ export function getVisibleChatHistoryMessages(
     {
       id: 'agent-working-placeholder',
       role: 'agent',
-      text: 'Agent working...',
+      text: 'Agent working',
     },
   ];
 }

diff --git a/apps/web/src/components/chat/ChatHistorySection.tsx b/apps/web/src/components/chat/ChatHistorySection.tsx
@@ -112,7 +112,11 @@ export function ChatHistorySection({
               key={message.id}
             >
               <div className="chat-history-message-role">{message.role}</div>
-              <ChatHistoryMessageContent message={message} />
+              {message.id === 'agent-working-placeholder' ? (
+                <AgentWorkingMessage text={message.text} />
+              ) : (
+                <ChatHistoryMessageContent message={message} />
+              )}
             </li>
           ))}
         </ol>
@@ -136,6 +140,19 @@ export function ChatHistorySection({
   );
 }
 
+function AgentWorkingMessage({ text }: { text: string }) {
+  return (
+    <div className="chat-history-message-text chat-history-working-text">
+      <span>{text}</span>
+      <span aria-hidden="true" className="chat-history-working-dots">
+        <span />
+        <span />
+        <span />
+      </span>
+    </div>
+  );
+}
+
 function ChatHistoryMessageContent({
   message,
 }: {

diff --git a/apps/web/src/components/chat/ChatPanel.css b/apps/web/src/components/chat/ChatPanel.css
@@ -353,10 +353,85 @@
 }
 
 .chat-history-message-working {
+  position: relative;
   border-style: dashed;
   background: #f8fbfa;
 }
 
+.chat-history-message-working::before {
+  position: absolute;
+  inset: -1px;
+  border: 1px solid rgba(66, 184, 131, 0.34);
+  border-radius: 8px;
+  content: "";
+  pointer-events: none;
+  animation: chat-history-working-border-pulse 1.7s ease-in-out infinite;
+}
+
+.chat-history-working-text {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.chat-history-working-dots {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  flex: 0 0 auto;
+}
+
+.chat-history-working-dots span {
+  width: 5px;
+  height: 5px;
+  border-radius: 999px;
+  background: var(--vue-green);
+  opacity: 0.34;
+  animation: chat-history-working-dot-pulse 1.2s ease-in-out infinite;
+}
+
+.chat-history-working-dots span:nth-child(2) {
+  animation-delay: 0.16s;
+}
+
+.chat-history-working-dots span:nth-child(3) {
+  animation-delay: 0.32s;
+}
+
+@keyframes chat-history-working-border-pulse {
+  0%,
+  100% {
+    opacity: 0.35;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0.85;
+    transform: scale(1.012);
+  }
+}
+
+@keyframes chat-history-working-dot-pulse {
+  0%,
+  80%,
+  100% {
+    opacity: 0.34;
+    transform: translateY(0);
+  }
+
+  35% {
+    opacity: 1;
+    transform: translateY(-3px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-history-message-working::before,
+  .chat-history-working-dots span {
+    animation: none;
+  }
+}
+
 .chat-history-attachment-meta {
   display: flex;
   flex-wrap: wrap;

diff --git a/apps/web/src/components/live-app-surface/DeviceShell.css b/apps/web/src/components/live-app-surface/DeviceShell.css
@@ -4,11 +4,51 @@
   height: 100%;
   min-height: 0;
   grid-template-rows: minmax(0, 1fr) auto;
+  justify-items: center;
   gap: 10px;
 }
 
+.device-shell-hardware {
+  position: relative;
+  align-self: center;
+  width: min(100%, 360px);
+  max-height: 100%;
+  aspect-ratio: 9 / 19.5;
+  min-height: 0;
+  padding: 14px;
+  border-radius: 32px;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 30%),
+    #121a22;
+  box-shadow:
+    0 24px 60px rgba(15, 23, 42, 0.24),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+}
+
+.device-shell-speaker {
+  position: absolute;
+  top: 9px;
+  left: 50%;
+  width: 54px;
+  height: 4px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.16);
+  transform: translateX(-50%);
+}
+
+.device-shell-screen {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 22px;
+  background: #eef4f7;
+}
+
 .device-view-area {
   position: relative;
+  width: 100%;
+  height: 100%;
   min-height: 260px;
   padding: 0;
   overflow: hidden;
@@ -26,13 +66,8 @@
   display: grid;
   place-content: center;
   overflow: hidden;
-  border-radius: 10px;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
-    #182028;
-  box-shadow:
-    0 18px 40px rgba(15, 23, 42, 0.18),
-    0 0 0 1px rgba(17, 24, 39, 0.14);
+  border-radius: 0;
+  background: #182028;
   color: #edf7f2;
   text-align: center;
 }

diff --git a/apps/web/src/components/live-app-surface/DeviceShell.tsx b/apps/web/src/components/live-app-surface/DeviceShell.tsx
@@ -246,61 +246,68 @@ export function DeviceShell({
 
   return (
     <div className="device-shell">
-      <div
-        className="device-view-area"
-        onPointerCancel={(event) => sendPointerMessage('cancel', event)}
-        onPointerDown={(event) => sendPointerMessage('down', event)}
-        onPointerMove={(event) => sendPointerMessage('move', event)}
-        onPointerUp={(event) => sendPointerMessage('up', event)}
-        ref={areaRef}
-      >
-        {fit ? (
+      <div className="device-shell-hardware">
+        <div className="device-shell-speaker" />
+        <div className="device-shell-screen">
           <div
-            className="device-view-frame"
-            style={{
-              height: `${fit.height}px`,
-              transform: `translate(${fit.offsetX}px, ${fit.offsetY}px)`,
-              width: `${fit.width}px`,
-            }}
-            title={metadata.deviceId}
+            className="device-view-area"
+            onPointerCancel={(event) => sendPointerMessage('cancel', event)}
+            onPointerDown={(event) => sendPointerMessage('down', event)}
+            onPointerMove={(event) => sendPointerMessage('move', event)}
+            onPointerUp={(event) => sendPointerMessage('up', event)}
+            ref={areaRef}
           >
-            <canvas
-              aria-label="Device video"
-              className="device-view-canvas"
-              ref={setCanvasElement}
-            />
-            {overlayMarkers.length > 0 ? (
+            {fit ? (
               <div
-                aria-label="Selection Comment markers"
-                className="selection-marker-layer"
+                className="device-view-frame"
+                style={{
+                  height: `${fit.height}px`,
+                  transform: `translate(${fit.offsetX}px, ${fit.offsetY}px)`,
+                  width: `${fit.width}px`,
+                }}
+                title={metadata.deviceId}
               >
-                {getRenderableSelectionMarkers(overlayMarkers, fit).map(
-                  ({ marker, placement }) => (
-                    <div
-                      className="selection-marker"
-                      key={marker.id}
-                      style={{
-                        height: `${SELECTION_MARKER_SIZE}px`,
-                        left: `${placement.left}px`,
-                        top: `${placement.top}px`,
-                        width: `${SELECTION_MARKER_SIZE}px`,
-                      }}
-                      title={marker.widgetLabel}
-                    >
-                      {marker.number}
+                <canvas
+                  aria-label="Device video"
+                  className="device-view-canvas"
+                  ref={setCanvasElement}
+                />
+                {overlayMarkers.length > 0 ? (
+                  <div
+                    aria-label="Selection Comment markers"
+                    className="selection-marker-layer"
+                  >
+                    {getRenderableSelectionMarkers(overlayMarkers, fit).map(
+                      ({ marker, placement }) => (
+                        <div
+                          className="selection-marker"
+                          key={marker.id}
+                          style={{
+                            height: `${SELECTION_MARKER_SIZE}px`,
+                            left: `${placement.left}px`,
+                            top: `${placement.top}px`,
+                            width: `${SELECTION_MARKER_SIZE}px`,
+                          }}
+                          title={marker.widgetLabel}
+                        >
+                          {marker.number}
+                        </div>
+                      ),
+                    )}
+                  </div>
+                ) : null}
+                {surfaceState.status === 'waitingForVideo' ? (
+                  <>
+                    <div className="device-view-status">Waiting for video</div>
+                    <div className="device-view-device-id">
+                      {metadata.deviceId}
                     </div>
-                  ),
-                )}
+                  </>
+                ) : null}
               </div>
             ) : null}
-            {surfaceState.status === 'waitingForVideo' ? (
-              <>
-                <div className="device-view-status">Waiting for video</div>
-                <div className="device-view-device-id">{metadata.deviceId}</div>
-              </>
-            ) : null}
           </div>
-        ) : null}
+        </div>
       </div>
       <div className="surface-controls">
         <button

diff --git a/apps/web/src/components/live-app-surface/DeviceShellStructure.test.ts b/apps/web/src/components/live-app-surface/DeviceShellStructure.test.ts
@@ -0,0 +1,15 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+import test from 'node:test';
+
+test('renders the live Device shell inside the phone hardware frame', async () => {
+  const componentSource = await readFile(
+    path.join(import.meta.dirname, 'DeviceShell.tsx'),
+    'utf8',
+  );
+
+  assert.match(componentSource, /className="device-shell-hardware"/);
+  assert.match(componentSource, /className="device-shell-screen"/);
+  assert.match(componentSource, /className="device-shell-speaker"/);
+});
diff --git a/apps/web/src/components/live-app-surface/LiveAppSurface.css b/apps/web/src/components/live-app-surface/LiveAppSurface.css
@@ -207,7 +207,8 @@
   cursor: pointer;
 }
 
-.live-app-surface-selecting .live-app-phone-state-hardware {
+.live-app-surface-selecting .live-app-phone-state-hardware,
+.live-app-surface-selecting .device-shell-hardware {
   box-shadow:
     0 0 0 3px rgba(66, 184, 131, 0.14),
     0 24px 60px rgba(15, 23, 42, 0.24),