crewos 0.1.0

package/app/src/pages/Login/index.jsx

@@ -0,0 +1,118 @@
+import { useState } from 'preact/hooks';
+
+import { IconKey, IconLogo } from '../../components/Icons';
+import { auth as authStore } from '../../stores/auth.store';
+import { getMe } from '../../services/auth.service';
+
+const Login = () => {
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!password.trim()) return;
+
+    setLoading(true);
+
+    localStorage.setItem('crewos_token', password.trim());
+
+    try {
+      const res = await getMe();
+      authStore.value = {
+        ...authStore.value,
+        user: { authenticated: true },
+        onboardingCompleted: res.data?.onboardingCompleted || false,
+      };
+    } catch {
+      localStorage.removeItem('crewos_token');
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div class="ui-page">
+      <div
+        class="ui-card"
+        style={{ width: 380, maxWidth: '90vw', padding: 'var(--space-8)' }}
+      >
+        <div style={{ textAlign: 'center', marginBottom: 'var(--space-8)' }}>
+          <IconLogo
+            class="mx-auto"
+            style={{ width: 36, height: 36, marginBottom: 'var(--space-4)' }}
+          />
+          <h1
+            style={{
+              fontSize: '1.5rem',
+              fontWeight: 700,
+              margin: 0,
+              color: 'var(--color-text)',
+            }}
+          >
+            crewOS
+          </h1>
+          <p
+            style={{
+              fontSize: '0.85rem',
+              color: 'var(--color-muted)',
+              marginTop: 'var(--space-2)',
+            }}
+          >
+            Enter your app password to continue
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <label
+            class="ui-label"
+            style={{ display: 'block', marginBottom: 'var(--space-2)' }}
+          >
+            Password
+          </label>
+          <div style={{ position: 'relative', marginBottom: 'var(--space-6)' }}>
+            <IconKey
+              style={{
+                position: 'absolute',
+                left: 'var(--space-4)',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                width: 18,
+                height: 18,
+                color: 'var(--color-muted)',
+              }}
+            />
+            <input
+              type="password"
+              value={password}
+              onInput={(e) => setPassword(e.target.value)}
+              placeholder="Enter your password"
+              autoFocus
+              style={{
+                width: '100%',
+                padding: 'var(--space-3) var(--space-4) var(--space-3) 2.6rem',
+                background: 'var(--color-surface-soft)',
+                border: '1px solid var(--color-border)',
+                borderRadius: 'var(--radius-md)',
+                color: 'var(--color-text)',
+                fontSize: '0.95rem',
+                outline: 'none',
+                transition: 'border-color 180ms ease',
+              }}
+            />
+          </div>
+
+          <button
+            type="submit"
+            class="ui-button-primary"
+            disabled={loading || !password.trim()}
+            style={{ width: '100%', justifyContent: 'center' }}
+          >
+            {loading ? 'Authenticating...' : 'Sign In'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

package/app/src/pages/Onboarding/index.jsx

@@ -0,0 +1,550 @@
+import { useState, useEffect, useRef } from 'preact/hooks';
+import { toast } from 'sonner';
+
+import {
+  getOnboardingStatus,
+  validateCredentials,
+  saveCredentials,
+  startAnalysis,
+  getAnalysisProgress,
+  completeOnboarding,
+} from '../../services/onboarding.service';
+import { auth as authStore } from '../../stores/auth.store';
+import { IconLogo, IconEye } from '../../components/Icons';
+
+const Spinner = () => (
+  <div class="h-4 w-4 border-2 border-zinc-600 border-t-emerald-400 animate-spin flex-shrink-0" />
+);
+
+const Onboarding = () => {
+  const [step, setStep] = useState(1);
+  const [baseURL, setBaseURL] = useState('');
+  const [apiKey, setApiKey] = useState('');
+  const [showApiKey, setShowApiKey] = useState(false);
+  const [validating, setValidating] = useState(false);
+  const [validationError, setValidationError] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [analyzing, setAnalyzing] = useState(false);
+  const [analysisDone, setAnalysisDone] = useState(false);
+  const [progressLines, setProgressLines] = useState([]);
+  const [completing, setCompleting] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  const progressRef = useRef(null);
+  const pollRef = useRef(null);
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        const res = await getOnboardingStatus();
+        const s = res.data;
+
+        if (s.hasCredentials) {
+          setBaseURL(s.baseURL || '');
+          setApiKey(s.apiKey || '');
+          setStep(s.hasKnowledge ? 3 : 2);
+          if (s.isAnalyzing) {
+            setAnalyzing(true);
+            startPolling();
+          }
+          if (s.hasKnowledge) {
+            setAnalysisDone(true);
+          }
+        } else {
+          setStep(1);
+        }
+      } catch {
+        // keep step 1
+      } finally {
+        setLoading(false);
+      }
+    };
+    init();
+    return () => {
+      if (pollRef.current) clearInterval(pollRef.current);
+    };
+  }, []);
+
+  const startPolling = () => {
+    if (pollRef.current) clearInterval(pollRef.current);
+    pollRef.current = setInterval(async () => {
+      try {
+        const res = await getAnalysisProgress();
+        setProgressLines(res.data.lines || []);
+        if (!res.data.isAnalyzing) {
+          clearInterval(pollRef.current);
+          pollRef.current = null;
+          setAnalyzing(false);
+          setAnalysisDone(true);
+        }
+      } catch {
+        // ignore
+      }
+    }, 1000);
+  };
+
+  useEffect(() => {
+    if (progressRef.current) {
+      progressRef.current.scrollTop = progressRef.current.scrollHeight;
+    }
+  }, [progressLines]);
+
+  const handleValidate = async () => {
+    if (!baseURL.trim() || !apiKey.trim()) return;
+
+    setValidating(true);
+    setValidationError('');
+
+    try {
+      await validateCredentials(baseURL.trim(), apiKey.trim());
+      setValidating(false);
+      toast.success('Connection is valid');
+    } catch (err) {
+      setValidationError(err.message);
+      setValidating(false);
+    }
+  };
+
+  const handleSaveAndNext = async () => {
+    if (!baseURL.trim() || !apiKey.trim()) return;
+
+    setSaving(true);
+    try {
+      await saveCredentials(baseURL.trim(), apiKey.trim());
+      setStep(2);
+    } catch (err) {
+      toast.error(err.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleStartAnalysis = async () => {
+    setAnalyzing(true);
+    setAnalysisDone(false);
+    setProgressLines([]);
+
+    try {
+      await startAnalysis();
+      startPolling();
+    } catch (err) {
+      setAnalyzing(false);
+      toast.error(err.message);
+    }
+  };
+
+  const handleComplete = async () => {
+    setCompleting(true);
+    try {
+      await completeOnboarding();
+      authStore.value = {
+        ...authStore.value,
+        onboardingCompleted: true,
+      };
+    } catch (err) {
+      toast.error(err.message);
+    } finally {
+      setCompleting(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div class="ui-page">
+        <div class="ui-card flex items-center gap-4 p-8">
+          <div class="h-10 w-10 rounded-full border-4 border-zinc-800 border-t-emerald-400 animate-spin" />
+          <div>
+            <p class="text-sm font-semibold text-zinc-100">crewOS</p>
+            <p class="text-xs text-zinc-500">Loading setup...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const inputCls =
+    'w-full px-3 py-2 bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm outline-none focus:border-emerald-400/50 transition-colors';
+
+  const btnPrimary =
+    'inline-flex items-center gap-2 px-4 py-2 bg-emerald-500 hover:bg-emerald-400 text-black font-semibold text-sm uppercase tracking-[0.05em] transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer';
+
+  const btnSecondary =
+    'inline-flex items-center gap-2 px-4 py-2 border border-zinc-700 text-zinc-300 hover:border-zinc-500 font-semibold text-sm uppercase tracking-[0.05em] transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer';
+
+  const stepDots = [1, 2, 3].map((s) => (
+    <div
+      class={`w-3 h-3 border-2 ${
+        s <= step
+          ? 'bg-emerald-400 border-emerald-400'
+          : 'bg-transparent border-zinc-600'
+      }`}
+    />
+  ));
+
+  return (
+    <div class="ui-page">
+      <div
+        class="ui-card"
+        style={{
+          width: 520,
+          maxWidth: '92vw',
+          padding: 'var(--space-8)',
+          maxHeight: '90vh',
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        {/* header */}
+        <div style={{ textAlign: 'center', marginBottom: 'var(--space-6)' }}>
+          <IconLogo
+            class="mx-auto"
+            style={{ width: 32, height: 32, marginBottom: 'var(--space-3)' }}
+          />
+          <h1
+            style={{
+              fontSize: '1.25rem',
+              fontWeight: 700,
+              margin: 0,
+              color: 'var(--color-text)',
+            }}
+          >
+            crewOS Setup
+          </h1>
+          <p
+            style={{
+              fontSize: '0.8rem',
+              color: 'var(--color-muted)',
+              marginTop: 'var(--space-2)',
+            }}
+          >
+            Complete these steps to start using crewOS
+          </p>
+        </div>
+
+        {/* steps indicator */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 'var(--space-4)',
+            marginBottom: 'var(--space-6)',
+          }}
+        >
+          {stepDots.reduce((acc, dot, i) => {
+            acc.push(dot);
+            if (i < 2) {
+              acc.push(
+                <div
+                  class="h-px flex-1 max-w-8"
+                  style={{
+                    background:
+                      step > i + 1
+                        ? 'var(--color-primary)'
+                        : 'var(--color-border)',
+                  }}
+                />,
+              );
+            }
+            return acc;
+          }, [])}
+        </div>
+
+        <div class="flex-1 overflow-y-auto">
+          {/* Step 1: Credentials */}
+          {step === 1 && (
+            <div>
+              <h2
+                style={{
+                  fontSize: '0.9rem',
+                  fontWeight: 600,
+                  color: 'var(--color-text)',
+                  marginBottom: 'var(--space-1)',
+                }}
+              >
+                Configure LLM Provider
+              </h2>
+              <p
+                style={{
+                  fontSize: '0.75rem',
+                  color: 'var(--color-muted)',
+                  marginBottom: 'var(--space-5)',
+                }}
+              >
+                Enter your LLM provider's API endpoint and key
+              </p>
+
+              <div style={{ marginBottom: 'var(--space-4)' }}>
+                <label
+                  style={{
+                    display: 'block',
+                    fontSize: '0.68rem',
+                    fontWeight: 600,
+                    color: 'var(--color-muted)',
+                    marginBottom: 'var(--space-2)',
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.06em',
+                  }}
+                >
+                  Base URL
+                </label>
+                <input
+                  type="text"
+                  value={baseURL}
+                  onInput={(e) => {
+                    setBaseURL(e.target.value);
+                    setValidationError('');
+                  }}
+                  placeholder="https://api.openai.com/v1"
+                  class={inputCls}
+                />
+              </div>
+
+              <div style={{ marginBottom: 'var(--space-2)' }}>
+                <label
+                  style={{
+                    display: 'block',
+                    fontSize: '0.68rem',
+                    fontWeight: 600,
+                    color: 'var(--color-muted)',
+                    marginBottom: 'var(--space-2)',
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.06em',
+                  }}
+                >
+                  API Key
+                </label>
+                <div style={{ position: 'relative' }}>
+                  <input
+                    type={showApiKey ? 'text' : 'password'}
+                    value={apiKey}
+                    onInput={(e) => {
+                      setApiKey(e.target.value);
+                      setValidationError('');
+                    }}
+                    placeholder="sk-..."
+                    class={inputCls}
+                    style={{ paddingRight: '2.4rem' }}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowApiKey(!showApiKey)}
+                    class="absolute right-1.5 top-1/2 -translate-y-1/2 w-[26px] h-[26px] bg-transparent text-zinc-500 flex items-center justify-center cursor-pointer hover:text-zinc-300 transition-colors"
+                  >
+                    <IconEye off={!showApiKey} />
+                  </button>
+                </div>
+              </div>
+
+              {validationError && (
+                <div
+                  style={{
+                    fontSize: '0.75rem',
+                    color: '#f87171',
+                    marginBottom: 'var(--space-4)',
+                    padding: 'var(--space-3)',
+                    background: 'rgba(248,113,113,0.08)',
+                    border: '1px solid rgba(248,113,113,0.2)',
+                  }}
+                >
+                  {validationError}
+                </div>
+              )}
+
+              <div
+                style={{
+                  display: 'flex',
+                  gap: 'var(--space-3)',
+                  justifyContent: 'flex-end',
+                  marginTop: 'var(--space-6)',
+                }}
+              >
+                <button
+                  type="button"
+                  onClick={handleValidate}
+                  disabled={validating || !baseURL.trim() || !apiKey.trim()}
+                  class={btnSecondary}
+                >
+                  {validating && <Spinner />}
+                  Test Connection
+                </button>
+                <button
+                  type="button"
+                  onClick={handleSaveAndNext}
+                  disabled={saving || !baseURL.trim() || !apiKey.trim()}
+                  class={btnPrimary}
+                >
+                  {saving ? 'Saving...' : 'Save & Continue'}
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Step 2: Project Analysis */}
+          {step === 2 && (
+            <div>
+              <h2
+                style={{
+                  fontSize: '0.9rem',
+                  fontWeight: 600,
+                  color: 'var(--color-text)',
+                  marginBottom: 'var(--space-1)',
+                }}
+              >
+                Analyze Project
+              </h2>
+              <p
+                style={{
+                  fontSize: '0.75rem',
+                  color: 'var(--color-muted)',
+                  marginBottom: 'var(--space-5)',
+                }}
+              >
+                crewOS will scan your project to learn its structure,
+                conventions, and design. This knowledge is injected into every
+                task for better results.
+              </p>
+
+              {!analyzing && !analysisDone && (
+                <div
+                  style={{ textAlign: 'center', padding: 'var(--space-6) 0' }}
+                >
+                  <p
+                    style={{
+                      fontSize: '0.8rem',
+                      color: 'var(--color-muted)',
+                      marginBottom: 'var(--space-4)',
+                    }}
+                  >
+                    Ready to analyze your project. This may take 1–3 minutes.
+                  </p>
+                  <div
+                    style={{
+                      display: 'flex',
+                      gap: 'var(--space-3)',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    <button
+                      type="button"
+                      onClick={handleStartAnalysis}
+                      class={btnPrimary}
+                    >
+                      Start Analysis
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {analyzing && (
+                <div>
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 'var(--space-2)',
+                      marginBottom: 'var(--space-3)',
+                    }}
+                  >
+                    <Spinner />
+                    <span
+                      style={{
+                        fontSize: '0.78rem',
+                        color: 'var(--color-primary)',
+                      }}
+                    >
+                      Analyzing project...
+                    </span>
+                  </div>
+                  <div
+                    ref={progressRef}
+                    style={{
+                      background: '#000',
+                      border: '1px solid var(--color-border)',
+                      padding: 'var(--space-3)',
+                      maxHeight: 240,
+                      overflowY: 'auto',
+                      fontFamily: 'monospace',
+                      fontSize: '0.72rem',
+                      lineHeight: 1.6,
+                      color: 'var(--color-muted)',
+                    }}
+                  >
+                    {progressLines.length === 0 ? (
+                      <span class="animate-pulse">Waiting for output...</span>
+                    ) : (
+                      progressLines.map((line, i) => (
+                        <div key={i} class="whitespace-pre-wrap break-all">
+                          {line}
+                        </div>
+                      ))
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {analysisDone && !analyzing && (
+                <div
+                  style={{
+                    textAlign: 'center',
+                    padding: 'var(--space-6) 0',
+                    color: 'var(--color-primary)',
+                  }}
+                >
+                  <p style={{ marginBottom: 'var(--space-4)' }}>
+                    Analysis complete. Project knowledge has been saved.
+                  </p>
+                  <button
+                    type="button"
+                    onClick={() => setStep(3)}
+                    class={btnPrimary}
+                  >
+                    Continue
+                  </button>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Step 3: Complete */}
+          {step === 3 && (
+            <div style={{ textAlign: 'center', padding: 'var(--space-6) 0' }}>
+              <h2
+                style={{
+                  fontSize: '0.9rem',
+                  fontWeight: 600,
+                  color: 'var(--color-text)',
+                  marginBottom: 'var(--space-3)',
+                }}
+              >
+                Ready to Go
+              </h2>
+              <p
+                style={{
+                  fontSize: '0.78rem',
+                  color: 'var(--color-muted)',
+                  marginBottom: 'var(--space-5)',
+                }}
+              >
+                {analysisDone
+                  ? 'Your project has been analyzed and crewOS is ready.'
+                  : 'Project analysis must be completed to continue.'}
+              </p>
+              <button
+                type="button"
+                onClick={handleComplete}
+                disabled={completing}
+                class={btnPrimary}
+              >
+                {completing ? 'Finishing...' : 'Go to Dashboard'}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Onboarding;

package/app/src/services/api.js

@@ -0,0 +1,46 @@
+import axios from 'axios';
+
+import environments from '../utils/environments';
+
+const { BACKEND_URL } = environments;
+
+const getErrorMessage = (err) => {
+  const responseData = err?.response?.data;
+  if (typeof responseData === 'string') return responseData;
+  if (responseData?.message) return responseData.message;
+  return err?.message || 'Something went wrong';
+};
+
+const api = axios.create({
+  baseURL: BACKEND_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+api.interceptors.request.use(
+  async (config) => {
+    const token = await localStorage.getItem('crewos_token');
+
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  },
+);
+
+api.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  (err) => {
+    const message = getErrorMessage(err);
+    throw new Error(message);
+  },
+);
+
+export default api;