@prmichaelsen/acp-visualizer 0.9.2 → 0.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prmichaelsen/acp-visualizer",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "type": "module",
   "description": "Browser-based dashboard for visualizing ACP progress.yaml data",
   "bin": {

package/src/components/Header.tsx

@@ -14,15 +14,18 @@ export function Header({ data }: HeaderProps) {
   if (!data) return null
 
   return (
-    <header className="h-14 border-b border-gray-200 dark:border-gray-800 flex items-center px-6 gap-4 shrink-0 bg-white dark:bg-gray-950">
-      <h1 className="text-sm font-medium text-gray-900 dark:text-gray-200">{data.project.name}</h1>
-      <span className="text-xs text-gray-500 dark:text-gray-500 font-mono">v{data.project.version}</span>
-      <StatusBadge status={data.project.status} />
-      <div className="ml-auto flex items-center gap-4">
-        <div className="flex items-center gap-3 w-48">
+    <header className="h-14 border-b border-gray-200 dark:border-gray-800 flex items-center pl-16 lg:pl-6 pr-4 lg:pr-6 gap-2 lg:gap-4 shrink-0 bg-white dark:bg-gray-950">
+      <h1 className="text-sm font-medium text-gray-900 dark:text-gray-200 truncate">{data.project.name}</h1>
+      <span className="hidden sm:inline text-xs text-gray-500 dark:text-gray-500 font-mono">v{data.project.version}</span>
+      <div className="hidden sm:block">
+        <StatusBadge status={data.project.status} />
+      </div>
+      <div className="ml-auto flex items-center gap-2 lg:gap-4">
+        <div className="hidden md:flex items-center gap-3 w-32 lg:w-48">
           <ProgressBar value={data.progress.overall} size="sm" />
           <span className="text-xs text-gray-600 dark:text-gray-400 font-mono">{data.progress.overall}%</span>
         </div>
+        <span className="md:hidden text-xs text-gray-600 dark:text-gray-400 font-mono">{data.progress.overall}%</span>
         <button
           onClick={toggleTheme}
           className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"

package/src/components/MilestoneTable.tsx

@@ -36,6 +36,63 @@ export function MilestoneTable({ milestones, tasks }: MilestoneTableProps) {
     })
   }
 
+  // Mobile card view
+  const MobileCard = ({ milestone }: { milestone: Milestone }) => {
+    const milestoneTasks = tasks[milestone.id] || []
+    const isExpanded = expanded.has(milestone.id)
+
+    return (
+      <div className="border border-gray-200 dark:border-gray-800 rounded-lg p-4 space-y-3">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex-1 min-w-0">
+            <Link
+              to="/milestones/$milestoneId"
+              params={{ milestoneId: milestone.id }}
+              className="text-sm font-medium text-gray-900 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400"
+            >
+              {formatMilestoneName(milestone)}
+            </Link>
+          </div>
+          <PreviewButton type="milestone" id={milestone.id} />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <StatusBadge status={milestone.status} />
+          <PriorityBadge priority={milestone.priority} />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <div className="flex-1">
+            <ProgressBar value={milestone.progress} size="sm" />
+          </div>
+          <span className="text-xs text-gray-600 dark:text-gray-500 font-mono">{milestone.progress}%</span>
+        </div>
+
+        <div className="flex items-center justify-between text-xs text-gray-600 dark:text-gray-500">
+          <span>Tasks: {milestone.tasks_completed}/{milestone.tasks_total}</span>
+          {milestoneTasks.length > 0 && (
+            <button
+              onClick={() => toggle(milestone.id)}
+              className="flex items-center gap-1 hover:text-gray-900 dark:hover:text-gray-300"
+            >
+              {isExpanded ? (
+                <ChevronDown className="w-4 h-4" />
+              ) : (
+                <ChevronRight className="w-4 h-4" />
+              )}
+            </button>
+          )}
+        </div>
+
+        {isExpanded && milestoneTasks.length > 0 && (
+          <div className="pt-2 border-t border-gray-200 dark:border-gray-800">
+            <TaskList tasks={milestoneTasks} />
+          </div>
+        )}
+      </div>
+    )
+  }
+
   const columns = [
     columnHelper.display({
       id: 'expand',
@@ -135,8 +192,17 @@ export function MilestoneTable({ milestones, tasks }: MilestoneTableProps) {
   }
 
   return (
-    <div className="border border-gray-800 rounded-lg overflow-hidden">
-      <table className="w-full">
+    <>
+      {/* Mobile Card View */}
+      <div className="lg:hidden space-y-3">
+        {milestones.map((milestone) => (
+          <MobileCard key={milestone.id} milestone={milestone} />
+        ))}
+      </div>
+
+      {/* Desktop Table View */}
+      <div className="hidden lg:block border border-gray-800 rounded-lg overflow-hidden">
+        <table className="w-full">
         <thead>
           {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id} className="border-b border-gray-800 bg-gray-900/50">
@@ -181,6 +247,7 @@ export function MilestoneTable({ milestones, tasks }: MilestoneTableProps) {
           ))}
         </tbody>
       </table>
-    </div>
+      </div>
+    </>
   )
 }

package/src/components/SidePanel.tsx

@@ -23,7 +23,7 @@ export function SidePanel() {
 
       {/* Panel */}
       <div
-        className={`fixed top-0 right-0 h-full w-full max-w-2xl bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-800 shadow-2xl z-50 overflow-auto transition-transform duration-300 ${
+        className={`fixed top-0 right-0 h-full w-full lg:max-w-2xl bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-800 shadow-2xl z-50 overflow-auto transition-transform duration-300 ${
           isOpen ? 'translate-x-0' : 'translate-x-full'
         }`}
       >

package/src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { Link, useRouterState } from '@tanstack/react-router'
-import { LayoutDashboard, Flag, CheckSquare, Clock, Search, PenTool, Puzzle, FileBarChart } from 'lucide-react'
+import { LayoutDashboard, Flag, CheckSquare, Clock, Search, PenTool, Puzzle, FileBarChart, X } from 'lucide-react'
 import { ProjectSelector } from './ProjectSelector'
 import { GitHubInput } from './GitHubInput'
 import type { AcpProject } from '../services/projects.service'
@@ -19,17 +19,27 @@ interface SidebarProps {
   currentProject?: string | null
   onProjectSelect?: (projectId: string) => void
   onGitHubLoad?: (owner: string, repo: string) => Promise<void>
+  onClose?: () => void
 }
 
-export function Sidebar({ projects = [], currentProject = null, onProjectSelect, onGitHubLoad }: SidebarProps) {
+export function Sidebar({ projects = [], currentProject = null, onProjectSelect, onGitHubLoad, onClose }: SidebarProps) {
   const location = useRouterState({ select: (s) => s.location })
 
   return (
-    <nav className="w-56 border-r border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-950 flex flex-col shrink-0">
-      <div className="p-4 border-b border-gray-200 dark:border-gray-800">
+    <nav className="w-56 h-full border-r border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-950 flex flex-col shrink-0">
+      <div className="p-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between">
         <span className="text-sm font-semibold text-gray-700 dark:text-gray-300 tracking-wide">
           ACP Visualizer
         </span>
+        {onClose && (
+          <button
+            onClick={onClose}
+            className="lg:hidden p-1.5 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors"
+            aria-label="Close menu"
+          >
+            <X className="w-4 h-4 text-gray-700 dark:text-gray-300" />
+          </button>
+        )}
       </div>
       {projects.length > 1 && onProjectSelect && (
         <div className="px-3 pt-3">

package/src/routes/__root.tsx

@@ -1,5 +1,6 @@
 import { HeadContent, Scripts, createRootRoute, Outlet, useRouter, useRouterState } from '@tanstack/react-router'
 import { useState, useCallback, useEffect } from 'react'
+import { Menu, X } from 'lucide-react'
 import { useAutoRefresh } from '../lib/useAutoRefresh'
 import { Sidebar } from '../components/Sidebar'
 import { Header } from '../components/Header'
@@ -109,6 +110,7 @@ function RootLayout() {
     context.progressData?.project.name || null,
   )
   const [initialLoadDone, setInitialLoadDone] = useState(false)
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
   // On mount, check for ?repo= param and auto-load
   useEffect(() => {
@@ -157,21 +159,51 @@ function RootLayout() {
     <>
       <AutoRefresh />
       <div className="flex h-screen bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">
-        <Sidebar
-          projects={context.projects}
-          currentProject={currentProject}
-          onProjectSelect={handleProjectSwitch}
-          onGitHubLoad={handleGitHubLoad}
-        />
+        {/* Mobile Menu Button */}
+        <button
+          onClick={() => setMobileMenuOpen(true)}
+          className="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg"
+          aria-label="Open menu"
+        >
+          <Menu className="w-5 h-5 text-gray-900 dark:text-gray-100" />
+        </button>
+
+        {/* Mobile Backdrop */}
+        {mobileMenuOpen && (
+          <div
+            className="lg:hidden fixed inset-0 bg-black/30 backdrop-blur-sm z-40"
+            onClick={() => setMobileMenuOpen(false)}
+          />
+        )}
+
+        {/* Sidebar - Desktop: Always visible | Mobile: Drawer */}
+        <div
+          className={`fixed lg:relative inset-y-0 left-0 z-50 transition-transform duration-300 lg:translate-x-0 ${
+            mobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
+          }`}
+        >
+          <Sidebar
+            projects={context.projects}
+            currentProject={currentProject}
+            onProjectSelect={handleProjectSwitch}
+            onGitHubLoad={handleGitHubLoad}
+            onClose={() => setMobileMenuOpen(false)}
+          />
+        </div>
+
         <ProgressProvider data={progressData}>
           <SidePanelProvider>
-            <div className="flex-1 flex flex-col overflow-hidden">
-              <Header data={progressData} />
-              <main className="flex-1 overflow-auto bg-gray-50 dark:bg-gray-900">
-                <Outlet />
-              </main>
+            <div className="flex-1 flex overflow-hidden">
+              {/* Main content area */}
+              <div className="flex-1 flex flex-col overflow-hidden">
+                <Header data={progressData} />
+                <main className="flex-1 overflow-auto bg-gray-50 dark:bg-gray-900">
+                  <Outlet />
+                </main>
+              </div>
+              {/* Side panel - renders in flex layout, not overlay */}
+              <SidePanel />
             </div>
-            <SidePanel />
           </SidePanelProvider>
         </ProgressProvider>
       </div>

package/src/routes/milestones.$milestoneId.tsx

@@ -90,7 +90,7 @@ function MilestoneDetailPage() {
   ]
 
   return (
-    <div className="p-6 max-w-4xl">
+    <div className="p-4 lg:p-6 max-w-4xl">
       <Breadcrumb
         items={[
           { label: 'Milestones', href: '/milestones' },
@@ -98,7 +98,7 @@ function MilestoneDetailPage() {
         ]}
       />
 
-      <h1 className="text-xl font-semibold text-gray-100 dark:text-gray-100 mb-3">{formatMilestoneName(milestone)}</h1>
+      <h1 className="text-lg lg:text-xl font-semibold text-gray-100 dark:text-gray-100 mb-3">{formatMilestoneName(milestone)}</h1>
 
       <div className="flex items-center gap-3 mb-4">
         <div className="flex-1 max-w-xs">

package/src/routes/tasks.$taskId.tsx

@@ -119,7 +119,7 @@ function TaskDetailPage() {
   ]
 
   return (
-    <div className="p-6 max-w-4xl">
+    <div className="p-4 lg:p-6 max-w-4xl">
       <Breadcrumb
         items={[
           { label: 'Milestones', href: '/milestones' },
@@ -128,7 +128,7 @@ function TaskDetailPage() {
         ]}
       />
 
-      <h1 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">{formatTaskName(task)}</h1>
+      <h1 className="text-lg lg:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">{formatTaskName(task)}</h1>
 
       <div className="flex items-center gap-2 mb-4">
         <PriorityBadge priority={task.priority} />
@@ -153,12 +153,12 @@ function TaskDetailPage() {
 
       {/* Prev / Next navigation */}
       {(siblings.prev || siblings.next) && (
-        <div className="mt-8 flex items-center justify-between border-t border-gray-200 dark:border-gray-800 pt-4">
+        <div className="mt-8 flex items-center justify-between gap-4 border-t border-gray-200 dark:border-gray-800 pt-4">
           {siblings.prev ? (
             <Link
               to="/tasks/$taskId"
               params={{ taskId: siblings.prev.id }}
-              className="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors"
+              className="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors truncate"
             >
               ← {formatTaskName(siblings.prev)}
             </Link>
@@ -169,7 +169,7 @@ function TaskDetailPage() {
             <Link
               to="/tasks/$taskId"
               params={{ taskId: siblings.next.id }}
-              className="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors"
+              className="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors truncate text-right"
             >
               {formatTaskName(siblings.next)} →
             </Link>