Stabilize assistant outputs rail layout

Author: rprend

apps/frontend/src/components/assistant-ui/thread.tsx

@@ -267,7 +267,7 @@ export const Thread: FC<{
           </ThreadPrimitive.ViewportFooter>
         </ThreadPrimitive.Viewport>
 
-        {showArtifacts && artifacts.length > 0 ? <ThreadOutputs artifacts={artifacts} /> : null}
+        {showArtifacts ? <ThreadOutputs artifacts={artifacts} /> : null}
       </div>
     </ThreadPrimitive.Root>
   );
@@ -278,10 +278,7 @@ const ThreadOutputs: FC<{
 }> = ({ artifacts }) => {
   const visibleArtifacts = useMemo(() => selectVisibleArtifacts(artifacts), [artifacts]);
   const [isExpanded, setIsExpanded] = useState(true);
-
-  if (visibleArtifacts.length === 0) {
-    return null;
-  }
+  const hasArtifacts = visibleArtifacts.length > 0;
 
   const handleOpenArtifact = useCallback((artifact: RunArtifactRecord) => {
     const content = typeof artifact.content === "string" ? artifact.content : "";
@@ -309,23 +306,35 @@ const ThreadOutputs: FC<{
         <ChevronDownIcon className="assistant-outputs-toggle-icon" />
       </button>
       <div className="assistant-outputs-list" role="list">
-        {visibleArtifacts.map((artifact) => {
-          const disabled = typeof artifact.content !== "string" || artifact.content.trim().length === 0;
-          return (
-            <button
-              key={`${artifact.r2Key ?? artifact.filename}-${artifact.createdAt ?? ""}`}
-              type="button"
-              className="assistant-output-link"
-              role="listitem"
-              onClick={() => handleOpenArtifact(artifact)}
-              disabled={disabled}
-              title={disabled ? "This output is not available inline yet." : artifact.filename}
-            >
-              <FileTextIcon className="assistant-output-link-icon" />
-              <span className="assistant-output-link-name">{formatArtifactLabel(artifact, visibleArtifacts)}</span>
-            </button>
-          );
-        })}
+        {hasArtifacts
+          ? visibleArtifacts.map((artifact) => {
+              const disabled = typeof artifact.content !== "string" || artifact.content.trim().length === 0;
+              return (
+                <button
+                  key={`${artifact.r2Key ?? artifact.filename}-${artifact.createdAt ?? ""}`}
+                  type="button"
+                  className="assistant-output-link"
+                  role="listitem"
+                  onClick={() => handleOpenArtifact(artifact)}
+                  disabled={disabled}
+                  title={disabled ? "This output is not available inline yet." : artifact.filename}
+                >
+                  <FileTextIcon className="assistant-output-link-icon" />
+                  <span className="assistant-output-link-name">{formatArtifactLabel(artifact, visibleArtifacts)}</span>
+                </button>
+              );
+            })
+          : Array.from({ length: 4 }, (_, index) => (
+              <div
+                key={`output-placeholder-${index}`}
+                className="assistant-output-placeholder"
+                role="listitem"
+                aria-hidden="true"
+              >
+                <span className="assistant-output-placeholder-icon" />
+                <span className="assistant-output-placeholder-line" />
+              </div>
+            ))}
       </div>
     </aside>
   );

apps/frontend/src/styles.css

@@ -740,7 +740,7 @@ button {
 }
 
 .assistant-outputs-rail {
-  width: min(280px, 30vw);
+  width: min(220px, 22vw);
   flex: 0 0 auto;
   min-height: 0;
   padding: 18px 8px 10px 0;
@@ -753,7 +753,7 @@ button {
 }
 
 .assistant-outputs-rail.is-expanded {
-  width: min(340px, 34vw);
+  width: min(220px, 22vw);
 }
 
 .assistant-outputs-toggle {
@@ -839,6 +839,56 @@ button {
   cursor: pointer;
 }
 
+.assistant-output-placeholder {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 14px minmax(0, 1fr);
+  align-items: center;
+  gap: 9px;
+  padding: 6px 0;
+}
+
+.assistant-output-placeholder-icon,
+.assistant-output-placeholder-line {
+  display: block;
+  background: rgba(38, 38, 38, 0.08);
+  animation: assistant-output-placeholder-pulse 1.6s ease-in-out infinite;
+}
+
+.assistant-output-placeholder-icon {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+}
+
+.assistant-output-placeholder-line {
+  width: 100%;
+  height: 0.9rem;
+  border-radius: 999px;
+}
+
+.assistant-output-placeholder:nth-child(2) .assistant-output-placeholder-line {
+  width: 82%;
+}
+
+.assistant-output-placeholder:nth-child(3) .assistant-output-placeholder-line {
+  width: 74%;
+}
+
+.assistant-output-placeholder:nth-child(4) .assistant-output-placeholder-line {
+  width: 88%;
+}
+
+@keyframes assistant-output-placeholder-pulse {
+  0%,
+  100% {
+    opacity: 0.45;
+  }
+  50% {
+    opacity: 0.9;
+  }
+}
+
 .assistant-output-link:hover:not(:disabled) .assistant-output-link-name {
   color: rgba(38, 38, 38, 0.72);
 }