@assistkick/create 1.6.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/useGraph.ts

@@ -1,27 +1,12 @@
-import { useState, useEffect, useCallback } from 'react';
-import { apiClient } from '../api/client';
+import { useEffect } from 'react';
+import { useGraphStore } from '../stores/useGraphStore';
 
 export function useGraph(projectId?: string | null) {
-  const [graphData, setGraphData] = useState<any>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  const fetchGraph = useCallback(async () => {
-    try {
-      setLoading(true);
-      const data = await apiClient.fetchGraph(projectId ?? undefined);
-      setGraphData(data);
-      setError(null);
-    } catch (err: any) {
-      setError(err.message);
-    } finally {
-      setLoading(false);
-    }
-  }, [projectId]);
+  const { graphData, error, loading, fetchGraph } = useGraphStore();
 
   useEffect(() => {
-    fetchGraph();
-  }, [fetchGraph]);
+    fetchGraph(projectId);
+  }, [projectId, fetchGraph]);
 
-  return { graphData, error, loading, refetch: fetchGraph };
+  return { graphData, error, loading, refetch: () => fetchGraph(projectId) };
 }

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

@@ -1,90 +1,25 @@
-import { useState, useEffect, useCallback } from 'react';
-import { apiClient } from '../api/client';
+import { useEffect } from 'react';
+import { useProjectStore } from '../stores/useProjectStore';
 
-const STORAGE_KEY = 'selectedProjectId';
-
-export interface Project {
-  id: string;
-  name: string;
-  isDefault: number;
-  archivedAt: string | null;
-  repoUrl: string | null;
-  githubInstallationId: string | null;
-  githubRepoFullName: string | null;
-  baseBranch: string | null;
-  createdAt: string;
-  updatedAt: string;
-}
+export type { Project } from '../stores/useProjectStore';
 
 export function useProjects() {
-  const [projects, setProjects] = useState<Project[]>([]);
-  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(
-    () => localStorage.getItem(STORAGE_KEY),
-  );
-  const [loading, setLoading] = useState(true);
-
-  const fetchProjects = useCallback(async () => {
-    try {
-      const data = await apiClient.fetchProjects();
-      setProjects(data.projects);
-      return data.projects as Project[];
-    } catch {
-      setProjects([]);
-      return [] as Project[];
-    } finally {
-      setLoading(false);
-    }
-  }, []);
+  const store = useProjectStore();
 
   useEffect(() => {
-    fetchProjects().then((fetched) => {
-      const stored = localStorage.getItem(STORAGE_KEY);
-      if (stored && fetched.some((p: Project) => p.id === stored)) {
-        setSelectedProjectId(stored);
-      } else if (fetched.length > 0) {
-        const defaultProject = fetched.find((p: Project) => p.isDefault === 1);
-        const fallback = defaultProject ? defaultProject.id : fetched[0].id;
-        setSelectedProjectId(fallback);
-        localStorage.setItem(STORAGE_KEY, fallback);
-      }
-    });
-  }, [fetchProjects]);
-
-  const selectProject = useCallback((id: string) => {
-    setSelectedProjectId(id);
-    localStorage.setItem(STORAGE_KEY, id);
-  }, []);
-
-  const createProject = useCallback(async (name: string) => {
-    const data = await apiClient.createProject(name);
-    await fetchProjects();
-    selectProject(data.project.id);
-    return data.project;
-  }, [fetchProjects, selectProject]);
-
-  const renameProject = useCallback(async (id: string, name: string) => {
-    await apiClient.renameProject(id, name);
-    await fetchProjects();
-  }, [fetchProjects]);
-
-  const archiveProject = useCallback(async (id: string) => {
-    await apiClient.archiveProject(id);
-    const updated = await fetchProjects();
-    if (selectedProjectId === id && updated.length > 0) {
-      const defaultProject = updated.find((p: Project) => p.isDefault === 1);
-      const fallback = defaultProject ? defaultProject.id : updated[0].id;
-      selectProject(fallback);
+    if (store.loading) {
+      store.init();
     }
-  }, [fetchProjects, selectProject, selectedProjectId]);
+  }, []);
 
   return {
-    projects,
-    selectedProjectId,
-    loading,
-    selectProject,
-    createProject,
-    renameProject,
-    archiveProject,
-    refetchProjects: fetchProjects,
+    projects: store.projects,
+    selectedProjectId: store.selectedProjectId,
+    loading: store.loading,
+    selectProject: store.selectProject,
+    createProject: store.createProject,
+    renameProject: store.renameProject,
+    archiveProject: store.archiveProject,
+    refetchProjects: store.refetchProjects,
   };
 }

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`}