From cdbbade0aa4bf0c192f6750df8ff1ae80498e013 Mon Sep 17 00:00:00 2001
From: Marty <marty@croakingtoad.com>
Date: Mon, 12 Jan 2026 19:38:24 +0000
Subject: [PATCH] feat: Add mobile-responsive UI with remote access support
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implements a fully responsive mobile-friendly interface that adapts to
different screen sizes while maintaining the existing desktop Kanban
board experience.

## Mobile View (<1024px)

**New Components:**
- RepoDropdown: Dropdown navigation showing repos with colored status
  emoji indicators (🟢 working, 🟠 needs approval, 🟡 waiting, ⚪ idle)
- StatusFilter: Chip-based status filters for quick filtering
- SessionCardCompact: Touch-optimized session cards for list view
- SessionDetailModal: Full-screen modal for viewing session details

**Features:**
- Dropdown shows aggregated status emojis for each repo
- Filter sessions by both repo AND status simultaneously
- Vertical scrollable list of sessions (sorted by activity)
- Tap any session card to view full details in modal
- Touch-friendly 44px minimum tap targets
- No horizontal scrolling required

## Desktop View (≥1024px)

- Preserves existing 4-column Kanban board layout
- Hover cards for session details
- No changes to current desktop experience

## Remote Access Support

**Daemon (server.ts):**
- Bind to 0.0.0.0 by default (configurable via HOST env var)
- Allows connections from remote clients, not just localhost

**UI (sessionsDb.ts):**
- Dynamic stream URL based on browser location
- Automatically connects to daemon on same host as web UI
- Supports both local (127.0.0.1) and remote access

## Technical Details

- CSS breakpoint: 1024px
- Uses CSS media queries to toggle between layouts
- Mobile-first approach with progressive enhancement
- Maintains all existing functionality
- Zero breaking changes to desktop experience

## Testing

Tested on:
- Desktop browsers (Chrome, Firefox)
- Mobile responsive mode (Chrome DevTools)
- Remote access via SSH tunnel

Closes: N/A (enhancement)
---
 packages/daemon/src/server.ts                 |   8 +-
 packages/ui/src/components/RepoDropdown.tsx   |  44 +++
 .../ui/src/components/SessionCardCompact.tsx  | 133 +++++++++
 .../ui/src/components/SessionDetailModal.tsx  | 258 ++++++++++++++++++
 packages/ui/src/components/StatusFilter.tsx   |  48 ++++
 packages/ui/src/data/sessionsDb.ts            |   4 +-
 packages/ui/src/index.css                     |  63 +++++
 packages/ui/src/routes/index.tsx              | 156 ++++++++++-
 8 files changed, 697 insertions(+), 17 deletions(-)
 create mode 100644 packages/ui/src/components/RepoDropdown.tsx
 create mode 100644 packages/ui/src/components/SessionCardCompact.tsx
 create mode 100644 packages/ui/src/components/SessionDetailModal.tsx
 create mode 100644 packages/ui/src/components/StatusFilter.tsx

