@assistkick/create 1.7.0 → 1.9.0

package/templates/assistkick-product-system/packages/frontend/src/constants/graph.ts

@@ -4,6 +4,7 @@
 
 export const NODE_COLORS: Record<string, string> = {
   feature: '#4dabf7',
+  epic: '#e599f7',
   component: '#69db7c',
   data_entity: '#ffd43b',
   decision: '#ff8787',
@@ -47,6 +48,7 @@ export const EDGE_COLORS: Record<string, string> = {
 
 export const TYPE_LABELS: Record<string, string> = {
   feature: 'FEAT',
+  epic: 'EPIC',
   component: 'COMP',
   data_entity: 'DATA',
   decision: 'DEC',
@@ -62,6 +64,7 @@ export const TYPE_LABELS: Record<string, string> = {
 
 export const LEGEND_LABELS: Record<string, string> = {
   feature: 'Feature',
+  epic: 'Epic',
   component: 'Component',
   data_entity: 'Data Entity',
   decision: 'Decision',
@@ -77,6 +80,7 @@ export const LEGEND_LABELS: Record<string, string> = {
 
 export const NODE_SHAPES: Record<string, string> = {
   feature: 'circle',
+  epic: 'shield',
   component: 'rounded-rect',
   data_entity: 'diamond',
   decision: 'hexagon',
@@ -157,13 +161,18 @@ export const nodeShapePath = (shape: string, r: number): string => {
       }
       return `M${pts.join(' L')} Z`;
     }
+    case 'shield': {
+      const w = r * 0.9;
+      const h = r * 1.2;
+      return `M${-w},${-h * 0.6} L${-w},${h * 0.2} Q${-w},${h * 0.7} 0,${h} Q${w},${h * 0.7} ${w},${h * 0.2} L${w},${-h * 0.6} Q${w * 0.3},${-h} ${-w * 0.3},${-h} Q${-w},${-h * 0.6} ${-w},${-h * 0.6} Z`;
+    }
     default:
       return `M${-r},0 A${r},${r} 0 1,1 ${r},0 A${r},${r} 0 1,1 ${-r},0 Z`;
   }
 };
 
 export const ALL_NODE_TYPES = [
-  'feature', 'component', 'data_entity', 'decision', 'tech_choice',
+  'feature', 'epic', 'component', 'data_entity', 'decision', 'tech_choice',
   'non_functional_requirement', 'design_token', 'design_pattern',
   'user_role', 'flow', 'assumption', 'open_question',
 ];
@@ -177,16 +186,9 @@ export const COLUMNS = [
   { id: 'done', label: 'Done' },
 ];
 
-export const PIPELINE_STATUS_LABELS: Record<string, string> = {
-  creating_worktree: 'Setting up...',
-  debugging: 'Debugging',
-  developing: 'Developing',
-  reviewing: 'Reviewing',
-  fixing_review: 'Fixing review',
-  fixing_merge: 'Fixing merge',
-  merging: 'Merging',
+export const WORKFLOW_STATUS_LABELS: Record<string, string> = {
+  running: 'Running',
   completed: 'Completed',
   failed: 'Failed',
-  blocked: 'Blocked',
-  interrupted: 'Interrupted',
+  idle: 'Idle',
 };

package/templates/assistkick-product-system/packages/frontend/src/hooks/useAutoSave.ts

@@ -0,0 +1,75 @@
+import { useRef, useCallback, useEffect, useState } from 'react';
+import { AutoSaveService } from '../utils/auto_save_service';
+import { apiClient } from '../api/client';
+import { useToast } from './useToast';
+import { getFileName } from '../utils/file_utils';
+
+interface UseAutoSaveOptions {
+  projectId: string | null;
+}
+
+export const useAutoSave = ({ projectId }: UseAutoSaveOptions) => {
+  const { showToast } = useToast();
+  const [dirtyPaths, setDirtyPaths] = useState<Set<string>>(new Set());
+  const serviceRef = useRef<AutoSaveService | null>(null);
+  const projectIdRef = useRef(projectId);
+  projectIdRef.current = projectId;
+
+  // Keep showToast ref stable to avoid recreating service
+  const showToastRef = useRef(showToast);
+  showToastRef.current = showToast;
+
+  const getService = useCallback(() => {
+    if (!serviceRef.current) {
+      serviceRef.current = new AutoSaveService({
+        save: async (path: string, content: string) => {
+          const pid = projectIdRef.current;
+          if (!pid) throw new Error('No project selected');
+          await apiClient.saveFileContent(pid, path, content);
+        },
+        onDirtyChange: (path: string, dirty: boolean) => {
+          setDirtyPaths((prev) => {
+            const next = new Set(prev);
+            if (dirty) {
+              next.add(path);
+            } else {
+              next.delete(path);
+            }
+            return next;
+          });
+        },
+        onSaveError: (path: string, error: string) => {
+          const fileName = getFileName(path);
+          showToastRef.current(`Failed to save ${fileName}: ${error}`, 'error');
+        },
+      });
+    }
+    return serviceRef.current;
+  }, []);
+
+  // Dispose on unmount
+  useEffect(() => {
+    return () => {
+      serviceRef.current?.dispose();
+      serviceRef.current = null;
+    };
+  }, []);
+
+  const handleChange = useCallback((path: string, content: string) => {
+    getService().handleChange(path, content);
+  }, [getService]);
+
+  const saveNow = useCallback((path: string) => {
+    getService().saveNow(path);
+  }, [getService]);
+
+  const saveAndDiscard = useCallback((path: string) => {
+    getService().saveAndDiscard(path);
+  }, [getService]);
+
+  const isDirty = useCallback((path: string): boolean => {
+    return dirtyPaths.has(path);
+  }, [dirtyPaths]);
+
+  return { handleChange, saveNow, saveAndDiscard, isDirty, dirtyPaths };
+};

package/templates/assistkick-product-system/packages/frontend/src/hooks/useToast.tsx

@@ -41,11 +41,24 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
     <ToastContext.Provider value={{ showToast }}>
       {children}
       {createPortal(
-        <div className="toast-container">
+        <div className="fixed bottom-5 right-5 z-[10000] flex flex-col-reverse gap-2 pointer-events-none">
           {toasts.map(toast => (
-            <div key={toast.id} className={`kanban-toast kanban-toast-${toast.type}`}>
+            <div
+              key={toast.id}
+              className={[
+                'relative max-w-[480px] pointer-events-auto bg-surface-alt border border-edge rounded-lg pr-9 pl-4 py-3 shadow-[0_4px_16px_rgba(0,0,0,0.3)] font-mono text-xs text-content animate-[toast-slide-in_0.2s_ease-out]',
+                toast.type === 'error' && 'border-error border-l-4 text-error bg-gradient-to-br from-surface-alt to-[rgba(255,107,107,0.08)]',
+                toast.type === 'success' && 'border-[#4caf50] border-l-4 text-[#4caf50] bg-gradient-to-br from-surface-alt to-[rgba(76,175,80,0.08)]',
+                toast.type === 'info' && 'border-accent border-l-4',
+              ].filter(Boolean).join(' ')}
+            >
               {toast.message}
-              <button className="kanban-toast-close" onClick={() => dismiss(toast.id)}>&times;</button>
+              <button
+                className="absolute top-2 right-2 bg-transparent border-none text-content-secondary text-base cursor-pointer px-1 leading-none hover:text-content"
+                onClick={() => dismiss(toast.id)}
+              >
+                &times;
+              </button>
             </div>
           ))}
         </div>,

package/templates/assistkick-product-system/packages/frontend/src/pages/accept_invitation_page.tsx

@@ -13,6 +13,9 @@ interface AcceptInvitationPageProps {
   onSuccess: () => void;
 }
 
+const inputBase = 'w-full h-9 px-2.5 bg-surface-raised border border-edge rounded text-content font-mono text-[13px] outline-none transition-[border-color] duration-150 focus:border-accent placeholder:text-content-muted';
+const inputError = 'border-error focus:border-error';
+
 export function AcceptInvitationPage({ onSuccess }: AcceptInvitationPageProps) {
   const { theme, toggleTheme } = useTheme();
   const [searchParams] = useSearchParams();
@@ -73,10 +76,10 @@ export function AcceptInvitationPage({ onSuccess }: AcceptInvitationPageProps) {
 
   if (validating) {
     return (
-      <div className="auth-page">
-        <div className="auth-card">
-          <div className="auth-header">
-            <h1 className="auth-title">Validating Invitation...</h1>
+      <div className="flex items-center justify-center min-h-screen bg-surface p-4">
+        <div className="w-full max-w-[380px] bg-surface-alt border border-edge rounded-md px-7 pt-8 pb-6">
+          <div className="mb-6">
+            <h1 className="font-mono text-base font-semibold text-content mb-1">Validating Invitation...</h1>
           </div>
         </div>
       </div>
@@ -85,14 +88,14 @@ export function AcceptInvitationPage({ onSuccess }: AcceptInvitationPageProps) {
 
   if (!token || !email || !valid) {
     return (
-      <div className="auth-page">
-        <div className="auth-card">
-          <div className="auth-header">
-            <h1 className="auth-title">Invalid Invitation</h1>
+      <div className="flex items-center justify-center min-h-screen bg-surface p-4">
+        <div className="w-full max-w-[380px] bg-surface-alt border border-edge rounded-md px-7 pt-8 pb-6">
+          <div className="mb-6">
+            <h1 className="font-mono text-base font-semibold text-content mb-1">Invalid Invitation</h1>
           </div>
-          <div className="auth-success-message">
+          <div className="text-center py-4 text-content font-mono text-[13px] leading-relaxed">
             <p>This invitation link is invalid or has expired.</p>
-            <Link to="/login" className="auth-back-link">Go to login</Link>
+            <Link to="/login" className="inline-block mt-3 text-accent font-mono text-[13px] no-underline hover:underline">Go to login</Link>
           </div>
         </div>
       </div>
@@ -100,21 +103,21 @@ export function AcceptInvitationPage({ onSuccess }: AcceptInvitationPageProps) {
   }
 
   return (
-    <div className="auth-page">
-      <div className="auth-card">
-        <div className="auth-header">
-          <h1 className="auth-title">Accept Invitation</h1>
-          <p className="auth-subtitle">Set your password for {email}</p>
+    <div className="flex items-center justify-center min-h-screen bg-surface p-4">
+      <div className="w-full max-w-[380px] bg-surface-alt border border-edge rounded-md px-7 pt-8 pb-6">
+        <div className="mb-6">
+          <h1 className="font-mono text-base font-semibold text-content mb-1">Accept Invitation</h1>
+          <p className="font-mono text-xs text-content-muted">Set your password for {email}</p>
         </div>
 
-        <form className="auth-form" onSubmit={handleSubmit} noValidate>
-          {error && <div className="auth-error-banner">{error}</div>}
+        <form className="flex flex-col gap-4" onSubmit={handleSubmit} noValidate>
+          {error && <div className="font-mono text-xs text-error bg-[rgba(255,107,107,0.08)] border border-[rgba(255,107,107,0.2)] rounded px-3 py-2">{error}</div>}
 
-          <div className="auth-field">
-            <label className="auth-label" htmlFor="invite-password">Password</label>
+          <div className="flex flex-col gap-1">
+            <label className="font-mono text-[11px] font-semibold text-content-secondary uppercase tracking-wider" htmlFor="invite-password">Password</label>
             <input
               id="invite-password"
-              className={`auth-input${fieldError ? ' auth-input-error' : ''}`}
+              className={`${inputBase}${fieldError ? ` ${inputError}` : ''}`}
               type="password"
               value={password}
               onChange={e => setPassword(e.target.value)}
@@ -125,11 +128,11 @@ export function AcceptInvitationPage({ onSuccess }: AcceptInvitationPageProps) {
             />
           </div>
 
-          <div className="auth-field">
-            <label className="auth-label" htmlFor="invite-confirm-password">Confirm Password</label>
+          <div className="flex flex-col gap-1">
+            <label className="font-mono text-[11px] font-semibold text-content-secondary uppercase tracking-wider" htmlFor="invite-confirm-password">Confirm Password</label>
             <input
               id="invite-confirm-password"
-              className={`auth-input${fieldError ? ' auth-input-error' : ''}`}
+              className={`${inputBase}${fieldError ? ` ${inputError}` : ''}`}
               type="password"
               value={confirmPassword}
               onChange={e => setConfirmPassword(e.target.value)}
@@ -137,11 +140,11 @@ export function AcceptInvitationPage({ onSuccess }: AcceptInvitationPageProps) {
               autoComplete="new-password"
               disabled={submitting}
             />
-            {fieldError && <span className="auth-field-error">{fieldError}</span>}
+            {fieldError && <span className="font-mono text-[11px] text-error">{fieldError}</span>}
           </div>
 
           <button
-            className="auth-submit"
+            className="w-full h-9 mt-1 bg-transparent border border-accent rounded text-accent font-mono text-[13px] cursor-pointer transition-[background,color] duration-150 hover:enabled:bg-accent hover:enabled:text-white disabled:opacity-60 disabled:cursor-not-allowed"
             type="submit"
             disabled={submitting}
           >
@@ -149,12 +152,12 @@ export function AcceptInvitationPage({ onSuccess }: AcceptInvitationPageProps) {
           </button>
         </form>
 
-        <p className="auth-login-link">
+        <p className="font-mono text-xs text-content-secondary mt-4 text-center">
           <Link to="/login">Already have an account? Sign in</Link>
         </p>
 
         <button
-          className="auth-theme-toggle"
+          className="block mx-auto mt-4 px-2.5 py-1 bg-transparent border border-edge rounded text-content-muted font-mono text-[11px] cursor-pointer transition-[border-color,color] duration-150 hover:border-content-secondary hover:text-content-secondary"
           onClick={toggleTheme}
           type="button"
           title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}

package/templates/assistkick-product-system/packages/frontend/src/pages/forgot_password_page.tsx

@@ -9,6 +9,9 @@ import { useTheme } from '../hooks/useTheme';
 import { apiClient } from '../api/client';
 import { validateEmail } from '../utils/auth_validation';
 
+const inputBase = 'w-full h-9 px-2.5 bg-surface-raised border border-edge rounded text-content font-mono text-[13px] outline-none transition-[border-color] duration-150 focus:border-accent placeholder:text-content-muted';
+const inputError = 'border-error focus:border-error';
+
 export function ForgotPasswordPage() {
   const { theme, toggleTheme } = useTheme();
   const [email, setEmail] = useState('');
@@ -38,29 +41,29 @@ export function ForgotPasswordPage() {
   }, [email]);
 
   return (
-    <div className="auth-page">
-      <div className="auth-card">
-        <div className="auth-header">
-          <h1 className="auth-title">Reset Password</h1>
-          <p className="auth-subtitle">Enter your email to receive a reset link</p>
+    <div className="flex items-center justify-center min-h-screen bg-surface p-4">
+      <div className="w-full max-w-[380px] bg-surface-alt border border-edge rounded-md px-7 pt-8 pb-6">
+        <div className="mb-6">
+          <h1 className="font-mono text-base font-semibold text-content mb-1">Reset Password</h1>
+          <p className="font-mono text-xs text-content-muted">Enter your email to receive a reset link</p>
         </div>
 
         {sent ? (
-          <div className="auth-success-message">
+          <div className="text-center py-4 text-content font-mono text-[13px] leading-relaxed">
             <p>If an account with that email exists, a reset link has been sent.</p>
             <p>Check your inbox and follow the link to reset your password.</p>
-            <Link to="/login" className="auth-back-link">Back to login</Link>
+            <Link to="/login" className="inline-block mt-3 text-accent font-mono text-[13px] no-underline hover:underline">Back to login</Link>
           </div>
         ) : (
           <>
-            <form className="auth-form" onSubmit={handleSubmit} noValidate>
-              {error && <div className="auth-error-banner">{error}</div>}
+            <form className="flex flex-col gap-4" onSubmit={handleSubmit} noValidate>
+              {error && <div className="font-mono text-xs text-error bg-[rgba(255,107,107,0.08)] border border-[rgba(255,107,107,0.2)] rounded px-3 py-2">{error}</div>}
 
-              <div className="auth-field">
-                <label className="auth-label" htmlFor="forgot-email">Email</label>
+              <div className="flex flex-col gap-1">
+                <label className="font-mono text-[11px] font-semibold text-content-secondary uppercase tracking-wider" htmlFor="forgot-email">Email</label>
                 <input
                   id="forgot-email"
-                  className={`auth-input${error ? ' auth-input-error' : ''}`}
+                  className={`${inputBase}${error ? ` ${inputError}` : ''}`}
                   type="email"
                   value={email}
                   onChange={e => setEmail(e.target.value)}
@@ -72,7 +75,7 @@ export function ForgotPasswordPage() {
               </div>
 
               <button
-                className="auth-submit"
+                className="w-full h-9 mt-1 bg-transparent border border-accent rounded text-accent font-mono text-[13px] cursor-pointer transition-[background,color] duration-150 hover:enabled:bg-accent hover:enabled:text-white disabled:opacity-60 disabled:cursor-not-allowed"
                 type="submit"
                 disabled={submitting}
               >
@@ -80,14 +83,14 @@ export function ForgotPasswordPage() {
               </button>
             </form>
 
-            <p className="auth-login-link">
+            <p className="font-mono text-xs text-content-secondary mt-4 text-center">
               Remember your password? <Link to="/login">Sign in</Link>
             </p>
           </>
         )}
 
         <button
-          className="auth-theme-toggle"
+          className="block mx-auto mt-4 px-2.5 py-1 bg-transparent border border-edge rounded text-content-muted font-mono text-[11px] cursor-pointer transition-[border-color,color] duration-150 hover:border-content-secondary hover:text-content-secondary"
           onClick={toggleTheme}
           type="button"
           title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}

package/templates/assistkick-product-system/packages/frontend/src/pages/register_page.tsx

@@ -21,6 +21,9 @@ interface FormErrors {
   general?: string;
 }
 
+const inputBase = 'w-full h-9 px-2.5 bg-surface-raised border border-edge rounded text-content font-mono text-[13px] outline-none transition-[border-color] duration-150 focus:border-accent placeholder:text-content-muted';
+const inputError = 'border-error focus:border-error';
+
 export function RegisterPage({ onSuccess }: RegisterPageProps) {
   const { theme, toggleTheme } = useTheme();
   const [email, setEmail] = useState('');
@@ -67,23 +70,23 @@ export function RegisterPage({ onSuccess }: RegisterPageProps) {
   }, [errors.password]);
 
   return (
-    <div className="auth-page">
-      <div className="auth-card">
-        <div className="auth-header">
-          <h1 className="auth-title">Create Admin Account</h1>
-          <p className="auth-subtitle">Set up the first user for this system</p>
+    <div className="flex items-center justify-center min-h-screen bg-surface p-4">
+      <div className="w-full max-w-[380px] bg-surface-alt border border-edge rounded-md px-7 pt-8 pb-6">
+        <div className="mb-6">
+          <h1 className="font-mono text-base font-semibold text-content mb-1">Create Admin Account</h1>
+          <p className="font-mono text-xs text-content-muted">Set up the first user for this system</p>
         </div>
 
-        <form className="auth-form" onSubmit={handleSubmit} noValidate>
+        <form className="flex flex-col gap-4" onSubmit={handleSubmit} noValidate>
           {errors.general && (
-            <div className="auth-error-banner">{errors.general}</div>
+            <div className="font-mono text-xs text-error bg-[rgba(255,107,107,0.08)] border border-[rgba(255,107,107,0.2)] rounded px-3 py-2">{errors.general}</div>
           )}
 
-          <div className="auth-field">
-            <label className="auth-label" htmlFor="register-email">Email</label>
+          <div className="flex flex-col gap-1">
+            <label className="font-mono text-[11px] font-semibold text-content-secondary uppercase tracking-wider" htmlFor="register-email">Email</label>
             <input
               id="register-email"
-              className={`auth-input${errors.email ? ' auth-input-error' : ''}`}
+              className={`${inputBase}${errors.email ? ` ${inputError}` : ''}`}
               type="email"
               value={email}
               onChange={handleEmailChange}
@@ -92,14 +95,14 @@ export function RegisterPage({ onSuccess }: RegisterPageProps) {
               autoFocus
               disabled={submitting}
             />
-            {errors.email && <span className="auth-field-error">{errors.email}</span>}
+            {errors.email && <span className="font-mono text-[11px] text-error">{errors.email}</span>}
           </div>
 
-          <div className="auth-field">
-            <label className="auth-label" htmlFor="register-password">Password</label>
+          <div className="flex flex-col gap-1">
+            <label className="font-mono text-[11px] font-semibold text-content-secondary uppercase tracking-wider" htmlFor="register-password">Password</label>
             <input
               id="register-password"
-              className={`auth-input${errors.password ? ' auth-input-error' : ''}`}
+              className={`${inputBase}${errors.password ? ` ${inputError}` : ''}`}
               type="password"
               value={password}
               onChange={handlePasswordChange}
@@ -107,11 +110,11 @@ export function RegisterPage({ onSuccess }: RegisterPageProps) {
               autoComplete="new-password"
               disabled={submitting}
             />
-            {errors.password && <span className="auth-field-error">{errors.password}</span>}
+            {errors.password && <span className="font-mono text-[11px] text-error">{errors.password}</span>}
           </div>
 
           <button
-            className="auth-submit"
+            className="w-full h-9 mt-1 bg-transparent border border-accent rounded text-accent font-mono text-[13px] cursor-pointer transition-[background,color] duration-150 hover:enabled:bg-accent hover:enabled:text-white disabled:opacity-60 disabled:cursor-not-allowed"
             type="submit"
             disabled={submitting}
           >
@@ -119,12 +122,12 @@ export function RegisterPage({ onSuccess }: RegisterPageProps) {
           </button>
         </form>
 
-        <p className="auth-login-link">
+        <p className="font-mono text-xs text-content-secondary mt-4 text-center">
           Already have an account? <Link to="/login">Sign in</Link>
         </p>
 
         <button
-          className="auth-theme-toggle"
+          className="block mx-auto mt-4 px-2.5 py-1 bg-transparent border border-edge rounded text-content-muted font-mono text-[11px] cursor-pointer transition-[border-color,color] duration-150 hover:border-content-secondary hover:text-content-secondary"
           onClick={toggleTheme}
           type="button"
           title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}

package/templates/assistkick-product-system/packages/frontend/src/pages/reset_password_page.tsx

@@ -9,6 +9,9 @@ import { useTheme } from '../hooks/useTheme';
 import { apiClient } from '../api/client';
 import { validatePassword } from '../utils/auth_validation';
 
+const inputBase = 'w-full h-9 px-2.5 bg-surface-raised border border-edge rounded text-content font-mono text-[13px] outline-none transition-[border-color] duration-150 focus:border-accent placeholder:text-content-muted';
+const inputError = 'border-error focus:border-error';
+
 export function ResetPasswordPage() {
   const { theme, toggleTheme } = useTheme();
   const [searchParams] = useSearchParams();
@@ -55,14 +58,14 @@ export function ResetPasswordPage() {
 
   if (!token) {
     return (
-      <div className="auth-page">
-        <div className="auth-card">
-          <div className="auth-header">
-            <h1 className="auth-title">Invalid Link</h1>
+      <div className="flex items-center justify-center min-h-screen bg-surface p-4">
+        <div className="w-full max-w-[380px] bg-surface-alt border border-edge rounded-md px-7 pt-8 pb-6">
+          <div className="mb-6">
+            <h1 className="font-mono text-base font-semibold text-content mb-1">Invalid Link</h1>
           </div>
-          <div className="auth-success-message">
+          <div className="text-center py-4 text-content font-mono text-[13px] leading-relaxed">
             <p>This reset link is invalid or missing a token.</p>
-            <Link to="/forgot-password" className="auth-back-link">Request a new reset link</Link>
+            <Link to="/forgot-password" className="inline-block mt-3 text-accent font-mono text-[13px] no-underline hover:underline">Request a new reset link</Link>
           </div>
         </div>
       </div>
@@ -70,28 +73,28 @@ export function ResetPasswordPage() {
   }
 
   return (
-    <div className="auth-page">
-      <div className="auth-card">
-        <div className="auth-header">
-          <h1 className="auth-title">Set New Password</h1>
-          <p className="auth-subtitle">Enter your new password below</p>
+    <div className="flex items-center justify-center min-h-screen bg-surface p-4">
+      <div className="w-full max-w-[380px] bg-surface-alt border border-edge rounded-md px-7 pt-8 pb-6">
+        <div className="mb-6">
+          <h1 className="font-mono text-base font-semibold text-content mb-1">Set New Password</h1>
+          <p className="font-mono text-xs text-content-muted">Enter your new password below</p>
         </div>
 
         {success ? (
-          <div className="auth-success-message">
+          <div className="text-center py-4 text-content font-mono text-[13px] leading-relaxed">
             <p>Your password has been reset successfully.</p>
-            <Link to="/login" className="auth-back-link">Sign in with your new password</Link>
+            <Link to="/login" className="inline-block mt-3 text-accent font-mono text-[13px] no-underline hover:underline">Sign in with your new password</Link>
           </div>
         ) : (
           <>
-            <form className="auth-form" onSubmit={handleSubmit} noValidate>
-              {error && <div className="auth-error-banner">{error}</div>}
+            <form className="flex flex-col gap-4" onSubmit={handleSubmit} noValidate>
+              {error && <div className="font-mono text-xs text-error bg-[rgba(255,107,107,0.08)] border border-[rgba(255,107,107,0.2)] rounded px-3 py-2">{error}</div>}
 
-              <div className="auth-field">
-                <label className="auth-label" htmlFor="reset-password">New Password</label>
+              <div className="flex flex-col gap-1">
+                <label className="font-mono text-[11px] font-semibold text-content-secondary uppercase tracking-wider" htmlFor="reset-password">New Password</label>
                 <input
                   id="reset-password"
-                  className={`auth-input${fieldError ? ' auth-input-error' : ''}`}
+                  className={`${inputBase}${fieldError ? ` ${inputError}` : ''}`}
                   type="password"
                   value={password}
                   onChange={e => setPassword(e.target.value)}
@@ -102,11 +105,11 @@ export function ResetPasswordPage() {
                 />
               </div>
 
-              <div className="auth-field">
-                <label className="auth-label" htmlFor="reset-confirm-password">Confirm Password</label>
+              <div className="flex flex-col gap-1">
+                <label className="font-mono text-[11px] font-semibold text-content-secondary uppercase tracking-wider" htmlFor="reset-confirm-password">Confirm Password</label>
                 <input
                   id="reset-confirm-password"
-                  className={`auth-input${fieldError ? ' auth-input-error' : ''}`}
+                  className={`${inputBase}${fieldError ? ` ${inputError}` : ''}`}
                   type="password"
                   value={confirmPassword}
                   onChange={e => setConfirmPassword(e.target.value)}
@@ -114,11 +117,11 @@ export function ResetPasswordPage() {
                   autoComplete="new-password"
                   disabled={submitting}
                 />
-                {fieldError && <span className="auth-field-error">{fieldError}</span>}
+                {fieldError && <span className="font-mono text-[11px] text-error">{fieldError}</span>}
               </div>
 
               <button
-                className="auth-submit"
+                className="w-full h-9 mt-1 bg-transparent border border-accent rounded text-accent font-mono text-[13px] cursor-pointer transition-[background,color] duration-150 hover:enabled:bg-accent hover:enabled:text-white disabled:opacity-60 disabled:cursor-not-allowed"
                 type="submit"
                 disabled={submitting}
               >
@@ -126,14 +129,14 @@ export function ResetPasswordPage() {
               </button>
             </form>
 
-            <p className="auth-login-link">
+            <p className="font-mono text-xs text-content-secondary mt-4 text-center">
               <Link to="/login">Back to login</Link>
             </p>
           </>
         )}
 
         <button
-          className="auth-theme-toggle"
+          className="block mx-auto mt-4 px-2.5 py-1 bg-transparent border border-edge rounded text-content-muted font-mono text-[11px] cursor-pointer transition-[border-color,color] duration-150 hover:border-content-secondary hover:text-content-secondary"
           onClick={toggleTheme}
           type="button"
           title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}

package/templates/assistkick-product-system/packages/frontend/src/routes/AgentsRoute.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { AgentsView } from '../components/AgentsView';
+
+export function AgentsRoute() {
+  return <AgentsView />;
+}

package/templates/assistkick-product-system/packages/frontend/src/routes/CoherenceRoute.tsx

@@ -12,7 +12,7 @@ export function CoherenceRoute() {
   if (!graphData) return null;
 
   return (
-    <div id="coherence-container" style={{ display: 'block' }}>
+    <div className="w-full h-[calc(100vh-44px)] overflow-y-auto p-6">
       <CoherenceView graphData={graphData} onNodeClick={openSidePanel} projectId={selectedProjectId} />
     </div>
   );

package/templates/assistkick-product-system/packages/frontend/src/routes/DashboardLayout.tsx

@@ -37,10 +37,10 @@ export function DashboardLayout() {
 
   return (
     <ToastProvider>
-      <div className="app-container">
+      <div className="flex flex-col h-full overflow-hidden">
         <Toolbar />
 
-        <div className="main-content">
+        <div className="flex-1 overflow-hidden relative">
           <Outlet />
 
           <SidePanel />

package/templates/assistkick-product-system/packages/frontend/src/routes/FilesRoute.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { FilesView } from '../components/FilesView';
+import { useProjectStore } from '../stores/useProjectStore';
+
+export function FilesRoute() {
+  const selectedProjectId = useProjectStore((s) => s.selectedProjectId);
+
+  return (
+    <div className="flex w-full h-full overflow-hidden">
+      <FilesView projectId={selectedProjectId} />
+    </div>
+  );
+}