claude-code-remote-pilot 0.5.10 → 0.5.12

package/lib/WebServer.js

@@ -21,6 +21,8 @@ class WebServer {
     this._heartbeatInterval = null;
     this._tunnelProcess = null;
     this._tunnelUrl = null;
+    this._queues = new Map(); // name → { items: [{id,message}], autoFeed, pendingSend }
+    this._sessionMeta = config.getAllSessionMeta(); // name → { emoji, color }
   }
 
   _buildAllSessions() {
@@ -30,7 +32,29 @@ class WebServer {
     const offline = history
       .filter(h => !activeNames.has(h.name))
       .map(h => ({ name: h.name, path: h.path, status: 'offline', startedAt: h.lastSeen, resumeAt: null }));
-    return [...active, ...offline].map(s => ({ ...s, id: s.name }));
+    return [...active, ...offline].map(s => {
+      const q = this._queues.get(s.name);
+      const m = this._sessionMeta[s.name] || {};
+      return {
+        ...s, id: s.name,
+        queueLength: q ? q.items.length : 0, autoFeed: q ? q.autoFeed : false,
+        emoji: m.emoji || '', color: m.color || '',
+      };
+    });
+  }
+
+  _getQueue(name) {
+    if (!this._queues.has(name)) {
+      this._queues.set(name, { items: [], autoFeed: false, pendingSend: false });
+    }
+    return this._queues.get(name);
+  }
+
+  // Send a text message followed by Enter. Uses -l (literal) so message content
+  // is never misinterpreted as tmux key sequences, then sends Enter separately.
+  _tmuxSend(target, message) {
+    spawnSync('tmux', ['send-keys', '-t', target, '-l', message]);
+    spawnSync('tmux', ['send-keys', '-t', target, 'Enter']);
   }
 
   _getOutput(name) {
@@ -100,9 +124,7 @@ class WebServer {
         try {
           const session = this.manager.spawn(dirPath, name, command || 'claude');
           if (initialPrompt) {
-            setTimeout(() => {
-              spawnSync('tmux', ['send-keys', '-t', session.name, initialPrompt, 'Enter']);
-            }, 2000);
+            setTimeout(() => this._tmuxSend(session.name, initialPrompt), 2000);
           }
           this._json(res, 201, { ...session, id: session.name });
         } catch (e) {
@@ -142,11 +164,78 @@ class WebServer {
           return this._json(res, 200, { ok: true });
         }
         if (!message) return this._json(res, 400, { error: 'message or key required' });
-        spawnSync('tmux', ['send-keys', '-t', name, message, 'Enter']);
+        this._tmuxSend(name, message);
         this._json(res, 200, { ok: true });
       });
     }
 
+    // Queue routes — GET|POST|PATCH /api/sessions/:name/queue
+    const queueBaseMatch = pathname.match(/^\/api\/sessions\/([^/]+)\/queue$/);
+    if (queueBaseMatch) {
+      const name = decodeURIComponent(queueBaseMatch[1]);
+      if (req.method === 'GET') {
+        const q = this._getQueue(name);
+        return this._json(res, 200, { items: q.items, autoFeed: q.autoFeed });
+      }
+      if (req.method === 'POST') {
+        return this._readBody(req, (err, body) => {
+          if (err) return this._json(res, 400, { error: err.message });
+          if (!body.message) return this._json(res, 400, { error: 'message required' });
+          const q = this._getQueue(name);
+          const item = { id: crypto.randomBytes(4).toString('hex'), message: body.message };
+          q.items.push(item);
+          return this._json(res, 201, { item });
+        });
+      }
+      if (req.method === 'PATCH') {
+        return this._readBody(req, (err, body) => {
+          if (err) return this._json(res, 400, { error: err.message });
+          const q = this._getQueue(name);
+          if (typeof body.autoFeed === 'boolean') {
+            q.autoFeed = body.autoFeed;
+            if (!body.autoFeed) q.pendingSend = false;
+          }
+          return this._json(res, 200, { autoFeed: q.autoFeed });
+        });
+      }
+    }
+
+    // POST /api/sessions/:name/queue/play — send and dequeue first item
+    const queuePlayMatch = pathname.match(/^\/api\/sessions\/([^/]+)\/queue\/play$/);
+    if (req.method === 'POST' && queuePlayMatch) {
+      const name = decodeURIComponent(queuePlayMatch[1]);
+      const q = this._queues.get(name);
+      if (!q || !q.items.length) return this._json(res, 400, { error: 'Queue is empty' });
+      const item = q.items.shift();
+      this._tmuxSend(name, item.message);
+      return this._json(res, 200, { ok: true, item });
+    }
+
+    // PATCH /api/sessions/:name/meta — save emoji / color label
+    const metaMatch = pathname.match(/^\/api\/sessions\/([^/]+)\/meta$/);
+    if (req.method === 'PATCH' && metaMatch) {
+      const name = decodeURIComponent(metaMatch[1]);
+      return this._readBody(req, (err, body) => {
+        if (err) return this._json(res, 400, { error: err.message });
+        const patch = {};
+        if (body.emoji !== undefined) patch.emoji = String(body.emoji).slice(0, 8);
+        if (body.color !== undefined) patch.color = String(body.color).slice(0, 20);
+        this._sessionMeta[name] = { ...(this._sessionMeta[name] || {}), ...patch };
+        config.saveSessionMeta(name, patch);
+        return this._json(res, 200, { ok: true });
+      });
+    }
+
+    // DELETE /api/sessions/:name/queue/:id — remove a specific queued item
+    const queueItemMatch = pathname.match(/^\/api\/sessions\/([^/]+)\/queue\/([^/]+)$/);
+    if (req.method === 'DELETE' && queueItemMatch) {
+      const name = decodeURIComponent(queueItemMatch[1]);
+      const id = queueItemMatch[2];
+      const q = this._queues.get(name);
+      if (q) q.items = q.items.filter(it => it.id !== id);
+      return this._json(res, 200, { ok: true });
+    }
+
     // DELETE /api/sessions/:name
     const killMatch = pathname.match(/^\/api\/sessions\/([^/]+)$/);
     if (req.method === 'DELETE' && killMatch) {
@@ -177,6 +266,23 @@ class WebServer {
   }
 
   _broadcast() {
+    // Auto-feed: send the next queued message when a session becomes idle/waiting
+    for (const session of this.manager.list()) {
+      const q = this._queues.get(session.name);
+      if (!q || !q.autoFeed || !q.items.length) {
+        if (q && session.status !== 'idle' && session.status !== 'needs-response') q.pendingSend = false;
+        continue;
+      }
+      const isWaiting = session.status === 'idle' || session.status === 'needs-response';
+      if (isWaiting && !q.pendingSend) {
+        q.pendingSend = true;
+        const item = q.items.shift();
+        this._tmuxSend(session.name, item.message);
+      } else if (!isWaiting) {
+        q.pendingSend = false;
+      }
+    }
+
     if (!this._clients.size) return;
     const payload = `data: ${JSON.stringify(this._buildAllSessions())}\n\n`;
     for (const res of this._clients) {

package/lib/config.js

@@ -50,4 +50,15 @@ function getHistory() {
   return load().sessionHistory || [];
 }
 
-module.exports = { load, saveTelegram, saveSessions, clearSessions, saveResumeCommand, addToHistory, removeFromHistory, getHistory };
+function getAllSessionMeta() {
+  return load().sessionMeta || {};
+}
+
+function saveSessionMeta(name, meta) {
+  const cfg = load();
+  const metas = cfg.sessionMeta || {};
+  metas[name] = { ...(metas[name] || {}), ...meta };
+  save({ sessionMeta: metas });
+}
+
+module.exports = { load, saveTelegram, saveSessions, clearSessions, saveResumeCommand, addToHistory, removeFromHistory, getHistory, getAllSessionMeta, saveSessionMeta };

package/lib/ui.html

@@ -247,6 +247,18 @@ const storage = {
   setItem(key, val) { try { localStorage.setItem(key, val); } catch { memStore.set(key, val); } },
 };
 
+/* --- Session customization --- */
+const CARD_COLORS = ['', '#ef4444', '#f97316', '#eab308', '#22c55e', '#06b6d4', '#3b82f6', '#a855f7', '#ec4899'];
+
+const STATUS_SORT_ORDER = { running: 0, 'needs-response': 1, idle: 2, limit: 3, offline: 4, ended: 5 };
+function sortSessions(sessions, by) {
+  if (by === 'name') return [...sessions].sort((a, b) => a.name.localeCompare(b.name));
+  return [...sessions].sort((a, b) => {
+    const ao = STATUS_SORT_ORDER[a.status] ?? 9, bo = STATUS_SORT_ORDER[b.status] ?? 9;
+    return ao !== bo ? ao - bo : a.name.localeCompare(b.name);
+  });
+}
+
 /* --- Auth module-level helpers --- */
 let _authToken = storage.getItem('ccp-token') || '';
 let _onUnauth = () => {};
@@ -505,8 +517,27 @@ function Sidebar({ currentScreen, onNavigate, sessionCount, open, onClose, conne
   );
 }
 
+/* --- Sort control --- */
+function SortControl({ sortBy, onSortChange }) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+      <span style={{ fontSize: 11, color: 'var(--muted)', marginRight: 2 }}>Sort:</span>
+      {['status', 'name'].map(opt => (
+        <button key={opt} onClick={() => onSortChange(opt)} style={{
+          fontSize: 11, padding: '3px 7px', borderRadius: 4, cursor: 'pointer',
+          border: '1px solid var(--border)',
+          background: sortBy === opt ? 'var(--accent-soft)' : 'var(--bg)',
+          color: sortBy === opt ? 'var(--accent)' : 'var(--muted)',
+          fontWeight: sortBy === opt ? 600 : 400,
+        }}>{opt.charAt(0).toUpperCase() + opt.slice(1)}</button>
+      ))}
+    </div>
+  );
+}
+
 /* --- Dashboard --- */
-function DashboardScreen({ onNavigate, sessions, activity, serverStatus }) {
+function DashboardScreen({ onNavigate, sessions, activity, serverStatus, sortBy, onSortChange }) {
+  const sorted = sortSessions(sessions, sortBy);
   const running = sessions.filter(s => s.status === 'running');
   const active = sessions.filter(s => s.status !== 'offline');
   const uptime = serverStatus ? formatUptime(serverStatus.startedAt) : '—';
@@ -523,10 +554,13 @@ function DashboardScreen({ onNavigate, sessions, activity, serverStatus }) {
 
       <div className="section-header">
         <h2 className="section-title">Sessions</h2>
-        <button className="btn btn-sm" onClick={() => onNavigate('create')}>{Icons.plus} New</button>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <SortControl sortBy={sortBy} onSortChange={onSortChange} />
+          <button className="btn btn-sm" onClick={() => onNavigate('create')}>{Icons.plus} New</button>
+        </div>
       </div>
 
-      {sessions.length === 0 ? (
+      {sorted.length === 0 ? (
         <div className="empty-state">
           <div className="empty-state-icon">⌘</div>
           <div className="empty-state-title">No sessions yet</div>
@@ -534,11 +568,13 @@ function DashboardScreen({ onNavigate, sessions, activity, serverStatus }) {
         </div>
       ) : (
         <div className="session-cards">
-          {sessions.map(s => (
-            <div key={s.id} className={`session-card ${s.status === 'offline' ? 'offline' : ''}`} onClick={() => onNavigate('detail', s)}>
+          {sorted.map(s => (
+            <div key={s.id} className={`session-card ${s.status === 'offline' ? 'offline' : ''}`}
+              style={s.color ? { borderLeft: `4px solid ${s.color}` } : {}}
+              onClick={() => onNavigate('detail', s)}>
               <div className="session-card-header">
                 <div>
-                  <div className="session-card-name">{s.name}</div>
+                  <div className="session-card-name">{s.emoji ? <span style={{ marginRight: 5 }}>{s.emoji}</span> : null}{s.name}</div>
                   <div className="session-card-meta" style={{ maxWidth: 220, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.path}</div>
                 </div>
                 <StatusPill status={s.status} />
@@ -547,6 +583,11 @@ function DashboardScreen({ onNavigate, sessions, activity, serverStatus }) {
                 <div className="session-card-field"><div className="session-card-field-label">Started</div><div className="session-card-field-value">{relativeTime(s.startedAt)}</div></div>
                 <div className="session-card-field"><div className="session-card-field-label">Tokens</div><div className="session-card-field-value">{formatTokens(s.tokens)}</div></div>
               </div>
+              {(s.queueLength > 0 || s.autoFeed) && (
+                <div style={{ marginTop: 8, paddingTop: 8, borderTop: '1px solid var(--border)', fontSize: 11, color: 'var(--muted)', display: 'flex', alignItems: 'center', gap: 4 }}>
+                  {s.autoFeed ? '⚡' : '⏳'} {s.queueLength} message{s.queueLength !== 1 ? 's' : ''} queued{s.autoFeed ? ' · auto-feed' : ''}
+                </div>
+              )}
             </div>
           ))}
         </div>
@@ -579,6 +620,8 @@ function SessionDetailScreen({ session, onBack, onKilled, onRespawned }) {
   const [output, setOutput] = useState('');
   const [msg, setMsg] = useState('');
   const [sending, setSending] = useState(false);
+  const [emoji, setEmoji] = useState(session.emoji || '');
+  const [color, setColor] = useState(session.color || '');
   const [killing, setKilling] = useState(false);
   const [killError, setKillError] = useState('');
   const [respawning, setRespawning] = useState(false);
@@ -598,6 +641,20 @@ function SessionDetailScreen({ session, onBack, onKilled, onRespawned }) {
     }).catch(() => {});
   };
 
+  // Sync label fields when navigating between sessions
+  useEffect(() => {
+    setEmoji(session.emoji || '');
+    setColor(session.color || '');
+  }, [session.name]);
+
+  const saveMeta = useCallback((e, c) => {
+    apiFetch(`/api/sessions/${encodeURIComponent(session.name)}/meta`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ emoji: e, color: c }),
+    }).catch(() => {});
+  }, [session.name]);
+
   // Auto-focus input on mount and when session changes
   useEffect(() => {
     if (!isOffline) setTimeout(() => inputRef.current?.focus(), 50);
@@ -747,7 +804,7 @@ function SessionDetailScreen({ session, onBack, onKilled, onRespawned }) {
 
       <div className="detail-header">
         <div>
-          <h2 className="detail-title">{session.name}</h2>
+          <h2 className="detail-title">{emoji ? <span style={{ marginRight: 6 }}>{emoji}</span> : null}{session.name}</h2>
           <div className="detail-meta" style={{ maxWidth: 480, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{session.path}</div>
         </div>
         <div className="detail-actions">
@@ -844,9 +901,33 @@ function SessionDetailScreen({ session, onBack, onKilled, onRespawned }) {
               <div className="info-row"><span className="info-label">Resumes</span><span className="info-value" style={{ fontSize: 11, color: 'var(--warning)' }}>{relativeTime(session.resumeAt)}</span></div>
             )}
             <div className="info-row"><span className="info-label">tmux</span><span className="info-value" style={{ fontSize: 11 }}>{session.name}</span></div>
+            <div className="info-row" style={{ alignItems: 'flex-start', paddingTop: 10, marginTop: 4, borderTop: '1px solid var(--border)' }}>
+              <span className="info-label" style={{ paddingTop: 4 }}>Label</span>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                <input
+                  value={emoji}
+                  onChange={e => setEmoji(e.target.value)}
+                  onBlur={() => saveMeta(emoji, color)}
+                  maxLength={8}
+                  placeholder="😀"
+                  style={{ width: 44, textAlign: 'center', fontSize: 18, padding: '2px 4px', border: '1px solid var(--border)', borderRadius: 4, background: 'var(--bg)', color: 'var(--fg)', cursor: 'text' }}
+                />
+                <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+                  {CARD_COLORS.map(c => (
+                    <button key={c || 'none'} onClick={() => { setColor(c); saveMeta(emoji, c); }} title={c || 'No color'} style={{
+                      width: 16, height: 16, borderRadius: '50%', padding: 0, cursor: 'pointer', flexShrink: 0,
+                      background: c || 'transparent',
+                      border: color === c ? '2px solid var(--fg)' : c ? '1px solid oklch(0% 0 0 / 0.2)' : '1px dashed var(--muted)',
+                    }} />
+                  ))}
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
+
+      <QueuePanel session={session} />
     </div>
   );
 }
@@ -927,14 +1008,18 @@ function CreateSessionScreen({ onBack, onCreated }) {
 }
 
 /* --- Sessions List --- */
-function SessionsScreen({ sessions, onNavigate }) {
+function SessionsScreen({ sessions, onNavigate, sortBy, onSortChange }) {
+  const sorted = sortSessions(sessions, sortBy);
   return (
     <div>
       <div className="section-header">
         <h2 className="section-title">All Sessions</h2>
-        <button className="btn btn-sm" onClick={() => onNavigate('create')}>{Icons.plus} New</button>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <SortControl sortBy={sortBy} onSortChange={onSortChange} />
+          <button className="btn btn-sm" onClick={() => onNavigate('create')}>{Icons.plus} New</button>
+        </div>
       </div>
-      {sessions.length === 0 ? (
+      {sorted.length === 0 ? (
         <div className="empty-state"><div className="empty-state-icon">⌘</div><div className="empty-state-title">No sessions</div></div>
       ) : (
         <div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)' }}>
@@ -945,12 +1030,14 @@ function SessionsScreen({ sessions, onNavigate }) {
               ))}</tr>
             </thead>
             <tbody>
-              {sessions.map(s => (
+              {sorted.map(s => (
                 <tr key={s.id} style={{ cursor:'pointer',opacity:s.status==='offline'?0.6:1,transition:'background 0.12s' }}
                   onClick={() => onNavigate('detail', s)}
                   onMouseEnter={e => e.currentTarget.style.background='var(--surface-hover)'}
                   onMouseLeave={e => e.currentTarget.style.background=''}>
-                  <td style={{ padding:'12px 14px',fontWeight:600,fontSize:13,borderBottom:'1px solid var(--border)' }}>{s.name}</td>
+                  <td style={{ padding:'12px 14px',fontWeight:600,fontSize:13,borderBottom:'1px solid var(--border)',borderLeft: s.color ? `4px solid ${s.color}` : undefined }}>
+                    {s.emoji ? <span style={{ marginRight: 5 }}>{s.emoji}</span> : null}{s.name}
+                  </td>
                   <td style={{ padding:'12px 14px',fontSize:12,color:'var(--muted)',borderBottom:'1px solid var(--border)',maxWidth:200,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap' }}>{s.path}</td>
                   <td style={{ padding:'12px 14px',borderBottom:'1px solid var(--border)' }}><StatusPill status={s.status} /></td>
                   <td style={{ padding:'12px 14px',fontSize:12,color:'var(--muted)',fontFamily:'var(--font-mono)',borderBottom:'1px solid var(--border)' }}>{relativeTime(s.startedAt)}</td>
@@ -1015,10 +1102,157 @@ function BroadcastBar({ activeSessions }) {
   );
 }
 
+/* --- Queue Panel --- */
+function QueuePanel({ session }) {
+  const isOffline = session.status === 'offline';
+  const [items, setItems] = useState([]);
+  const [autoFeed, setAutoFeed] = useState(false);
+  const [input, setInput] = useState('');
+  const [busy, setBusy] = useState(false);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    let mounted = true;
+    const load = () => {
+      apiFetch(`/api/sessions/${encodeURIComponent(session.name)}/queue`, { cache: 'no-store' })
+        .then(r => r.json())
+        .then(d => { if (mounted) { setItems(d.items || []); setAutoFeed(!!d.autoFeed); } })
+        .catch(() => {});
+    };
+    load();
+    const t = setInterval(load, 3000);
+    return () => { mounted = false; clearInterval(t); };
+  }, [session.name]);
+
+  const enqueue = async () => {
+    const msg = input.trim();
+    if (!msg || busy) return;
+    setBusy(true);
+    try {
+      const res = await apiFetch(`/api/sessions/${encodeURIComponent(session.name)}/queue`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: msg }),
+      });
+      const data = await res.json();
+      if (res.ok) { setItems(prev => [...prev, data.item]); setInput(''); }
+    } finally {
+      setBusy(false);
+      setTimeout(() => inputRef.current?.focus(), 0);
+    }
+  };
+
+  const play = async () => {
+    if (busy || !items.length || isOffline) return;
+    setBusy(true);
+    try {
+      await apiFetch(`/api/sessions/${encodeURIComponent(session.name)}/queue/play`, { method: 'POST' });
+      setItems(prev => prev.slice(1));
+    } finally { setBusy(false); }
+  };
+
+  const remove = async (id) => {
+    setItems(prev => prev.filter(it => it.id !== id));
+    apiFetch(`/api/sessions/${encodeURIComponent(session.name)}/queue/${id}`, { method: 'DELETE' }).catch(() => {});
+  };
+
+  const toggleAutoFeed = async () => {
+    if (isOffline) return;
+    const next = !autoFeed;
+    setAutoFeed(next);
+    apiFetch(`/api/sessions/${encodeURIComponent(session.name)}/queue`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ autoFeed: next }),
+    }).catch(() => setAutoFeed(!next));
+  };
+
+  return (
+    <div className="card" style={{ padding: '14px 18px', marginTop: 16 }}>
+      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 12 }}>
+        <span style={{ fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--muted)', display: 'flex', alignItems: 'center', gap: 6 }}>
+          Queue
+          {items.length > 0 && (
+            <span style={{ background: 'var(--accent-soft)', color: 'var(--accent)', fontFamily: 'var(--font-mono)', fontSize: 11, padding: '1px 6px', borderRadius: 8, fontWeight: 700 }}>
+              {items.length}
+            </span>
+          )}
+        </span>
+        <button
+          onClick={toggleAutoFeed}
+          disabled={isOffline}
+          title={isOffline ? 'Start session to enable auto-feed' : autoFeed ? 'Auto-feed: sends next message when session goes idle' : 'Enable auto-feed'}
+          style={{
+            marginLeft: 'auto', fontSize: 11, padding: '3px 8px', borderRadius: 6, cursor: isOffline ? 'not-allowed' : 'pointer', fontWeight: 600,
+            border: `1px solid ${autoFeed && !isOffline ? 'var(--success)' : 'var(--border)'}`,
+            background: autoFeed && !isOffline ? 'var(--success-soft)' : 'var(--bg)',
+            color: autoFeed && !isOffline ? 'var(--success)' : 'var(--muted)',
+            opacity: isOffline ? 0.5 : 1,
+          }}
+        >
+          {autoFeed && !isOffline ? '⚡ Auto-feed on' : 'Auto-feed off'}
+        </button>
+      </div>
+
+      {items.length === 0 && (
+        <div style={{ fontSize: 12, color: 'var(--muted)', textAlign: 'center', padding: '8px 0 12px' }}>No messages queued</div>
+      )}
+
+      {items.length > 0 && (
+        <div style={{ marginBottom: 12, border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)', overflow: 'hidden' }}>
+          {items.map((item, i) => (
+            <div key={item.id} style={{
+              display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px',
+              background: i === 0 ? 'var(--accent-soft)' : 'transparent',
+              borderBottom: i < items.length - 1 ? '1px solid var(--border)' : 'none',
+            }}>
+              {i === 0 ? (
+                <button
+                  onClick={play}
+                  disabled={busy || isOffline}
+                  title={isOffline ? 'Session offline' : 'Send now'}
+                  style={{ background: 'none', border: 'none', cursor: busy || isOffline ? 'not-allowed' : 'pointer', color: isOffline ? 'var(--muted)' : 'var(--success)', fontSize: 13, padding: 0, flexShrink: 0, opacity: isOffline ? 0.4 : 1 }}
+                >▶</button>
+              ) : (
+                <span style={{ width: 16, flexShrink: 0, textAlign: 'center', fontSize: 11, color: 'var(--muted)', fontFamily: 'var(--font-mono)' }}>{i + 1}</span>
+              )}
+              <span style={{ flex: 1, fontSize: 12, fontFamily: 'var(--font-mono)', color: i === 0 ? 'var(--fg)' : 'var(--fg-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {item.message}
+              </span>
+              <button
+                onClick={() => remove(item.id)}
+                title="Remove"
+                style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--muted)', fontSize: 13, padding: 0, flexShrink: 0, lineHeight: 1 }}
+              >✕</button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div style={{ display: 'flex', gap: 8 }}>
+        <input
+          ref={inputRef}
+          className="form-input"
+          placeholder="Type a message to queue…"
+          value={input}
+          onChange={e => setInput(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && enqueue()}
+          style={{ flex: 1, fontSize: 12 }}
+        />
+        <button className="btn btn-sm btn-primary" onClick={enqueue} disabled={busy || !input.trim()}>
+          + Enqueue
+        </button>
+      </div>
+    </div>
+  );
+}
+
 /* --- App --- */
 function App() {
   const savedTheme = storage.getItem('ccp-theme');
   const [dark, setDark] = useState(savedTheme === 'dark');
+  const [sortBy, setSortByState] = useState(storage.getItem('ccp-sort') || 'status');
+  const setSortBy = (v) => { setSortByState(v); storage.setItem('ccp-sort', v); };
   const [screen, setScreen] = useState('dashboard');
   const [selectedSession, setSelectedSession] = useState(null);
   const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -1127,8 +1361,8 @@ function App() {
 
   const renderScreen = () => {
     switch (screen) {
-      case 'dashboard': return <DashboardScreen onNavigate={navigate} sessions={sessions} activity={activity} serverStatus={serverStatus} />;
-      case 'sessions':  return <SessionsScreen sessions={sessions} onNavigate={navigate} />;
+      case 'dashboard': return <DashboardScreen onNavigate={navigate} sessions={sessions} activity={activity} serverStatus={serverStatus} sortBy={sortBy} onSortChange={setSortBy} />;
+      case 'sessions':  return <SessionsScreen sessions={sessions} onNavigate={navigate} sortBy={sortBy} onSortChange={setSortBy} />;
       case 'create':    return <CreateSessionScreen onBack={() => navigate('dashboard')} onCreated={s => navigate('detail', s)} />;
       case 'detail':    return <SessionDetailScreen session={selectedSession} onBack={() => navigate('dashboard')} onKilled={() => navigate('sessions')} onRespawned={(respawned) => {
         setSessions(prev => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-remote-pilot",
-  "version": "0.5.10",
+  "version": "0.5.12",
   "description": "Interactive Claude Code supervisor — spawn and monitor multiple Claude sessions from a single terminal.",
   "type": "commonjs",
   "repository": {