@larkup/workspace-app 0.0.0-stage → 0.2.0

package/src/components/data/tabular-preview.tsx

@@ -0,0 +1,205 @@
+'use client';
+
+import { useMemo } from 'react';
+import type { ColumnMeta } from '@larkup/core/tabular-store';
+
+const TYPE_BADGES: Record<string, { icon: string; label: string; color: string }> = {
+  number: {
+    icon: '🔢',
+    label: 'Number',
+    color: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
+  },
+  string: {
+    icon: '📝',
+    label: 'Text',
+    color: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300',
+  },
+  date: {
+    icon: '📅',
+    label: 'Date',
+    color: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
+  },
+  boolean: {
+    icon: '✓',
+    label: 'Boolean',
+    color: 'bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300',
+  },
+  mixed: {
+    icon: '◆',
+    label: 'Mixed',
+    color: 'bg-gray-100 text-gray-700 dark:bg-gray-800/50 dark:text-gray-300',
+  },
+};
+
+function TypeBadge({ type }: { type: string }) {
+  const badge = TYPE_BADGES[type] ?? TYPE_BADGES.mixed;
+  return (
+    <span
+      className={`inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[9px] font-medium ${badge.color}`}
+    >
+      <span>{badge.icon}</span>
+      <span>{badge.label}</span>
+    </span>
+  );
+}
+
+function StatCard({ label, value }: { label: string; value: string | number }) {
+  return (
+    <div className="flex flex-col rounded-md bg-secondary/50 px-2.5 py-1.5">
+      <span className="text-[9px] font-medium uppercase tracking-wider text-muted-foreground">
+        {label}
+      </span>
+      <span className="text-sm font-semibold tabular-nums text-foreground">
+        {typeof value === 'number'
+          ? value.toLocaleString(undefined, { maximumFractionDigits: 2 })
+          : value}
+      </span>
+    </div>
+  );
+}
+
+interface TabularPreviewProps {
+  rows: Record<string, any>[];
+  columns?: ColumnMeta[];
+  maxPreviewRows?: number;
+  maxPreviewColumns?: number;
+}
+
+export function TabularPreview({
+  rows,
+  columns: providedColumns,
+  maxPreviewRows = 8,
+  maxPreviewColumns = 10,
+}: TabularPreviewProps) {
+  // Auto-detect columns if not provided
+  const columnNames = useMemo(() => {
+    if (providedColumns) return providedColumns.map((c) => c.name);
+    if (rows.length > 0) return Object.keys(rows[0]);
+    return [];
+  }, [providedColumns, rows]);
+
+  const columnMeta = useMemo(() => {
+    if (providedColumns) return providedColumns;
+    // Quick type detection for preview
+    return columnNames.map((name) => {
+      const vals = rows.slice(0, 20).map((r) => r[name]);
+      const nonNull = vals.filter((v) => v != null && v !== '');
+      const allNum = nonNull.length > 0 && nonNull.every((v) => !isNaN(Number(v)));
+      return {
+        name,
+        type: allNum ? 'number' : 'string',
+        nullCount: vals.length - nonNull.length,
+        uniqueCount: new Set(nonNull.map(String)).size,
+      } as ColumnMeta;
+    });
+  }, [providedColumns, columnNames, rows]);
+
+  // Numeric columns with stats
+  const numericStats = useMemo(() => {
+    return columnMeta.filter((c) => c.type === 'number' && c.stats).slice(0, 4);
+  }, [columnMeta]);
+
+  const previewRows = rows.slice(0, maxPreviewRows);
+  const previewColumnNames = columnNames.slice(0, maxPreviewColumns);
+  const previewColumnMeta = columnMeta.slice(0, maxPreviewColumns);
+  const hasMoreColumns = columnNames.length > maxPreviewColumns;
+
+  if (rows.length === 0 || columnNames.length === 0) {
+    return (
+      <div className="rounded-lg border border-border/60 bg-card px-4 py-6 text-center text-xs text-muted-foreground">
+        No data to preview
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {/* Column type badges */}
+      <div className="flex flex-wrap gap-1.5">
+        {previewColumnMeta.map((col) => (
+          <div
+            key={col.name}
+            className="flex items-center gap-1 rounded-md border border-border/40 bg-card px-2 py-1 text-xs"
+          >
+            <span className="font-medium text-foreground">{col.name}</span>
+            <TypeBadge type={col.type} />
+          </div>
+        ))}
+        {hasMoreColumns && (
+          <div className="flex items-center gap-1 rounded-md border border-border/40 bg-card px-2 py-1 text-xs">
+            <span className="font-medium text-muted-foreground">
+              ... (+ {columnNames.length - maxPreviewColumns} more)
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Summary stats for numeric columns */}
+      {numericStats.length > 0 && (
+        <div className="space-y-2">
+          {numericStats.map((col) => (
+            <div key={col.name}>
+              <div className="mb-1 text-[10px] font-medium text-muted-foreground">{col.name}</div>
+              <div className="flex flex-wrap gap-1.5">
+                {col.stats && (
+                  <>
+                    <StatCard label="Min" value={col.stats.min} />
+                    <StatCard label="Max" value={col.stats.max} />
+                    <StatCard label="Mean" value={col.stats.mean} />
+                    <StatCard label="Median" value={col.stats.median} />
+                  </>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Data preview table */}
+      <div className="overflow-hidden rounded-lg border border-border/60">
+        <div className="overflow-x-auto [&::-webkit-scrollbar]:hidden">
+          <table className="w-full text-left text-xs">
+            <thead>
+              <tr className="border-b border-border/40 bg-secondary/30">
+                {previewColumnNames.map((col) => (
+                  <th
+                    key={col}
+                    className="whitespace-nowrap px-2.5 py-2 font-medium text-muted-foreground"
+                  >
+                    {col}
+                  </th>
+                ))}
+                {hasMoreColumns && (
+                  <th className="whitespace-nowrap px-2.5 py-2 font-medium text-muted-foreground">
+                    ...
+                  </th>
+                )}
+              </tr>
+            </thead>
+            <tbody>
+              {previewRows.map((row, i) => (
+                <tr key={i} className="border-b border-border/20 last:border-0">
+                  {previewColumnNames.map((col) => (
+                    <td
+                      key={col}
+                      className="max-w-37.5 truncate whitespace-nowrap px-2.5 py-1.5 tabular-nums text-foreground"
+                      title={String(row[col] ?? '')}
+                    >
+                      {row[col] === null || row[col] === undefined ? '—' : String(row[col])}
+                    </td>
+                  ))}
+                  {hasMoreColumns && <td className="px-2.5 py-1.5 text-muted-foreground">...</td>}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        {rows.length > maxPreviewRows && (
+          <div className="border-t border-border/40 px-3 py-1.5 text-center text-[10px] text-muted-foreground">
+            Showing {maxPreviewRows} of {rows.length} rows
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/data/tool-indexing-dialog.tsx

@@ -0,0 +1,210 @@
+'use client';
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/dialog';
+import { Button } from '@larkup/workspace-ui/button';
+import { Switch } from '../ui/switch';
+import { Textarea } from '../ui/textarea';
+import { calculateToolIndexingEstimate } from '../../lib/media/tool-indexing-estimate';
+
+export type ToolIndexingField = {
+  key: string;
+  type: 'textarea' | 'select' | 'checkbox';
+  label: string;
+  description?: string;
+  placeholder?: string;
+  defaultValue?: string | boolean;
+  options?: Array<{
+    label: string;
+    value: string;
+    description?: string;
+    setValues?: Record<string, string | boolean>;
+  }>;
+  requiredWhen?: { field: string; equals: string | boolean };
+};
+
+export type ToolIndexingSurface = {
+  id: string;
+  slot: 'data-indexing';
+  title: string;
+  description?: string;
+  appliesTo: Array<'image' | 'video' | 'audio'>;
+  form: { submitLabel?: string; fields: ToolIndexingField[] };
+  estimate?: {
+    modeField: string;
+    variants: Array<{
+      value: string;
+      analyzedFramesPerSourceMinute: number;
+      ocrFramesPerSourceMinute: number;
+      processingSecondsPerSourceMinute: number;
+      maxProcessingSecondsPerSourceMinute?: number;
+      fixedOverheadSeconds?: number;
+      maxFixedOverheadSeconds?: number;
+      creditsPerSourceMinute: number;
+    }>;
+  };
+};
+
+export function defaultToolIndexingValues(surface: ToolIndexingSurface) {
+  return Object.fromEntries(
+    surface.form.fields.map((field) => [
+      field.key,
+      field.defaultValue ?? (field.type === 'checkbox' ? false : ''),
+    ]),
+  ) as Record<string, string | boolean>;
+}
+
+export function ToolIndexingDialog({
+  surface,
+  open,
+  values,
+  submitting,
+  sourceDurationSecs,
+  onOpenChange,
+  onChange,
+  onConfirm,
+}: {
+  surface: ToolIndexingSurface | null;
+  open: boolean;
+  values: Record<string, string | boolean>;
+  submitting: boolean;
+  sourceDurationSecs?: number;
+  onOpenChange: (open: boolean) => void;
+  onChange: (key: string, value: string | boolean) => void;
+  onConfirm: () => void;
+}) {
+  if (!surface) return null;
+  const estimate = surface.estimate?.variants.find(
+    (variant) => values[surface.estimate?.modeField ?? ''] === variant.value,
+  );
+  const calculatedEstimate = calculateToolIndexingEstimate(estimate, sourceDurationSecs);
+  const incompleteRequiredField = surface.form.fields.some((field) => {
+    if (!field.requiredWhen) return false;
+    return (
+      values[field.requiredWhen.field] === field.requiredWhen.equals && values[field.key] !== true
+    );
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-xl">
+        <DialogHeader>
+          <DialogTitle>{surface.title}</DialogTitle>
+        </DialogHeader>
+        {surface.description && (
+          <p className="text-sm text-muted-foreground">{surface.description}</p>
+        )}
+        {estimate && (
+          <div className="grid grid-cols-2 gap-px overflow-hidden rounded-lg border bg-border text-xs">
+            <EstimateMetric
+              label="Typical range"
+              value={`~${calculatedEstimate?.minimumMinutes}${
+                calculatedEstimate?.maximumMinutes !== calculatedEstimate?.minimumMinutes
+                  ? `–${calculatedEstimate?.maximumMinutes}`
+                  : ''
+              } min`}
+            />
+            <EstimateMetric label="Estimated credits" value={`~${calculatedEstimate?.credits}`} />
+          </div>
+        )}
+        {estimate?.fixedOverheadSeconds && (
+          <p className="text-xs text-muted-foreground">
+            Includes typical cloud startup. Worker progress replaces this range after the job
+            starts; queued capacity or provider retries can take longer.
+          </p>
+        )}
+        <div className="space-y-4 py-1">
+          {surface.form.fields.map((field) => {
+            const value = values[field.key];
+            const selectedOption = field.options?.find((option) => option.value === value);
+            if (field.type === 'checkbox') {
+              return (
+                <div
+                  key={field.key}
+                  className="flex items-start justify-between gap-4 rounded-lg border p-3"
+                >
+                  <div>
+                    <p className="text-sm font-medium">{field.label}</p>
+                    {field.description && (
+                      <p className="mt-1 text-xs text-muted-foreground">{field.description}</p>
+                    )}
+                  </div>
+                  <Switch
+                    checked={value === true}
+                    onCheckedChange={(checked) => onChange(field.key, checked)}
+                    aria-label={field.label}
+                  />
+                </div>
+              );
+            }
+            return (
+              <div key={field.key} className="space-y-1.5">
+                <label className="text-xs font-medium" htmlFor={`${surface.id}-${field.key}`}>
+                  {field.label}
+                </label>
+                {field.description && (
+                  <p className="text-xs text-muted-foreground">{field.description}</p>
+                )}
+                {field.type === 'select' ? (
+                  <>
+                    <select
+                      id={`${surface.id}-${field.key}`}
+                      value={String(value ?? '')}
+                      onChange={(event) => {
+                        const nextValue = event.target.value;
+                        const option = field.options?.find((item) => item.value === nextValue);
+                        onChange(field.key, nextValue);
+                        for (const [key, companionValue] of Object.entries(
+                          option?.setValues ?? {},
+                        )) {
+                          onChange(key, companionValue);
+                        }
+                      }}
+                      className="h-9 w-full rounded-md border border-input bg-background px-3 text-sm"
+                    >
+                      {field.options?.map((option) => (
+                        <option key={option.value} value={option.value}>
+                          {option.label}
+                        </option>
+                      ))}
+                    </select>
+                    {selectedOption?.description && (
+                      <p className="text-xs text-muted-foreground">{selectedOption.description}</p>
+                    )}
+                  </>
+                ) : (
+                  <Textarea
+                    id={`${surface.id}-${field.key}`}
+                    value={String(value ?? '')}
+                    onChange={(event) => onChange(field.key, event.target.value)}
+                    placeholder={field.placeholder}
+                    rows={5}
+                    className="min-h-28 resize-y bg-white dark:bg-background"
+                  />
+                )}
+              </div>
+            );
+          })}
+        </div>
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={onConfirm} disabled={submitting || incompleteRequiredField}>
+            {surface.form.submitLabel ?? 'Index media'}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function EstimateMetric({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="bg-muted/20 px-3 py-2.5">
+      <p className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+        {label}
+      </p>
+      <p className="mt-1 font-medium tabular-nums text-foreground">{value}</p>
+    </div>
+  );
+}