jettypod 4.4.10 → 4.4.12

package/apps/dashboard/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

package/apps/dashboard/app/globals.css

@@ -0,0 +1,122 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/apps/dashboard/app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

package/apps/dashboard/app/page.tsx

@@ -0,0 +1,25 @@
+import { getKanbanData } from '@/lib/db';
+import { KanbanBoard } from '@/components/KanbanBoard';
+
+export default function Home() {
+  const data = getKanbanData();
+
+  return (
+    <div className="min-h-screen bg-zinc-50 dark:bg-zinc-950">
+      <header className="border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
+        <div className="max-w-6xl mx-auto px-4 py-4">
+          <h1 className="text-xl font-semibold text-zinc-900 dark:text-zinc-100">
+            JettyPod Dashboard
+          </h1>
+        </div>
+      </header>
+      <main className="max-w-6xl mx-auto px-4 py-8">
+        <KanbanBoard
+          inFlight={data.inFlight}
+          backlog={data.backlog}
+          done={data.done}
+        />
+      </main>
+    </div>
+  );
+}

package/apps/dashboard/app/work/[id]/page.tsx

@@ -0,0 +1,193 @@
+import { getWorkItem, getChildWorkItems, getDecisionsForWorkItem } from '@/lib/db';
+import { WorkItemTree } from '@/components/WorkItemTree';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+
+const typeLabels: Record<string, { icon: string; label: string }> = {
+  epic: { icon: '🎯', label: 'Epic' },
+  feature: { icon: '✨', label: 'Feature' },
+  chore: { icon: '🔧', label: 'Chore' },
+  bug: { icon: '🐛', label: 'Bug' },
+};
+
+const statusLabels: Record<string, { label: string; color: string }> = {
+  backlog: { label: 'Backlog', color: 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300' },
+  todo: { label: 'Todo', color: 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300' },
+  in_progress: { label: 'In Progress', color: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300' },
+  done: { label: 'Done', color: 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300' },
+  cancelled: { label: 'Cancelled', color: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300' },
+};
+
+const modeLabels: Record<string, { label: string; color: string }> = {
+  speed: { label: 'Speed Mode', color: 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200' },
+  stable: { label: 'Stable Mode', color: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' },
+  production: { label: 'Production Mode', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200' },
+};
+
+interface PageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function WorkItemPage({ params }: PageProps) {
+  const { id } = await params;
+  const workItemId = parseInt(id, 10);
+
+  if (isNaN(workItemId)) {
+    notFound();
+  }
+
+  const item = getWorkItem(workItemId);
+
+  if (!item) {
+    notFound();
+  }
+
+  const children = getChildWorkItems(workItemId);
+  const decisions = getDecisionsForWorkItem(workItemId);
+  const parentItem = item.parent_id ? getWorkItem(item.parent_id) : null;
+
+  const typeInfo = typeLabels[item.type] || { icon: '📄', label: 'Item' };
+  const statusInfo = statusLabels[item.status] || statusLabels.backlog;
+
+  return (
+    <div className="min-h-screen bg-zinc-50 dark:bg-zinc-950">
+      {/* Header */}
+      <header className="border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
+        <div className="max-w-4xl mx-auto px-4 py-4">
+          <Link href="/" className="text-blue-600 dark:text-blue-400 hover:underline text-sm">
+            ← Back to Dashboard
+          </Link>
+        </div>
+      </header>
+
+      <main className="max-w-4xl mx-auto px-4 py-6">
+        {/* Breadcrumb */}
+        {parentItem && (
+          <div className="mb-4 text-sm text-zinc-500">
+            <Link href={`/work/${parentItem.id}`} className="hover:underline">
+              {typeLabels[parentItem.type]?.icon} #{parentItem.id} {parentItem.title}
+            </Link>
+            <span className="mx-2">→</span>
+          </div>
+        )}
+
+        {/* Main card */}
+        <div className="bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-800 overflow-hidden">
+          {/* Header */}
+          <div className="px-6 py-4 border-b border-zinc-200 dark:border-zinc-800">
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <div className="flex items-center gap-2 text-sm text-zinc-500 mb-1">
+                  <span>{typeInfo.icon} {typeInfo.label}</span>
+                  <span>•</span>
+                  <span className="font-mono">#{item.id}</span>
+                </div>
+                <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
+                  {item.title}
+                </h1>
+              </div>
+              <div className="flex items-center gap-2">
+                {item.mode && modeLabels[item.mode] && (
+                  <span className={`text-sm px-2 py-1 rounded ${modeLabels[item.mode].color}`}>
+                    {modeLabels[item.mode].label}
+                  </span>
+                )}
+                <span className={`text-sm px-2 py-1 rounded ${statusInfo.color}`}>
+                  {statusInfo.label}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Description */}
+          {item.description && (
+            <div className="px-6 py-4 border-b border-zinc-200 dark:border-zinc-800">
+              <h2 className="text-sm font-semibold text-zinc-500 uppercase tracking-wide mb-2">
+                Description
+              </h2>
+              <p className="text-zinc-700 dark:text-zinc-300 whitespace-pre-wrap">
+                {item.description}
+              </p>
+            </div>
+          )}
+
+          {/* Metadata */}
+          <div className="px-6 py-4 border-b border-zinc-200 dark:border-zinc-800">
+            <h2 className="text-sm font-semibold text-zinc-500 uppercase tracking-wide mb-3">
+              Details
+            </h2>
+            <dl className="grid grid-cols-2 gap-4 text-sm">
+              {item.branch_name && (
+                <div>
+                  <dt className="text-zinc-500">Branch</dt>
+                  <dd className="font-mono text-zinc-900 dark:text-zinc-100">{item.branch_name}</dd>
+                </div>
+              )}
+              {item.phase && (
+                <div>
+                  <dt className="text-zinc-500">Phase</dt>
+                  <dd className="text-zinc-900 dark:text-zinc-100">{item.phase}</dd>
+                </div>
+              )}
+              <div>
+                <dt className="text-zinc-500">Created</dt>
+                <dd className="text-zinc-900 dark:text-zinc-100">
+                  {new Date(item.created_at).toLocaleDateString()}
+                </dd>
+              </div>
+              {item.completed_at && (
+                <div>
+                  <dt className="text-zinc-500">Completed</dt>
+                  <dd className="text-zinc-900 dark:text-zinc-100">
+                    {new Date(item.completed_at).toLocaleDateString()}
+                  </dd>
+                </div>
+              )}
+            </dl>
+          </div>
+
+          {/* Decisions */}
+          {decisions.length > 0 && (
+            <div className="px-6 py-4 border-b border-zinc-200 dark:border-zinc-800">
+              <h2 className="text-sm font-semibold text-zinc-500 uppercase tracking-wide mb-3">
+                Decisions
+              </h2>
+              <div className="space-y-4">
+                {decisions.map((decision) => (
+                  <div key={decision.id} className="bg-zinc-50 dark:bg-zinc-800 rounded-lg p-4">
+                    <div className="flex items-center gap-2 mb-2">
+                      <span className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+                        {decision.aspect}
+                      </span>
+                      <span className="text-xs text-zinc-500">
+                        {new Date(decision.created_at).toLocaleDateString()}
+                      </span>
+                    </div>
+                    <p className="text-zinc-700 dark:text-zinc-300 font-medium">
+                      {decision.decision}
+                    </p>
+                    {decision.rationale && (
+                      <p className="text-sm text-zinc-500 mt-1">
+                        {decision.rationale}
+                      </p>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Children */}
+          {children.length > 0 && (
+            <div className="px-6 py-4">
+              <h2 className="text-sm font-semibold text-zinc-500 uppercase tracking-wide mb-3">
+                {item.type === 'epic' ? 'Features & Chores' : 'Child Items'} ({children.length})
+              </h2>
+              <WorkItemTree items={children.map(c => ({ ...c, children: [] }))} />
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}

package/apps/dashboard/components/KanbanBoard.tsx

@@ -0,0 +1,201 @@
+import Link from 'next/link';
+import type { WorkItem, InFlightItem, KanbanGroup } from '@/lib/db';
+
+const typeIcons: Record<string, string> = {
+  epic: '🎯',
+  feature: '✨',
+  chore: '🔧',
+  bug: '🐛',
+};
+
+const modeLabels: Record<string, { label: string; color: string }> = {
+  speed: { label: 'speed', color: 'bg-amber-100 text-amber-800 dark:bg-amber-900/50 dark:text-amber-300' },
+  stable: { label: 'stable', color: 'bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-300' },
+  production: { label: 'prod', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900/50 dark:text-purple-300' },
+};
+
+interface KanbanCardProps {
+  item: WorkItem;
+  epicTitle?: string | null;
+  showEpic?: boolean;
+}
+
+function KanbanCard({ item, epicTitle, showEpic = false }: KanbanCardProps) {
+  return (
+    <Link
+      href={`/work/${item.id}`}
+      className="block bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-3 hover:border-zinc-300 dark:hover:border-zinc-600 hover:shadow-sm transition-all"
+    >
+      <div className="flex items-start gap-2">
+        <span className="text-sm flex-shrink-0">{typeIcons[item.type] || '📄'}</span>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-1 flex-wrap">
+            <span className="text-xs text-zinc-400 font-mono">#{item.id}</span>
+            {item.mode && modeLabels[item.mode] && (
+              <span className={`text-xs px-1.5 py-0.5 rounded ${modeLabels[item.mode].color}`}>
+                {modeLabels[item.mode].label}
+              </span>
+            )}
+          </div>
+          <p className="text-sm text-zinc-900 dark:text-zinc-100 leading-snug">
+            {item.title}
+          </p>
+          {showEpic && epicTitle && (
+            <p className="text-xs text-zinc-500 dark:text-zinc-400 mt-1.5 flex items-center gap-1">
+              <span>🎯</span>
+              <span>{epicTitle}</span>
+            </p>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+interface EpicGroupProps {
+  epicId: number | null;
+  epicTitle: string | null;
+  items: WorkItem[];
+  isInFlight?: boolean;
+}
+
+function EpicGroup({ epicId, epicTitle, items, isInFlight = false }: EpicGroupProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <div className="mb-4">
+      {epicTitle ? (
+        <div className="flex items-center gap-2 mb-2">
+          <Link
+            href={`/work/${epicId}`}
+            className="flex items-center gap-1.5 text-xs font-medium text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300"
+          >
+            <span>🎯</span>
+            <span>{epicTitle}</span>
+          </Link>
+          {isInFlight && (
+            <span className="text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300">
+              in flight
+            </span>
+          )}
+        </div>
+      ) : (
+        <div className="text-xs font-medium text-zinc-400 dark:text-zinc-500 mb-2">
+          Ungrouped
+        </div>
+      )}
+      <div className="space-y-2">
+        {items.map((item) => (
+          <KanbanCard key={item.id} item={item} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface KanbanColumnProps {
+  title: string;
+  children: React.ReactNode;
+  count: number;
+}
+
+function KanbanColumn({ title, children, count }: KanbanColumnProps) {
+  return (
+    <div className="flex-1 min-w-[300px] max-w-[400px]">
+      <div className="bg-zinc-100 dark:bg-zinc-900 rounded-lg p-3 h-full">
+        <div className="flex items-center justify-between mb-3">
+          <h2 className="font-semibold text-zinc-900 dark:text-zinc-100">{title}</h2>
+          <span className="text-xs bg-zinc-200 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 px-2 py-0.5 rounded-full">
+            {count}
+          </span>
+        </div>
+        <div className="overflow-y-auto max-h-[calc(100vh-180px)]">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface KanbanBoardProps {
+  inFlight: InFlightItem[];
+  backlog: Map<string, KanbanGroup>;
+  done: Map<string, KanbanGroup>;
+}
+
+export function KanbanBoard({ inFlight, backlog, done }: KanbanBoardProps) {
+  const backlogCount = inFlight.length + Array.from(backlog.values()).reduce((sum, g) => sum + g.items.length, 0);
+  const doneCount = Array.from(done.values()).reduce((sum, g) => sum + g.items.length, 0);
+
+  // Build a set of epic IDs that have in-flight items
+  const inFlightEpicIds = new Set<number>();
+  for (const item of inFlight) {
+    const epicId = item.parent_id || item.epic_id;
+    if (epicId) {
+      inFlightEpicIds.add(epicId);
+    }
+  }
+
+  return (
+    <div className="flex gap-4 overflow-x-auto pb-4">
+      {/* Backlog Column */}
+      <KanbanColumn title="Backlog" count={backlogCount}>
+        {/* In Flight Section */}
+        {inFlight.length > 0 && (
+          <div className="mb-4">
+            <div className="flex items-center gap-1.5 text-xs font-medium text-blue-600 dark:text-blue-400 mb-2">
+              <span>🔥</span>
+              <span>In Flight</span>
+            </div>
+            <div className="space-y-2">
+              {inFlight.map((item) => (
+                <KanbanCard
+                  key={item.id}
+                  item={item}
+                  epicTitle={item.epicTitle}
+                  showEpic={true}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Divider if both sections have content */}
+        {inFlight.length > 0 && backlog.size > 0 && (
+          <hr className="border-zinc-300 dark:border-zinc-700 my-4" />
+        )}
+
+        {/* Grouped Backlog Items */}
+        {Array.from(backlog.entries()).map(([key, group]) => (
+          <EpicGroup
+            key={key}
+            epicId={group.epicId}
+            epicTitle={group.epicTitle}
+            items={group.items}
+            isInFlight={group.epicId ? inFlightEpicIds.has(group.epicId) : false}
+          />
+        ))}
+
+        {backlogCount === 0 && (
+          <p className="text-sm text-zinc-500 text-center py-4">No items in backlog</p>
+        )}
+      </KanbanColumn>
+
+      {/* Done Column */}
+      <KanbanColumn title="Done" count={doneCount}>
+        {Array.from(done.entries()).map(([key, group]) => (
+          <EpicGroup
+            key={key}
+            epicId={group.epicId}
+            epicTitle={group.epicTitle}
+            items={group.items}
+          />
+        ))}
+
+        {doneCount === 0 && (
+          <p className="text-sm text-zinc-500 text-center py-4">No completed items</p>
+        )}
+      </KanbanColumn>
+    </div>
+  );
+}