@prmichaelsen/acp-visualizer 0.9.5 → 0.10.0

package/package.json

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

package/src/components/EstimateChart.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react'
 import {
   BarChart,
   Bar,

package/src/components/FilterBar.tsx

@@ -15,12 +15,12 @@ interface FilterBarProps {
 
 export function FilterBar({ status, onStatusChange }: FilterBarProps) {
   return (
-    <div className="flex gap-1 p-1 bg-gray-800/50 rounded-lg">
+    <div className="flex flex-wrap gap-2 p-2 bg-gray-800/50 rounded-lg">
       {statusOptions.map((opt) => (
         <button
           key={opt.value}
           onClick={() => onStatusChange(opt.value)}
-          className={`px-3 py-1 text-xs rounded-md transition-colors ${
+          className={`px-4 py-2 text-sm rounded-md transition-colors whitespace-nowrap min-w-[44px] min-h-[44px] flex items-center justify-center ${
             status === opt.value
               ? 'bg-gray-700 text-gray-100 shadow-sm'
               : 'text-gray-500 hover:text-gray-300'

package/src/components/MilestoneKanban.tsx

@@ -90,10 +90,11 @@ export function MilestoneKanban({ milestones, tasks }: MilestoneKanbanProps) {
       coreStatuses.has(col.status) ||
       milestones.some((m) => m.status === col.status),
   )
-  const gridCols =
-    activeColumns.length <= 3
-      ? 'grid-cols-3'
-      : 'grid-cols-4'
+
+  // Responsive grid: 1 col mobile, 2 cols tablet, 3-4 cols desktop
+  const gridCols = activeColumns.length <= 3
+    ? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
+    : 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
 
   return (
     <div className={`grid ${gridCols} gap-4 min-h-[300px]`}>

package/src/components/ViewToggle.tsx

@@ -15,12 +15,12 @@ const views: Array<{ id: ViewMode; label: string }> = [
 
 export function ViewToggle({ value, onChange }: ViewToggleProps) {
   return (
-    <div className="flex gap-1 bg-gray-900 border border-gray-800 rounded-lg p-0.5">
+    <div className="flex gap-1 bg-gray-900 border border-gray-800 rounded-lg p-0.5 overflow-x-auto scrollbar-hide">
       {views.map((v) => (
         <button
           key={v.id}
           onClick={() => onChange(v.id)}
-          className={`px-3 py-1 text-xs rounded-md transition-colors ${
+          className={`px-4 py-2 text-sm rounded-md transition-colors whitespace-nowrap min-w-[44px] min-h-[44px] flex items-center justify-center ${
             value === v.id
               ? 'bg-gray-700 text-gray-100'
               : 'text-gray-500 hover:text-gray-300'