@geminilight/mindos 0.6.72 → 0.6.73

package/_standalone/components/ui/scroll-area.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: ScrollAreaPrimitive.Root.Props) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: ScrollAreaPrimitive.Scrollbar.Props) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-border"
+      />
+    </ScrollAreaPrimitive.Scrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

package/_standalone/components/ui/toggle.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-muted",
+      },
+      size: {
+        default: "h-8 min-w-8 px-2",
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]",
+        lg: "h-9 min-w-9 px-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

package/_standalone/components/walkthrough/WalkthroughOverlay.tsx

@@ -0,0 +1,266 @@
+'use client';
+
+import { useState, useEffect, useCallback, useId } from 'react';
+import { useLocale } from '@/lib/stores/locale-store';
+import { useWalkthrough, useWalkthroughStore } from '@/lib/stores/walkthrough-store';
+import { walkthroughSteps } from './steps';
+import WalkthroughTooltip from './WalkthroughTooltip';
+
+/**
+ * Full-screen overlay with SVG spotlight mask.
+ * Finds the target element via data-walkthrough attribute, measures it,
+ * and cuts a transparent rect into the semi-transparent overlay.
+ */
+export default function WalkthroughOverlay() {
+  const wt = useWalkthrough();
+  const [targetRect, setTargetRect] = useState<DOMRect | null>(null);
+  const [isMobile, setIsMobile] = useState(false);
+  const maskId = useId();
+
+  const step = wt ? walkthroughSteps[wt.currentStep] : null;
+
+  const measureTarget = useCallback(() => {
+    if (!step) return;
+    const el = document.querySelector(`[data-walkthrough="${step.anchor}"]`);
+    if (el) {
+      setTargetRect(el.getBoundingClientRect());
+    } else {
+      setTargetRect(null);
+    }
+  }, [step]);
+
+  useEffect(() => {
+    setIsMobile(window.innerWidth < 768);
+    measureTarget();
+
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768);
+      measureTarget();
+    };
+
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('scroll', measureTarget, true);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('scroll', measureTarget, true);
+    };
+  }, [measureTarget]);
+
+  // Re-measure when step changes
+  useEffect(() => {
+    measureTarget();
+    // Slight delay to account for animations
+    const timer = setTimeout(measureTarget, 100);
+    return () => clearTimeout(timer);
+  }, [wt?.currentStep, measureTarget]);
+
+  // ESC to dismiss — depend on skip only, not the entire context object
+  const skipFn = wt?.skip;
+  useEffect(() => {
+    if (!skipFn) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        skipFn();
+      }
+    };
+    window.addEventListener('keydown', handler, true);
+    return () => window.removeEventListener('keydown', handler, true);
+  }, [skipFn]);
+
+  // If target element doesn't exist (e.g. panel not enabled), auto-skip
+  // after a grace period. Use stable store ref to avoid re-triggering on
+  // every store change (which caused spurious skips during step transitions).
+  const currentStep = wt?.currentStep ?? 0;
+  useEffect(() => {
+    if (!step) return;
+    // Wait 500ms for DOM to settle (sidebar animations, lazy rendering)
+    const timer = setTimeout(() => {
+      const el = document.querySelector(`[data-walkthrough="${step.anchor}"]`);
+      if (!el) {
+        useWalkthroughStore.getState().next();
+      }
+    }, 500);
+    return () => clearTimeout(timer);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentStep]); // Only re-run when step index changes, not on every store update
+
+  // Safety timeout: if overlay stays for 60s without user interaction, auto-dismiss.
+  // Prevents permanently stuck overlay from any unforeseen edge case.
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      useWalkthroughStore.getState().skip();
+    }, 60_000);
+    return () => clearTimeout(timer);
+  }, [currentStep]); // Reset on each step change
+
+  if (!wt || !step) return null;
+
+  // Mobile: bottom sheet instead of spotlight
+  if (isMobile) {
+    return <MobileWalkthroughSheet />;
+  }
+
+  const PAD = 6; // padding around spotlight rect
+  const RADIUS = 8;
+
+  return (
+    <>
+      {/* SVG overlay with spotlight hole */}
+      <svg
+        className="fixed inset-0 z-[100] pointer-events-auto"
+        width="100%"
+        height="100%"
+        onClick={(e) => {
+          // Click outside spotlight → skip
+          if (targetRect) {
+            const x = e.clientX;
+            const y = e.clientY;
+            const inSpotlight =
+              x >= targetRect.left - PAD &&
+              x <= targetRect.right + PAD &&
+              y >= targetRect.top - PAD &&
+              y <= targetRect.bottom + PAD;
+            if (!inSpotlight) {
+              wt.skip();
+            }
+          } else {
+            wt.skip();
+          }
+        }}
+      >
+        <defs>
+          <mask id={maskId}>
+            <rect width="100%" height="100%" fill="white" />
+            {targetRect && (
+              <rect
+                x={targetRect.left - PAD}
+                y={targetRect.top - PAD}
+                width={targetRect.width + PAD * 2}
+                height={targetRect.height + PAD * 2}
+                rx={RADIUS}
+                ry={RADIUS}
+                fill="black"
+              />
+            )}
+          </mask>
+        </defs>
+        <rect
+          width="100%"
+          height="100%"
+          fill="rgba(0, 0, 0, 0.5)"
+          mask={`url(#${maskId})`}
+        />
+      </svg>
+
+      {/* Tooltip — shown when target element found */}
+      {targetRect && (
+        <WalkthroughTooltip
+          stepIndex={wt.currentStep}
+          rect={targetRect}
+          position={step.position}
+        />
+      )}
+
+      {/* Fallback dismiss button — shown when target element NOT found.
+          Without this, user sees dark overlay but no visible UI to dismiss it. */}
+      {!targetRect && (
+        <div className="fixed inset-0 z-[101] flex items-center justify-center pointer-events-none">
+          <button
+            onClick={wt.skip}
+            className="pointer-events-auto px-4 py-2 text-sm rounded-lg font-medium transition-all hover:opacity-90"
+            style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+          >
+            {wt.currentStep === wt.totalSteps - 1 ? '✓' : '→'}
+          </button>
+        </div>
+      )}
+    </>
+  );
+}
+
+/** Mobile fallback: bottom sheet card */
+function MobileWalkthroughSheet() {
+  const wt = useWalkthrough();
+  const { t } = useLocale();
+
+  if (!wt) return null;
+
+  const stepData = t.walkthrough.steps[wt.currentStep] as { title: string; body: string } | undefined;
+  if (!stepData) return null;
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 z-[100] bg-black/40 backdrop-blur-sm"
+        onClick={wt.skip}
+      />
+      {/* Bottom sheet */}
+      <div
+        className="fixed bottom-0 left-0 right-0 z-[101] rounded-t-2xl border-t shadow-lg p-5 pb-8 animate-in slide-in-from-bottom duration-300"
+        style={{ background: 'var(--card)', borderColor: 'var(--border)' }}
+      >
+        {/* Step counter */}
+        <div className="flex items-center gap-2 mb-3">
+          <span
+            className="text-2xs font-mono px-1.5 py-0.5 rounded-full"
+            style={{ background: 'var(--amber-dim)', color: 'var(--amber)' }}
+          >
+            {t.walkthrough.step(wt.currentStep + 1, wt.totalSteps)}
+          </span>
+          {/* Progress dots */}
+          <div className="flex items-center gap-1 ml-auto">
+            {Array.from({ length: wt.totalSteps }, (_, i) => (
+              <div
+                key={i}
+                className="w-1.5 h-1.5 rounded-full"
+                style={{
+                  background: i === wt.currentStep ? 'var(--amber)' : 'var(--border)',
+                }}
+              />
+            ))}
+          </div>
+        </div>
+
+        <h3
+          className="text-base font-semibold mb-1"
+          style={{ color: 'var(--foreground)' }}
+        >
+          {stepData.title}
+        </h3>
+        <p className="text-sm leading-relaxed mb-5" style={{ color: 'var(--muted-foreground)' }}>
+          {stepData.body}
+        </p>
+
+        <div className="flex items-center justify-between">
+          <button
+            onClick={wt.skip}
+            className="text-sm transition-colors hover:opacity-80"
+            style={{ color: 'var(--muted-foreground)' }}
+          >
+            {t.walkthrough.skip}
+          </button>
+          <div className="flex items-center gap-2">
+            {wt.currentStep > 0 && (
+              <button
+                onClick={wt.back}
+                className="text-sm px-3 py-2 rounded-lg transition-colors hover:bg-muted"
+                style={{ color: 'var(--muted-foreground)' }}
+              >
+                {t.walkthrough.back}
+              </button>
+            )}
+            <button
+              onClick={wt.next}
+              className="text-sm px-4 py-2 rounded-lg font-medium transition-all hover:opacity-90"
+              style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+            >
+              {wt.currentStep === wt.totalSteps - 1 ? t.walkthrough.done : t.walkthrough.next}
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/_standalone/components/walkthrough/WalkthroughTooltip.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useLocale } from '@/lib/stores/locale-store';
+import { useWalkthrough } from '@/lib/stores/walkthrough-store';
+
+interface WalkthroughTooltipProps {
+  stepIndex: number;
+  rect: DOMRect;
+  position: 'right' | 'bottom';
+}
+
+export default function WalkthroughTooltip({ stepIndex, rect, position }: WalkthroughTooltipProps) {
+  const wt = useWalkthrough();
+  const { t } = useLocale();
+
+  // Track viewport dimensions in state to avoid stale values and SSR hazard
+  const [viewport, setViewport] = useState({ width: 1024, height: 768 });
+  useEffect(() => {
+    const update = () => setViewport({ width: window.innerWidth, height: window.innerHeight });
+    update();
+    window.addEventListener('resize', update);
+    return () => window.removeEventListener('resize', update);
+  }, []);
+
+  if (!wt) return null;
+
+  const stepData = t.walkthrough.steps[stepIndex] as { title: string; body: string } | undefined;
+  if (!stepData) return null;
+
+  // Calculate tooltip position
+  const GAP = 12;
+  let top: number;
+  let left: number;
+
+  if (position === 'right') {
+    top = rect.top + rect.height / 2;
+    left = rect.right + GAP;
+  } else {
+    top = rect.bottom + GAP;
+    left = rect.left + rect.width / 2;
+  }
+
+  // Clamp to viewport
+  const maxLeft = viewport.width - 320;
+  const maxTop = viewport.height - 200;
+  left = Math.min(left, maxLeft);
+  top = Math.min(top, maxTop);
+  top = Math.max(top, 8);
+
+  return (
+    <div
+      className={`fixed z-[102] w-[280px] rounded-xl border shadow-lg animate-in fade-in duration-200 ${
+        position === 'right' ? 'slide-in-from-left-2' : 'slide-in-from-top-2'
+      }`}
+      style={{
+        top: `${top}px`,
+        left: `${left}px`,
+        transform: position === 'right' ? 'translateY(-50%)' : 'translateX(-50%)',
+        background: 'var(--card)',
+        borderColor: 'var(--amber)',
+      }}
+    >
+      <div className="p-4">
+        {/* Step indicator */}
+        <div className="flex items-center gap-2 mb-2">
+          <span
+            className="text-2xs font-mono px-1.5 py-0.5 rounded-full"
+            style={{ background: 'var(--amber-dim)', color: 'var(--amber)' }}
+          >
+            {t.walkthrough.step(stepIndex + 1, wt.totalSteps)}
+          </span>
+        </div>
+
+        {/* Content */}
+        <h3
+          className="text-sm font-semibold mb-1"
+          style={{ color: 'var(--foreground)' }}
+        >
+          {stepData.title}
+        </h3>
+        <p className="text-xs leading-relaxed" style={{ color: 'var(--muted-foreground)' }}>
+          {stepData.body}
+        </p>
+
+        {/* Actions */}
+        <div className="flex items-center justify-between mt-4 pt-3" style={{ borderTop: '1px solid var(--border)' }}>
+          <button
+            onClick={wt.skip}
+            className="text-xs transition-colors hover:opacity-80"
+            style={{ color: 'var(--muted-foreground)' }}
+          >
+            {t.walkthrough.skip}
+          </button>
+          <div className="flex items-center gap-2">
+            {stepIndex > 0 && (
+              <button
+                onClick={wt.back}
+                className="text-xs px-2.5 py-1 rounded-lg transition-colors hover:bg-muted"
+                style={{ color: 'var(--muted-foreground)' }}
+              >
+                {t.walkthrough.back}
+              </button>
+            )}
+            <button
+              onClick={wt.next}
+              className="text-xs px-3 py-1.5 rounded-lg font-medium transition-all hover:opacity-90"
+              style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+            >
+              {stepIndex === wt.totalSteps - 1 ? t.walkthrough.done : t.walkthrough.next}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Progress dots */}
+      <div className="flex items-center justify-center gap-1.5 pb-3">
+        {Array.from({ length: wt.totalSteps }, (_, i) => (
+          <div
+            key={i}
+            className="w-1.5 h-1.5 rounded-full transition-all duration-200"
+            style={{
+              background: i === stepIndex ? 'var(--amber)' : 'var(--border)',
+              transform: i === stepIndex ? 'scale(1.3)' : undefined,
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/_standalone/components/walkthrough/index.ts

@@ -0,0 +1,3 @@
+export { useWalkthrough } from '@/lib/stores/walkthrough-store';
+export { walkthroughSteps } from './steps';
+export type { WalkthroughAnchor } from './steps';

package/_standalone/components/walkthrough/steps.ts

@@ -0,0 +1,23 @@
+/** Walkthrough step anchors — these data-walkthrough attributes are added to target components */
+export type WalkthroughAnchor =
+  | 'files-panel'
+  | 'ask-button'
+  | 'agents-panel';
+
+export interface WalkthroughStep {
+  anchor: WalkthroughAnchor;
+  /** Preferred tooltip position relative to anchor */
+  position: 'right' | 'bottom';
+}
+
+/**
+ * 3-step value-driven walkthrough:
+ *   0. Project Memory (foundation)
+ *   1. AI That Already Knows You (wedge)
+ *   2. Multi-Agent Sharing (differentiation)
+ */
+export const walkthroughSteps: WalkthroughStep[] = [
+  { anchor: 'files-panel', position: 'right' },
+  { anchor: 'ask-button', position: 'bottom' },
+  { anchor: 'agents-panel', position: 'right' },
+];

package/_standalone/components.json

@@ -0,0 +1,25 @@
+{
+  "$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": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

package/_standalone/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

package/_standalone/hooks/useA2aRegistry.ts

@@ -0,0 +1,58 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import type { RemoteAgent } from '@/lib/a2a/types';
+
+interface A2aRegistry {
+  agents: RemoteAgent[];
+  discovering: boolean;
+  error: string | null;
+  discover: (url: string) => Promise<RemoteAgent | null>;
+  remove: (id: string) => void;
+  refresh: () => void;
+}
+
+export function useA2aRegistry(): A2aRegistry {
+  const [agents, setAgents] = useState<RemoteAgent[]>([]);
+  const [discovering, setDiscovering] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const discover = useCallback(async (url: string): Promise<RemoteAgent | null> => {
+    setDiscovering(true);
+    setError(null);
+    try {
+      const res = await fetch('/api/a2a/discover', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ url }),
+      });
+      const data = await res.json();
+      if (data.agent) {
+        setAgents(prev => {
+          const exists = prev.some(a => a.id === data.agent.id);
+          if (exists) return prev.map(a => a.id === data.agent.id ? data.agent : a);
+          return [...prev, data.agent];
+        });
+        return data.agent as RemoteAgent;
+      }
+      setError(data.error || 'Discovery failed');
+      return null;
+    } catch (err) {
+      setError((err as Error).message);
+      return null;
+    } finally {
+      setDiscovering(false);
+    }
+  }, []);
+
+  const remove = useCallback((id: string) => {
+    setAgents(prev => prev.filter(a => a.id !== id));
+  }, []);
+
+  const refresh = useCallback(() => {
+    setAgents([]);
+    setError(null);
+  }, []);
+
+  return { agents, discovering, error, discover, remove, refresh };
+}