[eric] share/apps: collapse import contents to a one-line count (expandable), calmer app-card boot state with an honest first-run hint

frontend/src/app/components/share/IncludesList.tsx

@@ -1,9 +1,13 @@
 // The "what's inside this bundle" panel, shared by the Share and Import modals:
 // the root entity, the dependencies pulled in with it, and any environment
-// requirements (an Action the importer must enable themselves).
-import React from 'react';
+// requirements (an Action the importer must enable themselves). Long bundles
+// (a dashboard pulls in every agent) read as a wall, so the contents collapse
+// to a one-line count by default and expand on demand. Requirements always
+// show, they're the part the importer has to act on.
+import React, { useState } from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 
@@ -18,8 +22,23 @@ const KIND_LABEL: Record<string, string> = {
   session: 'Agent',
 };
 
+const pluralize = (label: string, n: number): string => (n === 1 ? label : `${label}s`);
+
 const IncludesList: React.FC<{ summary: BundleSummary }> = ({ summary }) => {
   const c = useClaudeTokens();
+  const [expanded, setExpanded] = useState(false);
+  const includes = summary.includes;
+
+  // One quiet line: "9 agents · 1 app", in the bundle's own type order.
+  const order: string[] = [];
+  const byType = new Map<string, number>();
+  for (const it of includes) {
+    if (!byType.has(it.type)) order.push(it.type);
+    byType.set(it.type, (byType.get(it.type) || 0) + 1);
+  }
+  const countLine = order
+    .map((t) => `${byType.get(t)} ${pluralize((KIND_LABEL[t] || t).toLowerCase(), byType.get(t) || 0)}`)
+    .join('  ·  ');
 
   const Row: React.FC<{ tag: string; name: string; detail?: string; faded?: boolean }> = ({
     tag,
@@ -27,7 +46,7 @@ const IncludesList: React.FC<{ summary: BundleSummary }> = ({ summary }) => {
     detail,
     faded,
   }) => (
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25, py: 0.65 }}>
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25, py: 0.55 }}>
       <Typography
         sx={{
           fontSize: '0.62rem',
@@ -70,9 +89,42 @@ const IncludesList: React.FC<{ summary: BundleSummary }> = ({ summary }) => {
       }}
     >
       <Row tag={KIND_LABEL[summary.root.type] || summary.root.type} name={summary.root.name} />
-      {summary.includes.map((it, i) => (
-        <Row key={`inc-${i}`} tag={KIND_LABEL[it.type] || it.type} name={it.name} detail={it.detail} />
-      ))}
+
+      {includes.length > 0 && !expanded && (
+        <Box
+          onClick={() => setExpanded(true)}
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 1,
+            py: 0.55,
+            cursor: 'pointer',
+            '&:hover .show-toggle': { color: c.accent.primary },
+          }}
+        >
+          <Typography sx={{ fontSize: '0.82rem', color: c.text.muted }}>{countLine}</Typography>
+          <Box className="show-toggle" sx={{ display: 'flex', alignItems: 'center', gap: 0.25, color: c.text.tertiary, transition: 'color 0.15s' }}>
+            <Typography sx={{ fontSize: '0.72rem' }}>Show</Typography>
+            <KeyboardArrowDownIcon sx={{ fontSize: 14 }} />
+          </Box>
+        </Box>
+      )}
+
+      {includes.length > 0 && expanded && (
+        <>
+          {includes.map((it, i) => (
+            <Row key={`inc-${i}`} tag={KIND_LABEL[it.type] || it.type} name={it.name} detail={it.detail} />
+          ))}
+          <Box
+            onClick={() => setExpanded(false)}
+            sx={{ py: 0.4, cursor: 'pointer', color: c.text.tertiary, '&:hover': { color: c.accent.primary } }}
+          >
+            <Typography sx={{ fontSize: '0.72rem' }}>Hide</Typography>
+          </Box>
+        </>
+      )}
+
       {summary.requirements.length > 0 && (
         <Box sx={{ mt: 0.75, pt: 0.75, borderTop: `1px solid ${c.border.subtle}` }}>
           {summary.requirements.map((r, i) => (

frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx

@@ -67,6 +67,44 @@ interface Props {
   onBringToFront?: (id: string, type: 'agent' | 'view' | 'browser') => void;
 }
 
+// The app card's loading state while its runtime spins up. One soft pulse, calm
+// copy, and an honest hint only after 9s, a freshly-imported app installs its
+// deps on first open, which is the slow case worth explaining instead of leaving
+// the user staring at a dead screen.
+const BootingBody: React.FC = () => {
+  const c = useClaudeTokens();
+  const [slow, setSlow] = useState(false);
+  useEffect(() => {
+    const t = setTimeout(() => setSlow(true), 9000);
+    return () => clearTimeout(t);
+  }, []);
+  return (
+    <Box
+      sx={{
+        width: '100%', height: '100%', display: 'flex', flexDirection: 'column',
+        alignItems: 'center', justifyContent: 'center', gap: 1.25, px: 3, textAlign: 'center',
+      }}
+    >
+      <Box
+        sx={{
+          width: 7, height: 7, borderRadius: '50%', bgcolor: c.accent.primary,
+          animation: 'osBootPulse 1.4s ease-in-out infinite',
+          '@keyframes osBootPulse': {
+            '0%, 100%': { opacity: 0.35, transform: 'scale(0.8)' },
+            '50%': { opacity: 1, transform: 'scale(1)' },
+          },
+        }}
+      />
+      <Typography sx={{ fontSize: '0.85rem', color: c.text.muted }}>Starting preview</Typography>
+      <Fade in={slow} timeout={400} unmountOnExit>
+        <Typography sx={{ fontSize: '0.72rem', color: c.text.ghost, maxWidth: 240 }}>
+          First run sets the app up, this can take a moment.
+        </Typography>
+      </Fade>
+    </Box>
+  );
+};
+
 const DashboardViewCard: React.FC<Props> = ({
   output, cardX, cardY, cardWidth, cardHeight, zoom = 1, panX = 0, panY = 0, cmdHeld = false,
   isSelected = false, isHighlighted = false, multiDragDelta, onCardSelect, onDragStart, onDragMove, onDragEnd,
@@ -681,24 +719,7 @@ const DashboardOutputPreview: React.FC<{
   }
 
   if (isBooting) {
-    return (
-      <Box
-        sx={{
-          width: '100%',
-          height: '100%',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          color: tokens.text.muted,
-          fontSize: '0.85rem',
-          fontStyle: 'italic',
-          textAlign: 'center',
-          px: 2,
-        }}
-      >
-        Starting preview…
-      </Box>
-    );
+    return <BootingBody />;
   }
 
   return (