@larkup/workspace-app 0.0.0-stage → 0.2.0

package/src/components/data/web-crawler-status.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { workspaceUrl, workspaceFetch as fetch } from '../../host';
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '../../lib/utils';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
+
+type CrawlerResponse = {
+  state: { running: boolean; mode?: 'native' | 'firecrawl'; lastError?: string };
+  starting?: boolean;
+};
+
+type Status = 'starting' | 'ready' | 'unavailable';
+
+const STATUS_POLL_MS = 2_000;
+
+/** Compact readiness indicator for the crawler embedded in the Larkup API. */
+export function WebCrawlerStatus() {
+  const [status, setStatus] = useState<Status>('starting');
+  const [statusDetail, setStatusDetail] = useState('');
+  const requestInFlight = useRef(false);
+  const mounted = useRef(false);
+
+  function applyStatus(body: CrawlerResponse) {
+    if (!mounted.current) return;
+    if (body.state.running) {
+      setStatus('ready');
+      setStatusDetail('');
+      return;
+    }
+    if (body.starting) {
+      setStatus('starting');
+      setStatusDetail('');
+      return;
+    }
+    setStatus('unavailable');
+    setStatusDetail(body.state.lastError || '');
+  }
+
+  async function requestStatus(start: boolean) {
+    const res = await fetch(
+      workspaceUrl('/api/firecrawl/local'),
+      start
+        ? {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ action: 'start' }),
+          }
+        : { cache: 'no-store' },
+    );
+    const body = (await res.json()) as CrawlerResponse;
+    if (!res.ok) throw new Error('Crawler status failed');
+    return body;
+  }
+
+  async function updateStatus(forceStart = false) {
+    if (requestInFlight.current) return;
+    requestInFlight.current = true;
+    try {
+      if (forceStart) {
+        if (mounted.current) setStatus('starting');
+        applyStatus(await requestStatus(true));
+        return;
+      }
+
+      applyStatus(await requestStatus(false));
+    } catch {
+      if (mounted.current) {
+        setStatus('unavailable');
+        setStatusDetail(
+          'The crawler status could not be reached. Larkup will retry automatically.',
+        );
+      }
+    } finally {
+      requestInFlight.current = false;
+    }
+  }
+
+  useEffect(() => {
+    mounted.current = true;
+    void updateStatus(true);
+    const interval = window.setInterval(() => void updateStatus(), STATUS_POLL_MS);
+    return () => {
+      mounted.current = false;
+      window.clearInterval(interval);
+    };
+  }, []);
+
+  const label =
+    status === 'ready'
+      ? 'Website crawler is ready'
+      : status === 'starting'
+        ? 'Preparing website crawler…'
+        : statusDetail ||
+          'Website crawler is temporarily unavailable. Larkup will retry automatically.';
+
+  return (
+    <TooltipProvider delay={0}>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              type="button"
+              aria-label="Website crawler status"
+              data-status={status}
+              className="relative flex size-7 items-center justify-center rounded-md outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+              onClick={() => void updateStatus(true)}
+            >
+              <span
+                className={cn(
+                  'relative block size-2 rounded-full',
+                  status === 'ready'
+                    ? 'bg-emerald-500'
+                    : status === 'starting'
+                      ? 'bg-blue-500'
+                      : 'bg-red-500',
+                )}
+              >
+                {status === 'starting' && (
+                  <span className="absolute inset-0 animate-ping rounded-full bg-blue-400/80" />
+                )}
+              </span>
+            </button>
+          }
+        />
+        <TooltipContent className="max-w-60 text-xs">
+          <p>{label}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