diff --git a/packages/daemon/src/server.ts b/packages/daemon/src/server.ts
index ee6101d..bfefd1b 100644
--- a/packages/daemon/src/server.ts
+++ b/packages/daemon/src/server.ts
@@ -29,19 +29,21 @@ export class StreamServer {
 
   constructor(options: StreamServerOptions = {}) {
     this.port = options.port ?? DEFAULT_PORT;
+    const host = process.env.HOST ?? "0.0.0.0";
 
     // Use in-memory storage during development (no dataDir = in-memory)
     this.server = new DurableStreamTestServer({
       port: this.port,
-      host: "127.0.0.1",
+      host,
     });
 
-    this.streamUrl = `http://127.0.0.1:${this.port}${SESSIONS_STREAM_PATH}`;
+    this.streamUrl = `http://${host}:${this.port}${SESSIONS_STREAM_PATH}`;
   }
 
   async start(): Promise<void> {
     await this.server.start();
-    log("Server", `Durable Streams server running on http://127.0.0.1:${this.port}`);
+    const host = process.env.HOST ?? "0.0.0.0";
+    log("Server", `Durable Streams server running on http://${host}:${this.port}`);
 
     // Create or connect to the sessions stream
     try {
diff --git a/packages/ui/src/components/RepoDropdown.tsx b/packages/ui/src/components/RepoDropdown.tsx
new file mode 100644
index 0000000..435bbe5
--- /dev/null
+++ b/packages/ui/src/components/RepoDropdown.tsx
@@ -0,0 +1,44 @@
+import { Select } from "@radix-ui/themes";
+
+interface RepoOption {
+  repoId: string;
+  repoUrl: string | null;
+  sessionCount: number;
+  statuses: Set<string>; // 'working', 'waiting', 'idle', 'needs-approval'
+}
+
+interface RepoDropdownProps {
+  repos: RepoOption[];
+  selectedRepo: string;
+  onSelectRepo: (repoId: string) => void;
+}
+
+function getStatusEmojis(statuses: Set<string>): string {
+  const emojis: string[] = [];
+  if (statuses.has("working")) emojis.push("🟢");
+  if (statuses.has("needs-approval")) emojis.push("🟠");
+  if (statuses.has("waiting")) emojis.push("🟡");
+  if (statuses.has("idle") && emojis.length === 0) emojis.push("⚪");
+  return emojis.join("");
+}
+
+export function RepoDropdown({ repos, selectedRepo, onSelectRepo }: RepoDropdownProps) {
+  return (
+    <Select.Root value={selectedRepo} onValueChange={onSelectRepo}>
+      <Select.Trigger
+        className="mobile-dropdown-trigger"
+        style={{ width: "100%" }}
+      />
+      <Select.Content>
+        <Select.Item value="all">All Repos</Select.Item>
+        {repos.map((repo) => (
+          <Select.Item key={repo.repoId} value={repo.repoId}>
+            {getStatusEmojis(repo.statuses)} {repo.repoId} ({repo.sessionCount})
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select.Root>
+  );
+}
+
+export type { RepoOption };
diff --git a/packages/ui/src/components/SessionCardCompact.tsx b/packages/ui/src/components/SessionCardCompact.tsx
new file mode 100644
index 0000000..d343df8
--- /dev/null
+++ b/packages/ui/src/components/SessionCardCompact.tsx
@@ -0,0 +1,133 @@
+import { Card, Flex, Text, Code, Badge } from "@radix-ui/themes";
+import type { Session } from "../data/schema";
+
+interface SessionCardCompactProps {
+  session: Session;
+  onClick?: () => void;
+}
+
+function getStatusEmoji(session: Session): string {
+  if (session.status === "working") return "🟢";
+  if (session.status === "waiting" && session.hasPendingToolUse) return "🟠";
+  if (session.status === "waiting") return "🟡";
+  return "⚪";
+}
+
+function formatTimeAgo(isoString: string): string {
+  const now = Date.now();
+  const then = new Date(isoString).getTime();
+  const diff = now - then;
+
+  const seconds = Math.floor(diff / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (days > 0) return `${days}d ago`;
+  if (hours > 0) return `${hours}h ago`;
+  if (minutes > 0) return `${minutes}m ago`;
+  return `${seconds}s ago`;
+}
+
+function getCIStatusColor(status: string): "green" | "red" | "yellow" | "gray" {
+  switch (status) {
+    case "success":
+      return "green";
+    case "failure":
+      return "red";
+    case "running":
+    case "pending":
+      return "yellow";
+    default:
+      return "gray";
+  }
+}
+
+function getCIStatusIcon(status: string): string {
+  switch (status) {
+    case "success":
+      return "✓";
+    case "failure":
+      return "✗";
+    case "running":
+    case "pending":
+      return "◎";
+    default:
+      return "?";
+  }
+}
+
+export function SessionCardCompact({ session, onClick }: SessionCardCompactProps) {
+  const repoName = session.gitRepoId || "Other";
+  const branch = session.gitBranch || "no branch";
+
+  return (
+    <Card
+      size="2"
+      className="session-card-compact"
+      style={{ cursor: onClick ? "pointer" : "default" }}
+      onClick={onClick}
+    >
+      <Flex direction="column" gap="2">
+        {/* Header: status + repo/branch + time */}
+        <Flex justify="between" align="center">
+          <Flex align="center" gap="2">
+            <Text size="2">{getStatusEmoji(session)}</Text>
+            <Text size="1" color="gray" weight="medium">
+              {repoName} • {branch.length > 20 ? branch.slice(0, 17) + "..." : branch}
+            </Text>
+          </Flex>
+          <Text size="1" color="gray">
+            {formatTimeAgo(session.lastActivityAt)}
+          </Text>
+        </Flex>
+
+        {/* Goal/prompt */}
+        <Text size="2" weight="medium" highContrast>
+          {session.goal || session.originalPrompt.slice(0, 60)}
+        </Text>
+
+        {/* Summary or pending tool */}
+        <Text size="1" color="gray" style={{ lineHeight: 1.4 }}>
+          {session.hasPendingToolUse && session.pendingTool ? (
+            <>
+              ⚠️ {session.pendingTool.tool}: {session.pendingTool.target.slice(0, 40)}
+            </>
+          ) : (
+            session.summary
+          )}
+        </Text>
+
+        {/* Footer: PR/branch + message count */}
+        <Flex justify="between" align="center">
+          <Flex align="center" gap="2">
+            {session.pr ? (
+              <a
+                href={session.pr.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={(e) => e.stopPropagation()}
+                style={{ textDecoration: "none" }}
+              >
+                <Badge
+                  color={getCIStatusColor(session.pr.ciStatus)}
+                  variant="soft"
+                  size="1"
+                >
+                  {getCIStatusIcon(session.pr.ciStatus)} PR #{session.pr.number}
+                </Badge>
+              </a>
+            ) : session.gitBranch ? (
+              <Code size="1" variant="soft" color="gray">
+                [{session.gitBranch.slice(0, 20)}]
+              </Code>
+            ) : null}
+          </Flex>
+          <Text size="1" color="gray">
+            {session.messageCount} msgs
+          </Text>
+        </Flex>
+      </Flex>
+    </Card>
+  );
+}
diff --git a/packages/ui/src/components/SessionDetailModal.tsx b/packages/ui/src/components/SessionDetailModal.tsx
new file mode 100644
index 0000000..fc1e989
--- /dev/null
+++ b/packages/ui/src/components/SessionDetailModal.tsx
@@ -0,0 +1,258 @@
+import { Dialog, Flex, Heading, Text, Box, Badge, Code, Separator, Blockquote, ScrollArea } from "@radix-ui/themes";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import type { Session } from "../data/schema";
+
+const codeTheme = {
+  ...oneDark,
+  'comment': { ...oneDark['comment'], color: '#8b949e' },
+  'prolog': { ...oneDark['prolog'], color: '#8b949e' },
+  'doctype': { ...oneDark['doctype'], color: '#8b949e' },
+  'cdata': { ...oneDark['cdata'], color: '#8b949e' },
+};
+
+interface SessionDetailModalProps {
+  session: Session | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+function getRoleColor(role: "user" | "assistant" | "tool"): string {
+  switch (role) {
+    case "user":
+      return "var(--blue-11)";
+    case "assistant":
+      return "var(--gray-12)";
+    case "tool":
+      return "var(--violet-11)";
+  }
+}
+
+function getCIStatusColor(status: string): "green" | "red" | "yellow" | "gray" {
+  switch (status) {
+    case "success":
+      return "green";
+    case "failure":
+      return "red";
+    case "running":
+    case "pending":
+      return "yellow";
+    default:
+      return "gray";
+  }
+}
+
+function getCIStatusIcon(status: string): string {
+  switch (status) {
+    case "success":
+      return "✓";
+    case "failure":
+      return "✗";
+    case "running":
+    case "pending":
+      return "◎";
+    default:
+      return "?";
+  }
+}
+
+export function SessionDetailModal({ session, open, onOpenChange }: SessionDetailModalProps) {
+  if (!session) return null;
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Content
+        style={{ maxWidth: "95vw", width: 600, maxHeight: "90vh" }}
+      >
+        <Dialog.Title mb="2">
+          {session.goal || session.originalPrompt.slice(0, 60)}
+        </Dialog.Title>
+
+        <Dialog.Description size="2" mb="4">
+          {session.cwd.replace(/^\/Users\/\w+\//, "~/")}
+        </Dialog.Description>
+
+        <ScrollArea style={{ maxHeight: "60vh" }}>
+          <Flex direction="column" gap="3">
+            {/* Recent output */}
+            <Box
+              p="3"
+              style={{
+                backgroundColor: "var(--gray-2)",
+                borderRadius: "var(--radius-3)",
+              }}
+            >
+              {session.recentOutput?.length > 0 ? (
+                session.recentOutput.map((output, i) => (
+                  <Box
+                    key={i}
+                    style={{ color: getRoleColor(output.role) }}
+                    className="markdown-content"
+                  >
+                    {output.role === "user" && (
+                      <>
+                        <Separator size="4" color="blue" mb="4" />
+                        <Text as="p" size="1" weight="medium" mb="3">
+                          You:
+                        </Text>
+                      </>
+                    )}
+                    <Markdown
+                      remarkPlugins={[remarkGfm]}
+                      components={{
+                        p: ({ children }) => (
+                          <Text as="p" size="1" mb="4">
+                            {children}
+                          </Text>
+                        ),
+                        code: ({ className, children }) => {
+                          const match = /language-(\w+)/.exec(className || "");
+                          const isBlock = Boolean(match);
+                          return isBlock ? (
+                            <SyntaxHighlighter
+                              style={codeTheme}
+                              language={match![1]}
+                              PreTag="div"
+                              customStyle={{
+                                margin: 0,
+                                borderRadius: "var(--radius-2)",
+                                fontSize: "var(--font-size-1)",
+                              }}
+                            >
+                              {String(children).replace(/\n$/, "")}
+                            </SyntaxHighlighter>
+                          ) : (
+                            <Code size="1">{children}</Code>
+                          );
+                        },
+                        pre: ({ children }) => <Box mb="4">{children}</Box>,
+                        ul: ({ children }) => (
+                          <ul
+                            style={{
+                              paddingLeft: "var(--space-5)",
+                              marginBottom: "var(--space-4)",
+                              listStyleType: "disc",
+                            }}
+                          >
+                            {children}
+                          </ul>
+                        ),
+                        ol: ({ children }) => (
+                          <ol
+                            style={{
+                              paddingLeft: "var(--space-5)",
+                              marginBottom: "var(--space-4)",
+                              listStyleType: "decimal",
+                            }}
+                          >
+                            {children}
+                          </ol>
+                        ),
+                        li: ({ children }) => (
+                          <li
+                            style={{
+                              marginBottom: "var(--space-1)",
+                              fontSize: "var(--font-size-1)",
+                            }}
+                          >
+                            {children}
+                          </li>
+                        ),
+                        h1: ({ children }) => (
+                          <Heading size="3" mb="4">
+                            {children}
+                          </Heading>
+                        ),
+                        h2: ({ children }) => (
+                          <Heading size="2" mb="4">
+                            {children}
+                          </Heading>
+                        ),
+                        h3: ({ children }) => (
+                          <Heading size="1" mb="4">
+                            {children}
+                          </Heading>
+                        ),
+                        blockquote: ({ children }) => (
+                          <Blockquote size="1" mb="4">
+                            {children}
+                          </Blockquote>
+                        ),
+                        a: ({ href, children }) => (
+                          <a
+                            href={href}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            {children}
+                          </a>
+                        ),
+                      }}
+                    >
+                      {output.content}
+                    </Markdown>
+                    {output.role === "user" && (
+                      <Separator size="4" color="blue" my="4" />
+                    )}
+                  </Box>
+                ))
+              ) : (
+                <Text size="1" color="gray">
+                  No recent output
+                </Text>
+              )}
+              {session.status === "working" && (
+                <Text color="grass" size="1">
+                  █
+                </Text>
+              )}
+            </Box>
+
+            {/* PR Info if available */}
+            {session.pr && (
+              <Box>
+                <Flex align="center" gap="2" mb="2">
+                  <a
+                    href={session.pr.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    style={{ fontSize: "var(--font-size-1)", fontWeight: 500 }}
+                  >
+                    PR #{session.pr.number}: {session.pr.title}
+                  </a>
+                </Flex>
+                {session.pr.ciChecks.length > 0 && (
+                  <Flex gap="2" wrap="wrap">
+                    {session.pr.ciChecks.map((check) => (
+                      <Badge
+                        key={check.name}
+                        color={getCIStatusColor(check.status)}
+                        variant="soft"
+                        size="1"
+                      >
+                        {getCIStatusIcon(check.status)}{" "}
+                        {check.name.slice(0, 20)}
+                      </Badge>
+                    ))}
+                  </Flex>
+                )}
+              </Box>
+            )}
+
+            {/* Session metadata */}
+            <Flex justify="between">
+              <Text size="1" color="gray">
+                {session.messageCount} messages
+              </Text>
+              <Text size="1" color="gray">
+                {session.sessionId.slice(0, 8)}
+              </Text>
+            </Flex>
+          </Flex>
+        </ScrollArea>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}
diff --git a/packages/ui/src/components/StatusFilter.tsx b/packages/ui/src/components/StatusFilter.tsx
new file mode 100644
index 0000000..391957e
--- /dev/null
+++ b/packages/ui/src/components/StatusFilter.tsx
@@ -0,0 +1,48 @@
+import { Flex, Badge } from "@radix-ui/themes";
+
+type FilterStatus = "all" | "working" | "needs-approval" | "waiting" | "idle";
+
+interface StatusFilterProps {
+  activeFilter: FilterStatus;
+  onFilterChange: (filter: FilterStatus) => void;
+  counts: Record<FilterStatus, number>;
+}
+
+const filterConfig: Array<{
+  value: FilterStatus;
+  label: string;
+  emoji: string;
+  color: "gray" | "green" | "orange" | "yellow";
+}> = [
+  { value: "all", label: "All", emoji: "", color: "gray" },
+  { value: "working", label: "Working", emoji: "🟢", color: "green" },
+  { value: "needs-approval", label: "Approval", emoji: "🟠", color: "orange" },
+  { value: "waiting", label: "Waiting", emoji: "🟡", color: "yellow" },
+  { value: "idle", label: "Idle", emoji: "⚪", color: "gray" },
+];
+
+export function StatusFilter({ activeFilter, onFilterChange, counts }: StatusFilterProps) {
+  return (
+    <Flex gap="2" wrap="wrap" className="status-filter">
+      {filterConfig.map((filter) => {
+        const count = counts[filter.value];
+        const isActive = activeFilter === filter.value;
+
+        return (
+          <Badge
+            key={filter.value}
+            color={isActive ? filter.color : "gray"}
+            variant={isActive ? "solid" : "soft"}
+            size="2"
+            style={{ cursor: "pointer" }}
+            onClick={() => onFilterChange(filter.value)}
+          >
+            {filter.emoji} {filter.label} {count > 0 && `(${count})`}
+          </Badge>
+        );
+      })}
+    </Flex>
+  );
+}
+
+export type { FilterStatus };
diff --git a/packages/ui/src/data/sessionsDb.ts b/packages/ui/src/data/sessionsDb.ts
index 385f29e..fe07c9e 100644
--- a/packages/ui/src/data/sessionsDb.ts
+++ b/packages/ui/src/data/sessionsDb.ts
@@ -1,7 +1,9 @@
 import { createStreamDB, type StreamDB } from "@durable-streams/state";
 import { sessionsStateSchema } from "./schema";
 
-const STREAM_URL = "http://127.0.0.1:4450/sessions";
+// Use environment variable if set, otherwise construct from window.location
+const STREAM_URL = import.meta.env.VITE_STREAM_URL ??
+  `${window.location.protocol}//${window.location.hostname}:4450/sessions`;
 
 export type SessionsDB = StreamDB<typeof sessionsStateSchema>;
 
diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
index 61e6bc9..f933491 100644
--- a/packages/ui/src/index.css
+++ b/packages/ui/src/index.css
@@ -92,3 +92,66 @@ body {
 .session-card:nth-child(3) { animation-delay: 100ms; }
 .session-card:nth-child(4) { animation-delay: 150ms; }
 .session-card:nth-child(5) { animation-delay: 200ms; }
+
+/* Responsive layout: Mobile vs Desktop */
+/* Mobile: < 1024px - Show list view */
+/* Desktop: >= 1024px - Show Kanban board */
+
+/* Default: Hide desktop, show mobile */
+.desktop-view {
+  display: none;
+}
+
+.mobile-view {
+  display: block;
+}
+
+/* Desktop breakpoint: >= 1024px */
+@media (min-width: 1024px) {
+  .desktop-view {
+    display: flex;
+  }
+
+  .mobile-view {
+    display: none;
+  }
+}
+
+/* Mobile-specific styles */
+.mobile-view {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+.session-card-compact {
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.session-card-compact:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.session-card-compact:active {
+  transform: translateY(0);
+}
+
+/* Status filter chips */
+.status-filter {
+  padding: 4px 0;
+}
+
+/* Dropdown styling */
+.mobile-dropdown-trigger {
+  min-height: 44px;
+  font-size: 16px;
+}
+
+/* Touch-friendly minimum sizes */
+@media (max-width: 1023px) {
+  /* Ensure touch targets are at least 44x44px */
+  button, .session-card-compact {
+    min-height: 44px;
+  }
+}
diff --git a/packages/ui/src/routes/index.tsx b/packages/ui/src/routes/index.tsx
index db59496..b11d0f1 100644
--- a/packages/ui/src/routes/index.tsx
+++ b/packages/ui/src/routes/index.tsx
@@ -1,15 +1,36 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { Flex, Text } from "@radix-ui/themes";
-import { useEffect, useState } from "react";
+import { Flex, Text, Box } from "@radix-ui/themes";
+import { useEffect, useState, useMemo } from "react";
 import { RepoSection } from "../components/RepoSection";
 import { useSessions, groupSessionsByRepo } from "../hooks/useSessions";
+import { RepoDropdown, type RepoOption } from "../components/RepoDropdown";
+import { StatusFilter, type FilterStatus } from "../components/StatusFilter";
+import { SessionCardCompact } from "../components/SessionCardCompact";
+import { SessionDetailModal } from "../components/SessionDetailModal";
+import type { Session, SessionStatus } from "../data/schema";
 
 export const Route = createFileRoute("/")({
   component: IndexPage,
 });
 
+function getEffectiveStatus(session: Session): SessionStatus | "needs-approval" {
+  const elapsed = Date.now() - new Date(session.lastActivityAt).getTime();
+  const IDLE_TIMEOUT_MS = 60 * 60 * 1000; // 1 hour
+
+  if (elapsed > IDLE_TIMEOUT_MS) {
+    return "idle";
+  }
+  if (session.status === "waiting" && session.hasPendingToolUse) {
+    return "needs-approval";
+  }
+  return session.status;
+}
+
 function IndexPage() {
   const { sessions } = useSessions();
+  const [selectedRepo, setSelectedRepo] = useState<string>("all");
+  const [statusFilter, setStatusFilter] = useState<FilterStatus>("all");
+  const [selectedSession, setSelectedSession] = useState<Session | null>(null);
 
   // Force re-render every minute to update relative times and activity scores
   const [, setTick] = useState(0);
@@ -18,6 +39,69 @@ function IndexPage() {
     return () => clearInterval(interval);
   }, []);
 
+  // Build repo options for dropdown
+  const repoOptions = useMemo((): RepoOption[] => {
+    const repoMap = new Map<string, RepoOption>();
+
+    sessions.forEach((session) => {
+      const repoId = session.gitRepoId || "Other";
+      if (!repoMap.has(repoId)) {
+        repoMap.set(repoId, {
+          repoId,
+          repoUrl: session.gitRepoUrl,
+          sessionCount: 0,
+          statuses: new Set(),
+        });
+      }
+
+      const repo = repoMap.get(repoId)!;
+      repo.sessionCount++;
+      repo.statuses.add(getEffectiveStatus(session));
+    });
+
+    return Array.from(repoMap.values()).sort((a, b) =>
+      b.sessionCount - a.sessionCount
+    );
+  }, [sessions]);
+
+  // Filter sessions for mobile view
+  const filteredSessions = useMemo(() => {
+    let filtered = sessions;
+
+    // Filter by repo
+    if (selectedRepo !== "all") {
+      filtered = filtered.filter((s) =>
+        (s.gitRepoId || "Other") === selectedRepo
+      );
+    }
+
+    // Filter by status
+    if (statusFilter !== "all") {
+      filtered = filtered.filter((s) =>
+        getEffectiveStatus(s) === statusFilter
+      );
+    }
+
+    // Sort by last activity
+    return filtered.sort((a, b) =>
+      new Date(b.lastActivityAt).getTime() - new Date(a.lastActivityAt).getTime()
+    );
+  }, [sessions, selectedRepo, statusFilter]);
+
+  // Calculate status counts for filter badges
+  const statusCounts = useMemo(() => {
+    const base = selectedRepo === "all" ? sessions :
+      sessions.filter((s) => (s.gitRepoId || "Other") === selectedRepo);
+
+    return {
+      all: base.length,
+      working: base.filter((s) => getEffectiveStatus(s) === "working").length,
+      "needs-approval": base.filter((s) => getEffectiveStatus(s) === "needs-approval").length,
+      waiting: base.filter((s) => getEffectiveStatus(s) === "waiting").length,
+      idle: base.filter((s) => getEffectiveStatus(s) === "idle").length,
+    };
+  }, [sessions, selectedRepo]);
+
   if (sessions.length === 0) {
     return (
       <Flex direction="column" align="center" gap="3" py="9">
@@ -34,16 +118,62 @@ function IndexPage() {
   const repoGroups = groupSessionsByRepo(sessions);
 
   return (
-    <Flex direction="column">
-      {repoGroups.map((group) => (
-        <RepoSection
-          key={group.repoId}
-          repoId={group.repoId}
-          repoUrl={group.repoUrl}
-          sessions={group.sessions}
-          activityScore={group.activityScore}
-        />
-      ))}
-    </Flex>
+    <>
+      {/* Mobile view */}
+      <Box className="mobile-view">
+        <Flex direction="column" gap="3" p="3">
+          {/* Repo dropdown */}
+          <RepoDropdown
+            repos={repoOptions}
+            selectedRepo={selectedRepo}
+            onSelectRepo={setSelectedRepo}
+          />
+
+          {/* Status filter chips */}
+          <StatusFilter
+            activeFilter={statusFilter}
+            onFilterChange={setStatusFilter}
+            counts={statusCounts}
+          />
+
+          {/* Session list */}
+          <Flex direction="column" gap="2">
+            {filteredSessions.length === 0 ? (
+              <Text color="gray" size="2" align="center" py="9">
+                No sessions match the current filters
+              </Text>
+            ) : (
+              filteredSessions.map((session) => (
+                <SessionCardCompact
+                  key={session.sessionId}
+                  session={session}
+                  onClick={() => setSelectedSession(session)}
+                />
+              ))
+            )}
+          </Flex>
+        </Flex>
+      </Box>
+
+      {/* Desktop view (original Kanban) */}
+      <Flex direction="column" className="desktop-view">
+        {repoGroups.map((group) => (
+          <RepoSection
+            key={group.repoId}
+            repoId={group.repoId}
+            repoUrl={group.repoUrl}
+            sessions={group.sessions}
+            activityScore={group.activityScore}
+          />
+        ))}
+      </Flex>
+
+      {/* Session detail modal (mobile only) */}
+      <SessionDetailModal
+        session={selectedSession}
+        open={selectedSession !== null}
+        onOpenChange={(open) => !open && setSelectedSession(null)}
+      />
+    </>
   );
 }