larkup 0.4.12 → 0.4.14

package/.next/standalone/apps/web/components/ui/switch.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+
+import { cn } from "@/lib/utils";
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2  aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };

package/.next/standalone/apps/web/components/ui/table.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/15 has-aria-expanded:bg-muted/15 data-[state=selected]:bg-muted/30",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground has-[[role=checkbox]]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap has-[[role=checkbox]]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

package/.next/standalone/apps/web/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 '@/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/.next/standalone/apps/web/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        'flex field-sizing-content  min-h-16 w-full rounded-lg border border-input bg-background px-2.5 py-2 text-base transition-colors outline-none! placeholder:text-muted-foreground/50 placeholder:text-xs disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50  md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

package/.next/standalone/apps/web/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/.next/standalone/apps/web/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/.next/standalone/apps/web/hooks/use-channel-oauth.ts

@@ -0,0 +1,42 @@
+import { useEffect, useRef } from 'react';
+
+export type ChannelOAuthResult =
+  | { channelId: string; status: 'connected'; fields: Record<string, string>; team?: string }
+  | { channelId: string; status: 'error'; error: string };
+
+interface Options {
+  onConnected?: (result: Extract<ChannelOAuthResult, { status: 'connected' }>) => void;
+  onError?: (error: string) => void;
+}
+
+/**
+ * Opens a channel's one-click OAuth install
+ */
+export function useChannelOAuth({ onConnected, onError }: Options = {}) {
+  const handlers = useRef({ onConnected, onError });
+  useEffect(() => {
+    handlers.current = { onConnected, onError };
+  });
+
+  useEffect(() => {
+    function onMessage(event: MessageEvent) {
+      if (event.origin !== window.location.origin || event.data?.type !== 'channel_oauth') return;
+      const result = event.data as ChannelOAuthResult;
+      result.status === 'connected'
+        ? handlers.current.onConnected?.(result)
+        : handlers.current.onError?.(result.error);
+    }
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, []);
+
+  function connect(startUrl: string) {
+    window.open(
+      startUrl,
+      'channel-oauth',
+      'width=600,height=800,toolbar=0,scrollbars=1,status=1,resizable=1',
+    );
+  }
+
+  return { connect };
+}

package/.next/standalone/apps/web/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/.next/standalone/apps/web/hooks/use-integration-auth.ts

@@ -0,0 +1,37 @@
+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(
+      `${proxyUrl}/${integration}?redirect_to=${encodeURIComponent(callback)}`,
+      `${integration}-connection`,
+      'width=600,height=800,toolbar=0,scrollbars=1,status=1,resizable=1',
+    );
+  }
+  return { connect };
+}

package/.next/standalone/apps/web/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/.next/standalone/apps/web/hooks/use-notion-auth.ts

@@ -0,0 +1,63 @@
+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 = `${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/.next/standalone/apps/web/lib/browser-cache.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it, vi } from 'vitest';
+import {
+  clearRecentAddHistory,
+  MEDIA_RECENT_URLS_STORAGE_KEY,
+  RECENT_ADD_HISTORY_CLEARED_EVENT,
+  SCRAPE_RECENT_QUERIES_STORAGE_KEY,
+} from './browser-cache';
+
+describe('clearRecentAddHistory', () => {
+  it('removes website and media history without clearing unrelated browser settings', () => {
+    const removeItem = vi.fn();
+
+    clearRecentAddHistory({ removeItem });
+
+    expect(removeItem.mock.calls).toEqual([
+      [SCRAPE_RECENT_QUERIES_STORAGE_KEY],
+      [MEDIA_RECENT_URLS_STORAGE_KEY],
+    ]);
+    expect(removeItem).not.toHaveBeenCalledWith('app-theme');
+    expect(removeItem).not.toHaveBeenCalledWith('larkup-server-api-key');
+  });
+
+  it('notifies mounted Add-page panels after clearing the stored values', () => {
+    const dispatchEvent = vi.fn();
+
+    clearRecentAddHistory({ removeItem: vi.fn() }, { dispatchEvent });
+
+    expect(dispatchEvent).toHaveBeenCalledOnce();
+    expect(dispatchEvent.mock.calls[0][0]).toBeInstanceOf(Event);
+    expect(dispatchEvent.mock.calls[0][0].type).toBe(RECENT_ADD_HISTORY_CLEARED_EVENT);
+  });
+});

package/.next/standalone/apps/web/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/.next/standalone/apps/web/lib/cache-size.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest';
+import { formatCacheBytes } from './cache-size';
+
+describe('cache size formatting', () => {
+  it('uses compact kilobytes for small non-empty caches', () => {
+    expect(formatCacheBytes(447)).toBe('0.4 KB');
+    expect(formatCacheBytes(46)).toBe('< 0.1 KB');
+  });
+
+  it('keeps empty and larger cache sizes clear', () => {
+    expect(formatCacheBytes(0)).toBe('0 B');
+    expect(formatCacheBytes(1024)).toBe('1.0 KB');
+    expect(formatCacheBytes(5 * 1024 ** 3)).toBe('5.0 GB');
+  });
+});

package/.next/standalone/apps/web/lib/cache-size.ts

@@ -0,0 +1,11 @@
+export function formatCacheBytes(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  if (bytes < 1024) {
+    const kilobytes = bytes / 1024;
+    return kilobytes < 0.05 ? '< 0.1 KB' : `${kilobytes.toFixed(1)} KB`;
+  }
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const unit = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  const value = bytes / 1024 ** unit;
+  return `${value.toFixed(value >= 10 ? 0 : 1)} ${units[unit]}`;
+}