@larkup/workspace-app 0.0.0-stage → 0.1.0

package/src/components/ui/tabs.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@larkup/workspace-app/lib/utils';
+
+function Tabs({ className, orientation = 'horizontal', ...props }: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn('group/tabs flex gap-2 data-horizontal:flex-col', className)}
+      {...props}
+    />
+  );
+}
+
+const tabsListVariants = cva(
+  'group/tabs-list inline-flex w-fit items-center justify-center rounded-[5px] h-11! border bg-white p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-muted',
+        line: 'gap-1 bg-transparent',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function TabsList({
+  className,
+  variant = 'default',
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-lg border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active: group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        'group-data-[variant=line]/tabs-list:border-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:border-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
+        'data-active:bg-muted/70 data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground',
+        'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:-bottom-1.25 group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
+        'border shadow-none! data-active:border-border cursor-pointer',
+        // "border shadow-none!",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn('flex-1 text-sm outline-none', className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/src/components/ui/textarea.tsx

@@ -0,0 +1 @@
+export { Textarea } from '@larkup/workspace-ui';

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
+
+import { cn } from '../../lib/utils';
+
+function TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />;
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  side = 'top',
+  sideOffset = 4,
+  align = 'center',
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            'z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/hooks/use-copy-to-clipboard.ts

@@ -0,0 +1,25 @@
+'use client';
+
+import { useCallback, useRef, useState } from 'react';
+
+export function useCopyToClipboard(resetDelay = 2000) {
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const copy = useCallback(
+    async (text: string) => {
+      if (!text) return;
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => setCopied(false), resetDelay);
+      } catch (err) {
+        console.error('Copy to clipboard failed', err);
+      }
+    },
+    [resetDelay],
+  );
+
+  return { copied, copy };
+}

package/src/hooks/use-integration-auth.ts

@@ -0,0 +1,39 @@
+import { integrationAuthorizationUrl } from '../host';
+import { useEffect } from 'react';
+
+interface Options {
+  onSuccess?: (integration: string) => void;
+  onError?: (error: string, integration: string) => void;
+}
+
+/** Opens the shared OAuth proxy for a registry integration. */
+export function useIntegrationAuth({ onSuccess, onError }: Options = {}) {
+  useEffect(() => {
+    const onMessage = (event: MessageEvent) => {
+      if (
+        event.origin !== window.location.origin ||
+        event.data?.type !== 'integration_oauth' ||
+        typeof event.data.integration !== 'string'
+      )
+        return;
+      event.data.status === 'connected'
+        ? onSuccess?.(event.data.integration)
+        : onError?.('Failed to connect integration', event.data.integration);
+    };
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, [onError, onSuccess]);
+
+  function connect(integration: string) {
+    const proxyUrl =
+      process.env.NEXT_PUBLIC_INTEGRATIONS_PROXY_URL || 'https://larkup-proxy.vercel.app/api/oauth';
+    const callback = `${window.location.origin}/api/integrations/${integration}/callback`;
+    window.open(
+      integrationAuthorizationUrl(integration) ??
+        `${proxyUrl}/${integration}?redirect_to=${encodeURIComponent(callback)}`,
+      `${integration}-connection`,
+      'width=600,height=800,toolbar=0,scrollbars=1,status=1,resizable=1',
+    );
+  }
+  return { connect };
+}

package/src/hooks/use-live-media-progress.ts

@@ -0,0 +1,71 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import {
+  advanceMediaProcessingProgress,
+  isMediaStepTelemetryStale,
+  primaryRunningMediaStep,
+  smoothMediaProcessingProgress,
+  type MediaProgressStep,
+} from '../lib/media/progress';
+
+type LiveMediaAsset = {
+  id: string;
+  processingProgress?: number;
+  processingStatus: string;
+  processingPaused?: boolean;
+  processingStartedAt?: string;
+  durationSecs?: number;
+  processingSteps?: MediaProgressStep[];
+};
+
+/** Smooths sparse worker updates without crossing the active stage boundary. */
+export function useLiveMediaProgress(asset: LiveMediaAsset): number {
+  const latestAsset = useRef(asset);
+  latestAsset.current = asset;
+  const attempt = `${asset.id}:${asset.processingStartedAt ?? ''}`;
+  const previousAttempt = useRef(attempt);
+  const [displayed, setDisplayed] = useState(() =>
+    asset.processingStatus === 'completed'
+      ? 100
+      : Math.max(0, Math.min(100, asset.processingProgress ?? 0)),
+  );
+
+  if (previousAttempt.current !== attempt) {
+    previousAttempt.current = attempt;
+  }
+
+  useEffect(() => {
+    setDisplayed(
+      asset.processingStatus === 'completed'
+        ? 100
+        : Math.max(0, Math.min(100, asset.processingProgress ?? 0)),
+    );
+  }, [attempt]);
+
+  useEffect(() => {
+    if (asset.processingStatus === 'completed') {
+      setDisplayed(100);
+      return;
+    }
+    if (asset.processingStatus !== 'processing' || asset.processingPaused) return;
+
+    let previousTick = Date.now();
+    const tick = () => {
+      const now = Date.now();
+      const elapsedMs = now - previousTick;
+      previousTick = now;
+      const currentAsset = latestAsset.current;
+      const confirmed = smoothMediaProcessingProgress(currentAsset, now);
+      const activeStep = primaryRunningMediaStep(currentAsset.processingSteps);
+      const workerActive = Boolean(activeStep && !isMediaStepTelemetryStale(activeStep, now));
+      setDisplayed((current) =>
+        advanceMediaProcessingProgress(current, confirmed, elapsedMs, workerActive),
+      );
+    };
+    const timer = window.setInterval(tick, 250);
+    return () => window.clearInterval(timer);
+  }, [asset.processingPaused, asset.processingStatus, attempt]);
+
+  return displayed;
+}

package/src/hooks/use-notion-auth.ts

@@ -0,0 +1,66 @@
+import { integrationAuthorizationUrl } from '../host';
+import { useEffect } from 'react';
+
+interface UseNotionAuthOptions {
+  onSuccess?: () => void;
+  onError?: (error: string) => void;
+}
+
+export function useNotionAuth({ onSuccess, onError }: UseNotionAuthOptions = {}) {
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return;
+
+      if (event.data?.type === 'notion_oauth') {
+        if (event.data.status === 'connected') {
+          onSuccess?.();
+        } else if (event.data.status === 'error') {
+          onError?.(event.data.error || 'Failed to connect to Notion');
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [onSuccess, onError]);
+
+  const connectToNotion = (onClosePopup?: () => void) => {
+    const customAuthUrl =
+      process.env.NEXT_PUBLIC_NOTION_AUTHORIZATION_URL ||
+      `${
+        process.env.NEXT_PUBLIC_INTEGRATIONS_PROXY_URL ||
+        'https://larkup-proxy.vercel.app/api/oauth'
+      }/notion`;
+
+    const redirectUri = `${window.location.origin}/api/integrations/notion/callback`;
+    const authUrl =
+      integrationAuthorizationUrl('notion') ??
+      `${customAuthUrl}?redirect_to=${encodeURIComponent(redirectUri)}`;
+
+    const width = 600;
+    const height = 800;
+    const left = window.innerWidth / 2 - window.innerWidth / 2 + window.screenX; // Wait, window.innerWidth / 2 - width / 2
+    const top = window.innerHeight / 2 - window.innerHeight / 2 + window.screenY;
+
+    // fixing the left and top calculations:
+    const calculatedLeft = window.innerWidth / 2 - width / 2 + window.screenX;
+    const calculatedTop = window.innerHeight / 2 - height / 2 + window.screenY;
+
+    const popup = window.open(
+      authUrl,
+      'Notion Connection',
+      `width=${width},height=${height},left=${calculatedLeft},top=${calculatedTop},toolbar=0,scrollbars=1,status=1,resizable=1`,
+    );
+
+    if (popup) {
+      const timer = setInterval(() => {
+        if (popup.closed) {
+          clearInterval(timer);
+          onClosePopup?.();
+        }
+      }, 500);
+    }
+  };
+
+  return { connectToNotion };
+}

package/src/host.ts

@@ -0,0 +1,55 @@
+export interface WorkspaceCapabilities {
+  sandboxProviders?: string[];
+  vectorStores?: string[];
+  managedStorage?: boolean;
+  durableDocumentSessions?: boolean;
+}
+let capabilities: WorkspaceCapabilities = {};
+export function workspaceCapabilities(): WorkspaceCapabilities {
+  return capabilities;
+}
+/** Configure once in a browser host; resolve the active project per request. */
+let hostFetch: typeof globalThis.fetch | undefined;
+let resolveApiBase: (() => string) | undefined;
+let resolveIntegrationAuthorization: ((integration: string) => string) | undefined;
+let resolveStorageScope: (() => string) | undefined;
+export function configureWorkspaceHost(options: {
+  capabilities?: WorkspaceCapabilities;
+  apiBase: () => string;
+  storageScope: () => string;
+  integrationAuthorizationUrl?: (integration: string) => string;
+  fetch?: typeof globalThis.fetch;
+}) {
+  if (typeof window === 'undefined') return;
+  capabilities = options.capabilities ?? {};
+  resolveApiBase = options.apiBase;
+  hostFetch = options.fetch;
+  resolveStorageScope = options.storageScope;
+  resolveIntegrationAuthorization = options.integrationAuthorizationUrl;
+}
+export function workspaceUrl(url: string): string {
+  if (!url.startsWith('/api/')) return url;
+  const base = resolveApiBase?.();
+  if (!base) return url;
+  const normalizedBase = base.replace(/\/$/, '');
+  // Server-returned media URLs may already be scoped by the browser host.
+  // Keep this helper idempotent so shared previews work in both Local and
+  // Cloud without either UI knowing the other's route prefix.
+  if (url === normalizedBase || url.startsWith(`${normalizedBase}/`)) return url;
+  return normalizedBase + url.slice(4);
+}
+
+export function workspaceStorageScope(): string {
+  return resolveStorageScope?.() ?? '';
+}
+
+export function integrationAuthorizationUrl(integration: string): string | undefined {
+  return resolveIntegrationAuthorization?.(integration);
+}
+
+export const workspaceFetch: typeof globalThis.fetch = (input, init) =>
+  (hostFetch ?? globalThis.fetch)(input, init);
+export function workspaceStorageKey(key: string): string {
+  const scope = workspaceStorageScope();
+  return scope ? `${scope}:${key}` : key;
+}

package/src/lib/browser-cache.ts

@@ -0,0 +1,17 @@
+export const SCRAPE_RECENT_QUERIES_STORAGE_KEY = 'scrape_recent_queries';
+export const MEDIA_RECENT_URLS_STORAGE_KEY = 'media_recent_urls';
+export const RECENT_ADD_HISTORY_CLEARED_EVENT = 'larkup:recent-add-history-cleared';
+
+export const RECENT_ADD_HISTORY_STORAGE_KEYS = [
+  SCRAPE_RECENT_QUERIES_STORAGE_KEY,
+  MEDIA_RECENT_URLS_STORAGE_KEY,
+] as const;
+
+/** Clear disposable Add-page history and notify panels already mounted in this browser tab. */
+export function clearRecentAddHistory(
+  storage: Pick<Storage, 'removeItem'>,
+  eventTarget?: Pick<EventTarget, 'dispatchEvent'>,
+) {
+  for (const key of RECENT_ADD_HISTORY_STORAGE_KEYS) storage.removeItem(key);
+  eventTarget?.dispatchEvent(new Event(RECENT_ADD_HISTORY_CLEARED_EVENT));
+}

package/src/lib/chat/chart-config.ts

@@ -0,0 +1 @@
+export * from '@larkup/core/chart-config';

package/src/lib/chat/data-export.ts

@@ -0,0 +1 @@
+export * from '@larkup/core/data-export';

package/src/lib/chat/live-tool-progress.ts

@@ -0,0 +1,69 @@
+export type LiveToolActivity = {
+  toolCallId?: string;
+  phase?: 'waking-up' | 'analyzing';
+  percent: number;
+  label: string;
+  message: string;
+  startedAt?: string;
+  updatedAt?: string;
+};
+
+/**
+ * A worker reports 100% when *its* pass is done, but the chat turn is not:
+ * the evidence still has to be validated, stored, activated, and re-queried,
+ * and a second range may follow. Showing a full bar through all of that reads
+ * as a hang, so a running tool call never displays a completed bar -- the row
+ * disappears when the call actually returns.
+ */
+export const RUNNING_PROGRESS_CEILING = 97;
+
+/** Past this the bar stops claiming a position and just shows motion. */
+export const INDETERMINATE_THRESHOLD = 90;
+
+/** A tool can be working through local indexed context before a worker exists. */
+export const PENDING_PROGRESS_CEILING = 82;
+
+/**
+ * Give every executing tool visible motion immediately, even before it has a
+ * worker percentage to report. This is deliberately time-based UX, not a
+ * completion estimate; authoritative activity replaces it as soon as one is
+ * available and only the tool result removes the row.
+ */
+export function smoothPendingToolProgress(startedAt: number, now = Date.now()) {
+  const elapsedMs = Math.max(0, now - startedAt);
+  const initial = 4;
+  const estimated =
+    initial + (PENDING_PROGRESS_CEILING - initial) * (1 - Math.exp(-elapsedMs / 55_000));
+  return Math.max(initial, Math.min(PENDING_PROGRESS_CEILING, estimated));
+}
+
+/**
+ * Cloud workers publish real stage boundaries, not a progress event for every
+ * second of GPU work. Keep the bar alive between those events without
+ * pretending the job is complete: the estimate asymptotically approaches a
+ * pre-completion ceiling and an actual worker update always wins.
+ */
+export function smoothLiveToolProgress(activity: LiveToolActivity, now = Date.now()) {
+  const reported = Math.max(0, Math.min(RUNNING_PROGRESS_CEILING, activity.percent));
+  const changedAt = Date.parse(activity.updatedAt ?? activity.startedAt ?? '');
+  if (!Number.isFinite(changedAt)) return reported;
+  const elapsedMs = Math.max(0, now - changedAt);
+  const ceiling = activity.phase === 'waking-up' ? 28 : RUNNING_PROGRESS_CEILING;
+  if (reported >= ceiling) return reported;
+  const estimated = reported + (ceiling - reported) * (1 - Math.exp(-elapsedMs / 75_000));
+  return Math.round(Math.max(reported, Math.min(ceiling, estimated)));
+}
+
+/** A consecutive bounded source read belongs to the same chat tool call. */
+export function keepToolProgressMonotonic(previous: number | undefined, current: number) {
+  return Math.min(RUNNING_PROGRESS_CEILING, Math.max(previous ?? 0, current));
+}
+
+/**
+ * Near the ceiling the remaining work has no measurable position -- the bar
+ * would sit still while real work continues. Swing it instead: motion without
+ * a false claim about how much is left.
+ */
+export function isIndeterminateProgress(percent: number) {
+  return percent >= INDETERMINATE_THRESHOLD;
+}

package/src/lib/chat/message-feedback.ts

@@ -0,0 +1 @@
+export * from '@larkup/core/message-feedback';

package/src/lib/chat/table-presentation.ts

@@ -0,0 +1 @@
+export * from '@larkup/core/table-presentation';

package/src/lib/chat/tool-output.ts

@@ -0,0 +1,14 @@
+/** Decode the transport wrappers AI providers may use for structured tool output. */
+export function decodeToolOutput(value: unknown): unknown {
+  if (typeof value === 'string') {
+    try {
+      return decodeToolOutput(JSON.parse(value));
+    } catch {
+      return undefined;
+    }
+  }
+  if (value && typeof value === 'object' && (value as { type?: string }).type === 'json') {
+    return decodeToolOutput((value as { value?: unknown }).value);
+  }
+  return value && typeof value === 'object' ? value : undefined;
+}

package/src/lib/chat-supporting-clip.ts

@@ -0,0 +1,16 @@
+/**
+ * Returns true only for the first assistant response in a chat transcript,
+ * so its first supporting clip (if a video search produced one) auto-opens
+ * instead of staying collapsed behind a "Watch supporting clip" click. This
+ * has no memory across reloads (no sessionStorage) — the first message's
+ * clip auto-opens the same way every time the chat is loaded.
+ */
+export function shouldAutoOpenSupportingClip(
+  messages: readonly { role: string }[],
+  messageIndex: number,
+): boolean {
+  return (
+    messages[messageIndex]?.role === 'assistant' &&
+    messageIndex === messages.findIndex((message) => message.role === 'assistant')
+  );
+}

package/src/lib/constants/stores.ts

@@ -0,0 +1,12 @@
+export type StoreMeta = { iconSrc: string; pillBg: string };
+
+export const STORE_META: Record<string, StoreMeta> = {
+  lancedb: {
+    iconSrc: '/icons/lancedb2.png',
+    pillBg: 'bg-yellow-50 dark:bg-yellow-950/40',
+  },
+  pinecone: {
+    iconSrc: '/icons/pinecone.png',
+    pillBg: 'bg-green-50 dark:bg-green-950/40',
+  },
+};