jettypod 4.4.118 → 4.4.121

package/apps/dashboard/components/WorkItemTree.tsx

@@ -1,30 +1,9 @@
-'use client';
-
 import { useState } from 'react';
-import Link from 'next/link';
+import { Link } from 'react-router-dom';
 import type { WorkItem } from '@/lib/db';
 import { CopyableId } from './CopyableId';
-
-const typeIcons: Record<string, string> = {
-  epic: '🎯',
-  feature: '✨',
-  chore: '🔧',
-  bug: '🐛',
-};
-
-const statusColors: Record<string, string> = {
-  backlog: 'text-zinc-500',
-  todo: 'text-zinc-500',
-  in_progress: 'text-blue-600 dark:text-blue-400',
-  done: 'text-green-600 dark:text-green-400',
-  cancelled: 'text-red-500',
-};
-
-const modeLabels: Record<string, { label: string; color: string }> = {
-  speed: { label: 'speed', color: 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200' },
-  stable: { label: 'stable', color: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' },
-  production: { label: 'prod', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200' },
-};
+import { STATUS_COLORS, MODE_LABELS } from '@/lib/constants';
+import { TypeIcon } from './TypeIcon';
 
 interface WorkItemNodeProps {
   item: WorkItem;
@@ -38,7 +17,7 @@ function WorkItemNode({ item, depth = 0 }: WorkItemNodeProps) {
   return (
     <div className="select-none">
       <div
-        className={`flex items-center gap-2 py-1.5 px-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors group`}
+        className={`flex items-center gap-3 py-2 px-3 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors duration-200 ease-out group`}
         style={{ paddingLeft: `${depth * 20 + 8}px` }}
       >
         {/* Expand/collapse toggle */}
@@ -54,23 +33,23 @@ function WorkItemNode({ item, depth = 0 }: WorkItemNodeProps) {
         )}
 
         {/* Type icon */}
-        <span className="text-sm">{typeIcons[item.type] || '📄'}</span>
+        <span className="text-base"><TypeIcon type={item.type} /></span>
 
         {/* ID with click-to-copy */}
         <CopyableId id={item.id} title={item.title} type={item.type} />
 
         {/* Title */}
         <Link
-          href={`/work/${item.id}`}
-          className={`flex-1 truncate hover:underline ${statusColors[item.status]}`}
+          to={`/work/${item.id}`}
+          className={`flex-1 truncate hover:underline ${STATUS_COLORS[item.status]}`}
         >
           {item.title}
         </Link>
 
         {/* Mode badge */}
-        {item.mode && modeLabels[item.mode] && (
-          <span className={`text-xs px-1.5 py-0.5 rounded ${modeLabels[item.mode].color}`}>
-            {modeLabels[item.mode].label}
+        {item.mode && MODE_LABELS[item.mode] && (
+          <span className={`text-xs px-2 py-1 rounded ${MODE_LABELS[item.mode].color}`}>
+            {MODE_LABELS[item.mode].label}
           </span>
         )}
 
@@ -108,7 +87,7 @@ export function WorkItemTree({ items }: WorkItemTreeProps) {
   }
 
   return (
-    <div className="font-mono text-sm">
+    <div className="font-mono text-base">
       {items.map((item) => (
         <WorkItemNode key={item.id} item={item} />
       ))}

package/apps/dashboard/components/settings/AccountSection.tsx

@@ -1,18 +1,20 @@
-'use client';
-
 import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
+import { useNavigate } from 'react-router-dom';
 import { useUsage } from '@/contexts/UsageContext';
 import { SubscribeContent } from '@/components/SubscribeContent';
+import { Button } from '@/components/ui/Button';
+import { isTauri, auth, shell } from '@/lib/tauri-bridge';
+
+const API_BASE = 'https://jettypod-update-server.spangbaryn2.workers.dev';
 
 const planColors: Record<string, string> = {
   free: 'bg-zinc-200 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-300',
-  monthly: 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300',
+  monthly: 'bg-[#e8f0f0] dark:bg-[#819D9F]/20 text-[#5a7d7f] dark:text-[#a3bfc0]',
   lifetime: 'bg-purple-100 dark:bg-purple-900/40 text-purple-700 dark:text-purple-300',
 };
 
 export function AccountSection() {
-  const router = useRouter();
+  const navigate = useNavigate();
   const { plan, used, limit, loading, refresh } = useUsage();
   const [email, setEmail] = useState<string | null>(null);
   const [portalError, setPortalError] = useState<string | null>(null);
@@ -21,9 +23,9 @@ export function AccountSection() {
 
   useEffect(() => {
     async function loadAuth() {
-      if (!window.electronAPI?.isElectron) return;
+      if (!isTauri()) return;
       try {
-        const status = await window.electronAPI.auth.getStatus();
+        const status = await auth.getStatus();
         if (status.authenticated && status.user) {
           setEmail(status.user.email);
         }
@@ -38,13 +40,27 @@ export function AccountSection() {
   const isAtCapacity = isFree && limit > 0 && used >= limit;
 
   const handleManageSubscription = async () => {
-    if (!window.electronAPI?.billing?.openCustomerPortal) return;
     setPortalError(null);
     setPortalLoading(true);
     try {
-      const result = await window.electronAPI.billing.openCustomerPortal();
-      if (result && !result.success) {
-        setPortalError(result.error || 'Unable to open billing portal');
+      const token = await auth.getToken();
+      if (!token) {
+        setPortalError('Not authenticated');
+        return;
+      }
+      const res = await fetch(`${API_BASE}/billing/customer-portal`, {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${token}` },
+      });
+      if (res.ok) {
+        const data = await res.json() as { url?: string };
+        if (data.url) {
+          await shell.openUrl(data.url);
+        } else {
+          setPortalError('Unable to open billing portal');
+        }
+      } else {
+        setPortalError('Unable to open billing portal');
       }
     } catch {
       setPortalError('Unable to open billing portal');
@@ -54,9 +70,8 @@ export function AccountSection() {
   };
 
   const handleLogout = async () => {
-    if (!window.electronAPI?.auth?.logout) return;
-    await window.electronAPI.auth.logout();
-    router.push('/login');
+    await auth.logout();
+    navigate('/login');
   };
 
   const handleUpgradeClose = () => {
@@ -67,15 +82,17 @@ export function AccountSection() {
   if (showUpgrade) {
     return (
       <section id="account" className="relative min-h-[500px]">
-        <button
+        <Button
           onClick={handleUpgradeClose}
-          className="absolute top-0 right-0 p-1.5 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors z-10"
+          variant="ghost"
+          size="icon"
+          className="absolute top-0 right-0 z-10"
           aria-label="Close upgrade"
         >
           <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
           </svg>
-        </button>
+        </Button>
         <div className="flex flex-col items-center justify-center min-h-[500px] py-8">
           <SubscribeContent onClose={handleUpgradeClose} />
         </div>
@@ -85,25 +102,25 @@ export function AccountSection() {
 
   return (
     <section id="account">
-      <div className="flex items-center justify-between mb-4">
+      <div className="flex items-center justify-between mb-6">
         <h2 className="text-lg font-medium text-zinc-900 dark:text-zinc-100">
           Account
         </h2>
       </div>
 
       {/* Email & Plan */}
-      <div className="p-4 bg-zinc-50 dark:bg-zinc-800/50 rounded-lg space-y-4">
+      <div className="p-6 bg-zinc-50 dark:bg-zinc-800/50 rounded-xl space-y-4">
         <div className="flex items-center justify-between">
           <div>
-            <label className="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
+            <label className="block text-base font-medium text-zinc-900 dark:text-zinc-100">
               Email
             </label>
-            <p className="text-sm text-zinc-600 dark:text-zinc-400 mt-0.5">
+            <p className="text-base text-zinc-600 dark:text-zinc-400 mt-1">
               {loading ? '...' : email || 'Not signed in'}
             </p>
           </div>
-          <div className="flex items-center gap-2">
-            <span className={`px-2 py-0.5 text-xs font-medium rounded-full ${planColors[plan] || planColors.free}`}>
+          <div className="flex items-center gap-3">
+            <span className={`px-2 py-1 text-xs font-medium rounded-full ${planColors[plan] || planColors.free}`}>
               {plan}
             </span>
           </div>
@@ -112,13 +129,13 @@ export function AccountSection() {
         {/* Usage Bar (free users only) */}
         {isFree && (
           <div>
-            <div className="flex items-center justify-between text-xs text-zinc-500 dark:text-zinc-400 mb-1">
+            <div className="flex items-center justify-between text-base text-zinc-500 dark:text-zinc-400 mb-1.5">
               <span>Weekly usage</span>
               <span>{used} / {limit} work items</span>
             </div>
             <div className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-full overflow-hidden">
               <div
-                className={`h-full rounded-full transition-all ${isAtCapacity ? 'bg-red-500' : 'bg-blue-500'}`}
+                className={`h-full rounded-full transition-[width,background-color] duration-200 ease-out ${isAtCapacity ? 'bg-red-500' : 'bg-[#819D9F]'}`}
                 style={{ width: `${limit > 0 ? Math.min((used / limit) * 100, 100) : 0}%` }}
               />
             </div>
@@ -129,33 +146,36 @@ export function AccountSection() {
         <div className="pt-2 border-t border-zinc-200 dark:border-zinc-700 flex items-center justify-between">
           <div>
             {isFree ? (
-              <button
+              <Button
                 onClick={() => setShowUpgrade(true)}
-                className="px-3 py-1.5 text-sm font-medium bg-blue-600 hover:bg-blue-500 text-white rounded transition-colors"
+                variant="accent"
+                size="sm"
               >
                 Upgrade
-              </button>
+              </Button>
             ) : (
               <>
-                <button
+                <Button
                   onClick={handleManageSubscription}
                   disabled={portalLoading}
-                  className="px-3 py-1.5 text-sm font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 border border-zinc-300 dark:border-zinc-600 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  variant="secondary"
+                  size="sm"
                 >
                   {portalLoading ? 'Opening...' : 'Manage Subscription'}
-                </button>
+                </Button>
                 {portalError && (
-                  <p className="text-xs text-red-500 mt-1">{portalError}</p>
+                  <p className="text-base text-red-500 mt-1">{portalError}</p>
                 )}
               </>
             )}
           </div>
-          <button
+          <Button
             onClick={handleLogout}
-            className="px-3 py-1.5 text-sm font-medium text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors"
+            variant="destructive"
+            size="sm"
           >
             Log Out
-          </button>
+          </Button>
         </div>
       </div>
     </section>

package/apps/dashboard/components/settings/AiContextSection.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import { invoke } from '@/lib/tauri';
+import { openDialog } from '@/lib/tauri';
+import { Button } from '@/components/ui/Button';
+import { ContextDocumentsSection } from './ContextDocumentsSection';
+import type { ContextDocument } from '@/lib/data-bridge';
+
+interface AiContextSectionProps {
+  initialDesignSystemDir: string | null;
+  initialContextDocuments: ContextDocument[];
+}
+
+export function AiContextSection({ initialDesignSystemDir, initialContextDocuments }: AiContextSectionProps) {
+  const [designSystemDir, setDesignSystemDir] = useState<string | null>(initialDesignSystemDir);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+  const showSuccess = (message: string) => {
+    setSuccessMessage(message);
+    setTimeout(() => setSuccessMessage(null), 3000);
+  };
+
+  const handleBrowse = async () => {
+    const selected = await openDialog({ directory: true, title: 'Select Design System Directory' });
+    if (selected && typeof selected === 'string') {
+      await invoke('db_set_design_system_dir', { dir: selected });
+      setDesignSystemDir(selected);
+      showSuccess('Design system directory set');
+    }
+  };
+
+  const handleClear = async () => {
+    await invoke('db_reset_design_system_dir');
+    setDesignSystemDir(null);
+    showSuccess('Design system directory cleared');
+  };
+
+  return (
+    <section id="ai-context">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-lg font-medium text-zinc-900 dark:text-zinc-100">
+          AI Context
+        </h2>
+      </div>
+
+      {successMessage && (
+        <div className="mb-4 px-6 py-3 bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 rounded-lg text-base">
+          {successMessage}
+        </div>
+      )}
+
+      {/* Design System Directory Setting */}
+      <div className="p-6 bg-zinc-50 dark:bg-zinc-800/50 rounded-lg">
+        <div>
+          <label className="block text-base font-medium text-zinc-900 dark:text-zinc-100">
+            Design System Directory
+          </label>
+          <p className="text-base text-zinc-500 dark:text-zinc-400 mt-1">
+            Select a folder that includes your design system. Claude will use this when prototyping and building parts of your project.
+          </p>
+        </div>
+
+        <div className="mt-4">
+          {designSystemDir ? (
+            <div className="flex items-center gap-3">
+              <span className="font-mono text-sm text-zinc-900 dark:text-zinc-100 bg-zinc-200 dark:bg-zinc-700 px-3 py-2 rounded flex-1 truncate">
+                {designSystemDir}
+              </span>
+              <Button onClick={handleBrowse} variant="ghost" size="sm">
+                Change
+              </Button>
+              <Button onClick={handleClear} variant="ghost" size="sm">
+                Clear
+              </Button>
+            </div>
+          ) : (
+            <div className="flex items-center gap-3">
+              <Button onClick={handleBrowse} size="sm">
+                Browse...
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Context Documents */}
+      <ContextDocumentsSection initialDocuments={initialContextDocuments} />
+    </section>
+  );
+}