@larkup/workspace-app 0.0.0-stage → 0.2.0

package/src/components/data/jobs-tracking-button.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+import { workspaceUrl, workspaceFetch as fetch } from '../../host';
+import { useCallback, useState } from 'react';
+import type { IndexRun } from '@larkup/core/types';
+import { BriefcaseBusiness, ListTodo, Loader2, TriangleAlert } from 'lucide-react';
+import useSWR from 'swr';
+import { useProject } from '../projects/project-provider';
+import { JobsPanel } from './jobs-panel';
+import {
+  isActiveMediaIndexing,
+  MediaIndexingJobsPanel,
+  type MediaIndexingResponse,
+} from './media-indexing-jobs-panel';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '../ui/sheet';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
+import { fetchJobsWithSync } from '../../lib/jobs-client';
+import { cn } from '../../lib/utils';
+
+const fetcher = async <T,>(url: string): Promise<T> => {
+  const response = await fetch(url);
+  if (!response.ok) throw new Error('Could not load job progress.');
+  return response.json() as Promise<T>;
+};
+
+interface IndexStatus {
+  unindexedCount: number;
+  running: boolean;
+  run: IndexRun | null;
+  blockers: string[];
+}
+
+export function JobsTrackingButton() {
+  const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState<'running' | 'all'>('running');
+  const { activeProject } = useProject();
+  const serverId = activeProject?.id;
+
+  const {
+    data: jobsData,
+    error: jobsError,
+    mutate: mutateJobs,
+  } = useSWR(workspaceUrl('/api/jobs'), fetchJobsWithSync, {
+    refreshInterval: (data) =>
+      data?.jobs?.some((job) => job.status === 'running' || job.status === 'queued') ? 4_000 : 0,
+    revalidateOnFocus: true,
+  });
+  const {
+    data: indexData,
+    error: indexError,
+    mutate: mutateIndex,
+  } = useSWR<IndexStatus>(workspaceUrl('/api/index'), fetcher, {
+    refreshInterval: (data) => (data?.running ? 2_000 : 0),
+    revalidateOnFocus: true,
+  });
+  const mediaUrl = workspaceUrl(
+    `/api/media?type=all${serverId ? `&serverId=${encodeURIComponent(serverId)}` : ''}`,
+  );
+  const {
+    data: mediaData,
+    error: mediaError,
+    mutate: mutateMedia,
+  } = useSWR<MediaIndexingResponse>(mediaUrl, fetcher, {
+    refreshInterval: (data) => (data?.assets?.some(isActiveMediaIndexing) ? 2_000 : 0),
+    revalidateOnFocus: true,
+  });
+
+  const jobs = jobsData?.jobs ?? [];
+  const activeCrawlJobs = jobs.filter((job) => job.status === 'running' || job.status === 'queued');
+  const activeMediaAssets = (mediaData?.assets ?? []).filter(isActiveMediaIndexing);
+  const indexRunning = indexData?.running ?? false;
+  const activeJobCount = activeCrawlJobs.length + activeMediaAssets.length + (indexRunning ? 1 : 0);
+  const hasActiveJobs = activeJobCount > 0;
+  const hasAnyJobs = jobs.length > 0 || activeMediaAssets.length > 0 || indexRunning;
+  const loadError = jobsError || indexError || mediaError;
+  const visibleJobs = filter === 'running' ? activeCrawlJobs : jobs;
+
+  const refreshAll = useCallback(() => {
+    void Promise.all([mutateJobs(), mutateIndex(), mutateMedia()]);
+  }, [mutateIndex, mutateJobs, mutateMedia]);
+
+  return (
+    <Sheet
+      open={open}
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen);
+        if (nextOpen) refreshAll();
+      }}
+    >
+      <TooltipProvider delay={50}>
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <SheetTrigger
+                render={
+                  <button
+                    type="button"
+                    aria-label={
+                      hasActiveJobs ? `Jobs tracking, ${activeJobCount} active` : 'Jobs tracking'
+                    }
+                    className={cn(
+                      'relative flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground',
+                      hasActiveJobs &&
+                        'bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/15 hover:text-emerald-700 dark:text-emerald-400',
+                    )}
+                  >
+                    <ListTodo className="size-4" />
+                    {hasActiveJobs && (
+                      <span
+                        aria-hidden="true"
+                        className="absolute -right-1 -top-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-emerald-500 px-0.5 text-[9px] font-semibold leading-none text-white ring-2 ring-background motion-safe:animate-pulse"
+                      >
+                        {activeJobCount > 9 ? '9+' : activeJobCount}
+                      </span>
+                    )}
+                  </button>
+                }
+              />
+            }
+          />
+          <TooltipContent>{hasActiveJobs ? 'Active jobs' : 'Jobs'}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      <SheetContent side="right" className="w-[calc(100vw-1rem)]! max-w-2xl! gap-0 p-0 sm:w-2xl!">
+        <SheetHeader className="border-b border-border px-5 py-4 pr-14">
+          <div className="flex items-center gap-2.5">
+            <div
+              className={cn(
+                'flex size-8 items-center justify-center rounded-lg bg-muted text-muted-foreground',
+                hasActiveJobs && 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400',
+              )}
+            >
+              <ListTodo className="size-4" />
+            </div>
+            <div className="min-w-0">
+              <SheetTitle className="text-sm font-semibold">Jobs</SheetTitle>
+              <SheetDescription className="text-xs">
+                {hasActiveJobs
+                  ? `${activeJobCount} background ${activeJobCount === 1 ? 'job' : 'jobs'} active`
+                  : 'Track indexing and website jobs'}
+              </SheetDescription>
+            </div>
+          </div>
+        </SheetHeader>
+
+        <div className="min-h-0 flex-1 overflow-y-auto p-5">
+          {loadError && (
+            <div className="mb-4 flex items-start gap-2 rounded-lg border border-amber-500/30 bg-amber-500/5 px-3 py-2.5 text-xs text-amber-800 dark:text-amber-300">
+              <TriangleAlert className="mt-0.5 size-3.5 shrink-0" />
+              Some job progress could not be refreshed. The available results are shown below.
+            </div>
+          )}
+
+          {!hasAnyJobs ? (
+            <div className="flex min-h-64 flex-col items-center justify-center text-center">
+              <div className="mb-3 flex size-10 items-center justify-center rounded-xl border border-border bg-muted/40 text-muted-foreground">
+                <BriefcaseBusiness className="size-4.5" />
+              </div>
+              <p className="text-sm font-medium text-foreground">No jobs yet</p>
+              <p className="mt-1 max-w-xs text-xs leading-relaxed text-muted-foreground">
+                File indexing, media processing, and website jobs will appear here while they run.
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-5">
+              <MediaIndexingJobsPanel assets={activeMediaAssets} />
+
+              {indexRunning && (
+                <div className="flex items-center gap-3 rounded-lg border border-border bg-background px-3 py-2.5">
+                  <Loader2 className="size-4 shrink-0 animate-spin text-emerald-600" />
+                  <div className="min-w-0">
+                    <p className="text-xs font-medium text-foreground">Indexing files</p>
+                    <p className="text-[11px] text-muted-foreground">
+                      Running in the background — new files will join the queue.
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              {jobs.length > 0 && (
+                <section
+                  className={cn(
+                    (activeMediaAssets.length > 0 || indexRunning) && 'border-t border-border pt-4',
+                  )}
+                >
+                  <div className="mb-3 flex items-center gap-2">
+                    {[
+                      { id: 'running', label: 'Running' },
+                      { id: 'all', label: 'All jobs' },
+                    ].map((tab) => (
+                      <button
+                        key={tab.id}
+                        type="button"
+                        aria-pressed={filter === tab.id}
+                        onClick={() => setFilter(tab.id as 'running' | 'all')}
+                        className={cn(
+                          'rounded-full px-3 py-1 text-xs font-medium transition-colors',
+                          filter === tab.id
+                            ? 'bg-muted text-foreground'
+                            : 'border border-border text-muted-foreground hover:bg-muted/50 hover:text-foreground',
+                        )}
+                      >
+                        {tab.label}
+                      </button>
+                    ))}
+                  </div>
+                  <JobsPanel jobs={visibleJobs} onChanged={refreshAll} />
+                </section>
+              )}
+            </div>
+          )}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/components/data/live-media-progress.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import {
+  formatMediaProgressPercent,
+  isMediaStepTelemetryStale,
+  type MediaProgressStep,
+} from '../../lib/media/progress';
+import { cn } from '../../lib/utils';
+
+export function LiveMediaProgress({
+  value,
+  step,
+  paused = false,
+  label = 'Overall indexing progress',
+  className,
+}: {
+  value: number;
+  step?: MediaProgressStep;
+  paused?: boolean;
+  label?: string;
+  className?: string;
+}) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (paused) return;
+    const interval = window.setInterval(() => setNow(Date.now()), 1_000);
+    return () => window.clearInterval(interval);
+  }, [paused]);
+
+  const bounded = Math.max(0, Math.min(100, Number.isFinite(value) ? value : 0));
+  const stale = isMediaStepTelemetryStale(step, now);
+  const live = !paused && !stale && bounded < 100;
+  const formatted = formatMediaProgressPercent(bounded);
+  const liveTrackStart = Math.min(96, Math.max(0, bounded));
+  const status = paused
+    ? `${formatted}% progress, paused`
+    : stale
+      ? `${formatted}% progress, waiting for worker update`
+      : `${formatted}% progress, worker activity`;
+
+  return (
+    <div
+      role="progressbar"
+      aria-label={label}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={Math.round(bounded * 10) / 10}
+      aria-valuetext={status}
+      data-live-progress={live ? 'active' : stale ? 'stale' : paused ? 'paused' : 'idle'}
+      className={cn(
+        'relative h-1 w-full overflow-hidden rounded-full bg-muted',
+        stale && 'opacity-60',
+        className,
+      )}
+    >
+      <motion.div
+        className="absolute inset-y-0 left-0 rounded-full bg-emerald-500 dark:bg-emerald-400"
+        animate={{ width: `${bounded}%` }}
+        transition={{ duration: 0.55, ease: 'easeOut' }}
+      />
+      {live ? (
+        <div
+          data-testid="live-indexing-progress-pulse"
+          className="absolute inset-y-0 right-0 overflow-hidden"
+          style={{ left: `${liveTrackStart}%` }}
+        >
+          <motion.span
+            className="absolute inset-y-0 w-1/4 rounded-full bg-linear-to-r from-transparent via-emerald-400/75 to-transparent dark:via-emerald-300/75"
+            initial={{ x: '-120%' }}
+            animate={{ x: ['-120%', '420%'] }}
+            transition={{ duration: 1.35, ease: 'linear', repeat: Infinity }}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/data/media-indexing-jobs-panel.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { AudioLines, Clock3, Image as ImageIcon, Loader2, Video } from 'lucide-react';
+import { useLiveMediaProgress } from '../../hooks/use-live-media-progress';
+import { LiveMediaProgress } from './live-media-progress';
+import {
+  describeActiveMediaStep,
+  estimateMediaStepRemainingSeconds,
+  formatMediaProgressPercent,
+  isFinalizingMediaStep,
+  mediaProcessingStartedAt,
+  primaryRunningMediaStep,
+} from '../../lib/media/progress';
+
+export interface MediaIndexingAsset {
+  id: string;
+  type: 'image' | 'video' | 'audio';
+  fileName: string;
+  processingStatus: 'pending' | 'processing' | 'completed' | 'failed';
+  processingMessage?: string;
+  processingProgress?: number;
+  processingPaused?: boolean;
+  processingStartedAt?: string;
+  durationSecs?: number;
+  createdAt: string;
+  processingSteps?: Array<{
+    stage: string;
+    status: 'waiting' | 'running' | 'completed' | 'skipped' | 'failed';
+    percent?: number;
+    current?: number;
+    total?: number;
+    unit?: string;
+    estimatedRemainingSeconds?: number;
+    elapsedSeconds?: number;
+    sequence?: number;
+    message?: string;
+    startedAt?: string;
+    updatedAt?: string;
+  }>;
+}
+
+export interface MediaIndexingResponse {
+  assets: MediaIndexingAsset[];
+}
+
+export function isActiveMediaIndexing(asset: MediaIndexingAsset): boolean {
+  return (
+    asset.processingStatus === 'processing' ||
+    (asset.processingStatus === 'pending' && Boolean(asset.processingMessage))
+  );
+}
+
+export function MediaIndexingJobsPanel({ assets }: { assets: MediaIndexingAsset[] }) {
+  if (assets.length === 0) return null;
+
+  return (
+    <section aria-label="Media indexing progress" className="space-y-2">
+      <div className="flex items-center gap-2 text-xs font-medium text-foreground">
+        <Video className="size-3.5 text-emerald-600" />
+        Media indexing
+        <span className="text-muted-foreground">{assets.length} active</span>
+      </div>
+      <div className="space-y-2">
+        {assets.map((asset) => (
+          <MediaIndexingJob key={asset.id} asset={asset} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function MediaIndexingJob({ asset }: { asset: MediaIndexingAsset }) {
+  const Icon = asset.type === 'video' ? Video : asset.type === 'audio' ? AudioLines : ImageIcon;
+  const progress = useLiveMediaProgress(asset);
+  const activeStep = primaryRunningMediaStep(asset.processingSteps);
+  const stepDescription = describeActiveMediaStep(activeStep);
+  const isFinalizing = isFinalizingMediaStep(activeStep);
+  const isColdStart = !asset.processingPaused && progress === 0;
+
+  return (
+    <article className="rounded-md border border-border/70 bg-background/70 px-3 py-2.5">
+      <div className="flex min-w-0 items-start gap-2.5">
+        <div className="mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-md bg-emerald-500/10 text-emerald-700 dark:text-emerald-400">
+          <Icon className="size-3.5" />
+        </div>
+        <div className="min-w-0 flex-1 space-y-1.5">
+          <div className="flex min-w-0 items-center gap-2">
+            <p className="truncate text-xs font-medium text-foreground">{asset.fileName}</p>
+            <ElapsedTime startTime={mediaProcessingStartedAt(asset)} />
+          </div>
+          <div className="flex min-w-0 items-center gap-1.5" aria-live="polite">
+            {asset.processingPaused ? (
+              <Clock3 className="size-3 shrink-0 text-amber-600" />
+            ) : (
+              <Loader2 className="size-3 shrink-0 animate-spin text-emerald-600" />
+            )}
+            <p className="truncate text-[11px] text-muted-foreground">
+              {asset.processingPaused
+                ? 'Paused — resume when you are ready.'
+                : asset.processingMessage || 'Preparing media indexing…'}
+            </p>
+          </div>
+          {isFinalizing ? (
+            <div
+              role="progressbar"
+              aria-label={`Finalizing ${asset.fileName}`}
+              aria-valuetext="Finalizing verified results"
+              className="relative h-2 min-h-2 w-full overflow-hidden rounded-full bg-emerald-100 dark:bg-emerald-950/60"
+            >
+              <motion.div
+                className="absolute inset-y-0 left-0 w-2/5 rounded-full bg-emerald-500 dark:bg-emerald-400"
+                initial={{ x: '-120%' }}
+                animate={{ x: ['-120%', '270%'] }}
+                transition={{ duration: 1.15, ease: 'easeInOut', repeat: Infinity }}
+              />
+            </div>
+          ) : (
+            <LiveMediaProgress
+              value={progress}
+              step={activeStep}
+              paused={asset.processingPaused}
+              label={`Overall indexing progress for ${asset.fileName}`}
+              className="h-1.5"
+            />
+          )}
+          <div className="flex min-w-0 items-center justify-between gap-2 text-[10px] text-muted-foreground">
+            <span className="truncate">
+              {stepDescription || (isColdStart ? 'Starting GPU worker…' : 'Processing…')}
+            </span>
+            <div className="flex shrink-0 items-center gap-1.5 tabular-nums">
+              <EstimatedStepTime step={activeStep} />
+              <span>
+                {isFinalizing ? 'Finalizing' : `${formatMediaProgressPercent(progress)}%`}
+              </span>
+            </div>
+          </div>
+          {isColdStart && (
+            <p className="text-[10px] text-muted-foreground/80">
+              The first GPU job can take a minute or two to start.
+            </p>
+          )}
+        </div>
+      </div>
+    </article>
+  );
+}
+
+function EstimatedStepTime({
+  step,
+}: {
+  step: NonNullable<MediaIndexingAsset['processingSteps']>[number] | undefined;
+}) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const interval = setInterval(() => setNow(Date.now()), 15_000);
+    return () => clearInterval(interval);
+  }, []);
+  const remainingSeconds = estimateMediaStepRemainingSeconds(step, now);
+  if (remainingSeconds === null) return null;
+  const minutes = Math.round(remainingSeconds / 60);
+  const label =
+    minutes < 1
+      ? '<1m'
+      : minutes < 60
+        ? `~${minutes}m`
+        : `~${Math.floor(minutes / 60)}h ${minutes % 60}m`;
+  return <span title="Estimated time remaining from completed remote work">{label} left</span>;
+}
+
+function ElapsedTime({ startTime }: { startTime: string }) {
+  const [elapsed, setElapsed] = useState(0);
+
+  useEffect(() => {
+    const start = new Date(startTime).getTime();
+    const update = () => setElapsed(Math.max(0, Math.floor((Date.now() - start) / 1000)));
+    update();
+    const interval = setInterval(update, 1_000);
+    return () => clearInterval(interval);
+  }, [startTime]);
+
+  const minutes = Math.floor(elapsed / 60);
+  const seconds = elapsed % 60;
+  return (
+    <span className="shrink-0 font-mono tabular-nums text-[10px] text-muted-foreground/70">
+      {minutes}:{seconds.toString().padStart(2, '0')}
+    </span>
+  );
+}