Mobile support: full-screen list/pane navigation, per-agent chip strip for groups, touch sizing; gate skill fan-out to Space envs

server/src/index.js

@@ -232,8 +232,11 @@ function skillPath(name) {
 }
 
 // Fan skills out as SKILL.md into the dirs every agent auto-reads, so a saved
-// skill is available to all of them in every new session.
+// skill is available to all of them in every new session. Gated to real Space
+// deployments (or explicit opt-in): on a dev laptop these paths are the
+// developer's OWN ~/.claude etc. — local test runs must not write there.
 function skillTargetDirs() {
+  if (!process.env.SPACE_ID && process.env.AM_DISTRIBUTE_SKILLS !== '1') return [];
   const home = process.env.HOME || os.homedir();
   const claudeCfg = process.env.CLAUDE_CONFIG_DIR || path.join(home, '.claude');
   return [

web/src/App.tsx

@@ -5,10 +5,23 @@ import FilesPane from './components/FilesPane';
 import SettingsView from './components/SettingsView';
 import NewSession from './components/NewSession';
 import LayoutPicker from './components/LayoutPicker';
+import Logo from './components/Logo';
 import Locked from './components/Locked';
 import * as api from './api';
 import type { Cli, GridSpec, MoveTarget, Session, Tree } from './types';
 
+// Phone-sized viewport: the app becomes two full-screen views (list ⇄ pane).
+function useIsMobile() {
+  const [m, setM] = useState(() => window.matchMedia('(max-width: 768px)').matches);
+  useEffect(() => {
+    const mq = window.matchMedia('(max-width: 768px)');
+    const h = (e: MediaQueryListEvent) => setM(e.matches);
+    mq.addEventListener('change', h);
+    return () => mq.removeEventListener('change', h);
+  }, []);
+  return m;
+}
+
 // Auto layout: the grid grows to fit however many agents the group has.
 function autoGrid(n: number): GridSpec {
   if (n <= 1) return { cols: 1, rows: 1 };
@@ -42,6 +55,10 @@ export default function App() {
   const [info, setInfo] = useState<Awaited<ReturnType<typeof api.getInfo>> | null>(null);
   // Default location for the next agent = where the last one was created.
   const [lastPath, setLastPath] = useState(() => localStorage.getItem('am-last-path') || '');
+  // Mobile navigation: false = the sidebar is the (full-screen) home view,
+  // true = the selected session/group fills the screen. Desktop ignores this.
+  const isMobile = useIsMobile();
+  const [mobileStage, setMobileStage] = useState(false);
   const toggleTheme = () => setTheme((t) => (t === 'dark' ? 'light' : 'dark'));
   const rememberPath = (p?: string | null) => {
     if (p) { setLastPath(p); localStorage.setItem('am-last-path', p); }
@@ -94,12 +111,14 @@ export default function App() {
   );
 
   // Tile grid for the active group: the chosen layout, or auto (fit the count).
-  const grid: GridSpec = activeGroup ? (activeGroup.layout ?? autoGrid(groupSessions.length)) : { cols: 1, rows: 1 };
+  // On mobile it's always a single pane — the chip strip switches between them.
+  const grid: GridSpec = activeGroup && !isMobile ? (activeGroup.layout ?? autoGrid(groupSessions.length)) : { cols: 1, rows: 1 };
   const cap = grid.cols * grid.rows;
   const pageCount = Math.max(1, Math.ceil(groupSessions.length / cap));
+  // Page resets happen explicitly in the navigation handlers (an effect on
+  // activeRef would clobber openSession's "land on this agent's pane").
   const [pageRaw, setPage] = useState(0);
   const page = Math.min(pageRaw, pageCount - 1); // clamp when agents/layout change
-  useEffect(() => { setPage(0); }, [activeRef]);
   const pageSessions = activeGroup ? groupSessions.slice(page * cap, (page + 1) * cap) : [];
 
   const visibleSessions = activeGroup ? pageSessions : activeSingle ? [activeSingle] : [];
@@ -153,10 +172,25 @@ export default function App() {
   const deleteSession = async (id: string) => { await api.deleteSession(id); if (activeRef === `s:${id}`) setActiveRef(null); refresh(); };
   // Clicking a session: nested → open its group with that pane focused; loose → solo view.
   const openSession = (sid: string, groupId?: string) => {
-    if (groupId) { setActiveRef(`g:${groupId}`); setFocusedId(sid); }
-    else setActiveRef(`s:${sid}`);
+    if (groupId) {
+      setActiveRef(`g:${groupId}`);
+      setFocusedId(sid);
+      const idx = groupById[groupId]?.sessionIds.indexOf(sid) ?? -1;
+      setPage(isMobile && idx >= 0 ? idx : 0); // mobile: land on that agent's pane
+    } else {
+      setActiveRef(`s:${sid}`);
+      setPage(0);
+    }
+    if (isMobile) setMobileStage(true);
+  };
+  const activate = (ref: string) => {
+    setActiveRef(ref);
+    setPage(0);
+    if (isMobile) setMobileStage(true);
   };
   const closePane = (sid: string) => {
+    // On mobile ✕ just returns to the list — never the desktop ungroup gesture.
+    if (isMobile) { setMobileStage(false); return; }
     if (activeGroup) doMove(`s:${sid}`, { kind: 'after', ref: activeRef! });
     else setActiveRef(null);
   };
@@ -301,14 +335,14 @@ export default function App() {
   }
 
   return (
-    <div className="app">
+    <div className={`app${isMobile ? (mobileStage ? ' m-stage' : ' m-home') : ''}`}>
       <Sidebar
         clis={clis}
         tree={tree}
         activeRef={activeRef}
         focusedId={focusedId}
         defaultPath={lastPath}
-        onActivate={setActiveRef}
+        onActivate={activate}
         onOpenSession={openSession}
         onNewSession={newSession}
         onNewGroup={newGroup}
@@ -325,6 +359,23 @@ export default function App() {
       />
 
       <div className="main">
+        {isMobile && mobileStage && (
+          <div className="mbar">
+            <button className="icon-btn mback" onClick={() => setMobileStage(false)} title="Back to list">‹</button>
+            {activeGroup ? (
+              <div className="mchips">
+                {groupSessions.map((s, i) => (
+                  <button key={s.id} className={`mchip${i === page ? ' on' : ''}`} title={s.name} onClick={() => setPage(i)}>
+                    <Logo cli={s.cli} size={13} tint={cliMap[s.cli]?.color} />
+                    <span className={`status ${s.state}`} />
+                  </button>
+                ))}
+              </div>
+            ) : (
+              <span className="mtitle mono">{activeSingle?.name}</span>
+            )}
+          </div>
+        )}
         <div className="stage">
           {activeGroup ? (
             groupSessions.length === 0 ? (
@@ -354,10 +405,10 @@ export default function App() {
         </div>
         {showZoom && (
           <div className="zoombar">
-            {activeGroup && groupSessions.length > 0 && (
+            {!isMobile && activeGroup && groupSessions.length > 0 && (
               <LayoutPicker grid={grid} isAuto={!activeGroup.layout} onPick={setLayout} />
             )}
-            {activeGroup && pageCount > 1 && (
+            {!isMobile && activeGroup && pageCount > 1 && (
               <span className="pager">
                 <button className="zbtn" title="Previous panes" disabled={page === 0} onClick={() => setPage(page - 1)}>‹</button>
                 <span className="plbl mono">{page + 1}/{pageCount}</span>

web/src/components/SettingsView.tsx

@@ -47,7 +47,7 @@ export default function SettingsView({
     } catch { setRelaunch({ msg: 'Request failed.' }); }
   };
   return (
-    <div className="app">
+    <div className="app settings">
       <aside className="sidebar">
         <div className="brand">
           <button className="icon-btn" onClick={onClose} title="Back">←</button>

web/src/styles.css

@@ -479,7 +479,37 @@ body {
 .qfill { height: 100%; background: var(--accent); border-radius: 999px; }
 .qpct { width: 130px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
 
-@media (max-width: 820px) {
+/* narrow desktop */
+@media (min-width: 769px) and (max-width: 900px) {
   .sidebar { width: 230px; }
-  .tiles { grid-template-columns: 1fr !important; }
+}
+
+/* mobile stage top bar (back + agent chips) — rendered only on mobile */
+.mbar { display: flex; align-items: center; gap: 8px; padding: 0 0 8px; flex: none; }
+.mback { flex: none; font-size: 19px; padding-bottom: 3px; }
+.mtitle { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mchips { display: flex; gap: 6px; overflow-x: auto; flex: 1; padding: 2px; }
+.mchip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; flex: none; }
+.mchip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
+
+/* phones: two full-screen views — the sidebar list, or the selected pane */
+@media (max-width: 768px) {
+  .app { height: 100dvh; }
+  .app.m-home .main { display: none; }
+  .app.m-home .sidebar { width: 100%; border-right: none; }
+  .app.m-stage .sidebar { display: none; }
+  .app.m-stage .main { padding: 8px; }
+  /* comfortable touch targets */
+  .row { padding: 9px 10px; }
+  .row .row-actions { opacity: 1; pointer-events: auto; position: static; transform: none; margin-left: 4px; }
+  .row .cli-logo, .row .count { opacity: 1 !important; }
+  .caret { width: 22px; font-size: 15px; }
+  /* 16px inputs stop iOS zoom-on-focus */
+  .widget input, .widget select, .row .rename, .secret-desc, .fp-input, .pane-head .ph-title-input { font-size: 16px; }
+  /* settings stacks vertically */
+  .app.settings { flex-direction: column; }
+  .app.settings .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
+  .app.settings .settings-nav { flex-direction: row; gap: 6px; padding: 8px 10px; }
+  .app.settings .settings-main { flex: 1; }
+  .settings-page { padding: 6px 12px 30px; }
 }