@assistkick/create 1.7.0 → 1.8.0

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>
+  );
+}

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

@@ -67,8 +67,8 @@ export function GraphRoute() {
 
   if (graphError) {
     return (
-      <div id="graph-container">
-        <div className="error-msg">Failed to load graph data. Is the server running?</div>
+      <div className="w-full h-[calc(100vh-44px)] overflow-hidden">
+        <div className="flex items-center justify-center h-full text-error text-sm">Failed to load graph data. Is the server running?</div>
       </div>
     );
   }

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

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

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

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

package/templates/assistkick-product-system/packages/frontend/src/stores/useProjectStore.ts

@@ -6,12 +6,15 @@ const STORAGE_KEY = 'selectedProjectId';
 export interface Project {
   id: string;
   name: string;
+  type: string;
   isDefault: number;
   archivedAt: string | null;
   repoUrl: string | null;
   githubInstallationId: string | null;
   githubRepoFullName: string | null;
   baseBranch: string | null;
+  gitAuthMethod: string | null;
+  sshPublicKey: string | null;
   createdAt: string;
   updatedAt: string;
 }
@@ -23,7 +26,7 @@ interface ProjectState {
 
   init: () => Promise<void>;
   selectProject: (id: string) => void;
-  createProject: (name: string) => Promise<Project>;
+  createProject: (name: string, type?: string) => Promise<Project>;
   renameProject: (id: string, name: string) => Promise<void>;
   archiveProject: (id: string) => Promise<void>;
   refetchProjects: () => Promise<Project[]>;
@@ -63,8 +66,8 @@ export const useProjectStore = create<ProjectState>((set, get) => ({
     }
   },
 
-  createProject: async (name) => {
-    const data = await apiClient.createProject(name);
+  createProject: async (name, type) => {
+    const data = await apiClient.createProject(name, type);
     await get().refetchProjects();
     get().selectProject(data.project.id);
     return data.project;