package/src/components/projects/project-form-dialog.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { Loader2 } from 'lucide-react';
+import { Button } from '@larkup/workspace-ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog';
+import { Input } from '../ui/input';
+import { Label } from '@larkup/workspace-ui/label';
+import { useProject, type WorkspaceProject } from './project-provider';
+
+interface Props {
+  mode: 'create' | 'rename';
+  target?: WorkspaceProject | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function ProjectFormDialog({ mode, target, open, onOpenChange }: Props) {
+  const { createProject, renameProject } = useProject();
+  const [name, setName] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  // Seed the field whenever the dialog opens.
+  useEffect(() => {
+    if (open) setName(mode === 'rename' ? (target?.name ?? '') : '');
+  }, [open, mode, target]);
+
+  async function submit() {
+    const trimmed = name.trim();
+    if (!trimmed) {
+      toast.error('Enter a project name.');
+      return;
+    }
+    setBusy(true);
+    try {
+      if (mode === 'create') {
+        const created = await createProject(trimmed);
+        if (created) toast.success(`Created "${created.name}" and switched to it.`);
+      } else if (target) {
+        await renameProject(target.id, trimmed);
+        toast.success('Project renamed.');
+      }
+      onOpenChange(false);
+    } catch {
+      toast.error('Something went wrong. Try again.');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{mode === 'create' ? 'New project' : 'Rename project'}</DialogTitle>
+          <DialogDescription>
+            {mode === 'create'
+              ? 'Each project is an isolated environment with its own documents, index, and settings.'
+              : 'Give this project a clearer name.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-2">
+          <Label htmlFor="server-name">Project name</Label>
+          <Input
+            id="server-name"
+            value={name}
+            autoFocus
+            placeholder="e.g. docs-assistant"
+            onChange={(e) => setName(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') void submit();
+            }}
+          />
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={busy}>
+            Cancel
+          </Button>
+          <Button onClick={() => void submit()} disabled={busy}>
+            {busy && <Loader2 className="size-4 animate-spin" />}
+            {mode === 'create' ? 'Create project' : 'Save'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/projects/project-provider.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import { workspaceUrl, workspaceFetch as fetch } from '../../host';
+import { createContext, useCallback, useContext, type ReactNode } from 'react';
+import useSWR, { SWRConfig, mutate as globalMutate } from 'swr';
+/** A Project enriched with the runtime status shown in the shell. */
+export interface WorkspaceProject {
+  id: string;
+  name: string;
+  port: number;
+  createdAt: string;
+  updatedAt: string;
+  sourceCount: number;
+  indexed: boolean;
+  running: boolean;
+  endpoint: string;
+}
+
+interface ProjectData {
+  activeProjectId: string | null;
+  projects: WorkspaceProject[];
+}
+
+export interface ProjectContextValue {
+  isLoading: boolean;
+  projects: WorkspaceProject[];
+  activeProject?: WorkspaceProject;
+  /** No Projects exist yet → run first-time onboarding. */
+  isFirstRun: boolean;
+  refresh: () => void;
+  createProject: (name: string) => Promise<WorkspaceProject | undefined>;
+  activateProject: (id: string) => Promise<void>;
+  renameProject: (id: string, name: string) => Promise<void>;
+  deleteProject: (id: string) => Promise<void>;
+}
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json());
+
+const ProjectContext = createContext<ProjectContextValue | null>(null);
+
+export function useProject() {
+  const ctx = useContext(ProjectContext);
+  if (!ctx) {
+    throw new Error('useProject must be used within a ProjectProvider');
+  }
+  return ctx;
+}
+
+export function ProjectProvider({ children }: { children: ReactNode }) {
+  const { data, isLoading, mutate } = useSWR<ProjectData>(workspaceUrl('/api/projects'), fetcher, {
+    revalidateOnFocus: false,
+  });
+
+  const projects = data?.projects ?? [];
+  const activeProject = projects.find((project) => project.id === data?.activeProjectId);
+  const isFirstRun = !isLoading && projects.length === 0;
+
+  /** Revalidate every SWR key after switching the active Project. */
+  const refreshAllStages = useCallback(async () => {
+    await globalMutate(() => true);
+  }, []);
+
+  const createProject = useCallback(
+    async (name: string) => {
+      const res = await fetch(workspaceUrl('/api/projects'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name }),
+      });
+      const json = await res.json();
+      await mutate();
+      await refreshAllStages();
+      return json.project as WorkspaceProject | undefined;
+    },
+    [mutate, refreshAllStages],
+  );
+
+  const activateProject = useCallback(
+    async (id: string) => {
+      await fetch(workspaceUrl('/api/projects'), {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'activate', projectId: id }),
+      });
+      await mutate();
+      await refreshAllStages();
+    },
+    [mutate, refreshAllStages],
+  );
+
+  const renameProject = useCallback(
+    async (id: string, name: string) => {
+      await fetch(workspaceUrl('/api/projects'), {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'rename', projectId: id, name }),
+      });
+      await mutate();
+    },
+    [mutate],
+  );
+
+  const deleteProject = useCallback(
+    async (id: string) => {
+      await fetch(workspaceUrl(`/api/projects?id=${encodeURIComponent(id)}`), {
+        method: 'DELETE',
+      });
+      await mutate();
+      await refreshAllStages();
+    },
+    [mutate, refreshAllStages],
+  );
+
+  const value: ProjectContextValue = {
+    isLoading,
+    projects,
+    activeProject,
+    isFirstRun,
+    refresh: () => {
+      void mutate();
+    },
+    createProject,
+    activateProject,
+    renameProject,
+    deleteProject,
+  };
+
+  return <ProjectContext.Provider value={value}>{children}</ProjectContext.Provider>;
+}
+
+export function WorkspaceProjectProvider({
+  value,
+  children,
+}: {
+  value: ProjectContextValue;
+  children: ReactNode;
+}) {
+  return (
+    <SWRConfig value={{ provider: () => new Map() }}>
+      <ProjectContext.Provider value={value}>{children}</ProjectContext.Provider>
+    </SWRConfig>
+  );
+}