@geminilight/mindos 0.6.29 → 0.6.30

package/app/components/ask/FileChip.tsx

@@ -1,31 +1,96 @@
 'use client';
 
-import { X, FileText, Table, Paperclip } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { X, FileText, Table, Paperclip, ImageIcon, Zap, Bot } from 'lucide-react';
 
 interface FileChipProps {
   path: string;
   onRemove: () => void;
-  variant?: 'kb' | 'upload';
+  variant?: 'kb' | 'upload' | 'image' | 'skill' | 'agent';
+  /** Base64 image data for hover preview (variant='image' only) */
+  imageData?: string;
+  /** MIME type for image preview */
+  imageMime?: string;
 }
 
-export default function FileChip({ path, onRemove, variant = 'kb' }: FileChipProps) {
+const VARIANT_ICON = {
+  kb: { icon: FileText, cls: 'text-muted-foreground' },
+  upload: { icon: Paperclip, cls: 'text-muted-foreground' },
+  image: { icon: ImageIcon, cls: 'text-muted-foreground' },
+  skill: { icon: Zap, cls: 'text-[var(--amber)]' },
+  agent: { icon: Bot, cls: 'text-muted-foreground' },
+} as const;
+
+const VARIANT_STYLE = {
+  kb: 'border-border bg-muted text-foreground',
+  upload: 'border-border bg-muted text-foreground',
+  image: 'border-border bg-muted text-foreground',
+  skill: 'border-[var(--amber)]/25 bg-[var(--amber)]/10 text-foreground',
+  agent: 'border-[var(--amber)]/25 bg-[var(--amber)]/10 text-foreground',
+} as const;
+
+export default function FileChip({ path, onRemove, variant = 'kb', imageData, imageMime }: FileChipProps) {
+  const [showPreview, setShowPreview] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const chipRef = useRef<HTMLSpanElement>(null);
+  const [previewPos, setPreviewPos] = useState<{ top: number; left: number } | null>(null);
+
+  useEffect(() => setMounted(true), []);
+
   const name = path.split('/').pop() ?? path;
-  const isCsv = name.endsWith('.csv');
-  const Icon = variant === 'upload' ? Paperclip : isCsv ? Table : FileText;
-  const iconClass = variant === 'upload' ? 'text-muted-foreground' : isCsv ? 'text-success' : 'text-muted-foreground';
+  const isCsv = variant === 'kb' && name.endsWith('.csv');
+  const { icon: Icon, cls: iconClass } = isCsv
+    ? { icon: Table, cls: 'text-success' }
+    : VARIANT_ICON[variant];
+  const style = VARIANT_STYLE[variant];
+
+  // Position preview above the chip using getBoundingClientRect
+  useEffect(() => {
+    if (!showPreview || !chipRef.current) { setPreviewPos(null); return; }
+    const rect = chipRef.current.getBoundingClientRect();
+    setPreviewPos({
+      top: rect.top - 8, // 8px gap above chip
+      left: rect.left,
+    });
+  }, [showPreview]);
+
+  const preview = showPreview && previewPos && imageData && imageMime ? (
+    <div
+      className="fixed z-50 p-1 rounded-lg border border-border bg-card shadow-lg pointer-events-none"
+      style={{
+        left: previewPos.left,
+        bottom: window.innerHeight - previewPos.top,
+      }}
+    >
+      <img
+        src={`data:${imageMime};base64,${imageData}`}
+        alt={name}
+        className="max-h-48 max-w-64 rounded object-contain"
+      />
+    </div>
+  ) : null;
 
   return (
-    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs border border-border bg-muted text-foreground max-w-[220px]">
-      <Icon size={11} className={`${iconClass} shrink-0`} />
-      <span className="truncate" title={path}>{name}</span>
-      <button
-        type="button"
-        onClick={onRemove}
-        aria-label={`Remove ${name}`}
-        className="p-1 -mr-1 rounded hover:bg-muted hover:text-foreground transition-colors shrink-0"
+    <>
+      <span
+        ref={chipRef}
+        className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs border max-w-[220px] ${style}`}
+        onMouseEnter={() => imageData && setShowPreview(true)}
+        onMouseLeave={() => setShowPreview(false)}
       >
-        <X size={10} />
-      </button>
-    </span>
+        <Icon size={11} className={`${iconClass} shrink-0`} />
+        <span className="truncate" title={path}>{name}</span>
+        <button
+          type="button"
+          onClick={onRemove}
+          aria-label={`Remove ${name}`}
+          className="p-0.5 -mr-1 rounded hover:text-foreground transition-colors shrink-0 text-muted-foreground"
+        >
+          <X size={10} />
+        </button>
+      </span>
+      {mounted && preview && createPortal(preview, document.body)}
+    </>
   );
 }

package/app/components/ask/MentionPopover.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { FileText, Table, FolderOpen } from 'lucide-react';
 import HighlightMatch from './HighlightMatch';
 
@@ -11,8 +11,26 @@ interface MentionPopoverProps {
   onSelect: (filePath: string) => void;
 }
 
+/**
+ * Popover for @ file mentions. Renders as a flex child within the AskContent
+ * column (not absolutely positioned) to avoid clipping by the panel's
+ * overflow-hidden. Uses a dynamic max-height that caps at 50% of the
+ * viewport so the popover never overflows the visible area.
+ */
 export default function MentionPopover({ results, selectedIndex, query, onSelect }: MentionPopoverProps) {
   const listRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [maxListH, setMaxListH] = useState(280);
+
+  // Dynamically compute max list height based on available space
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    // Reserve ~80px for header + footer chrome, and cap at 50vh
+    const available = Math.min(rect.top - 8, window.innerHeight * 0.5) - 80;
+    setMaxListH(Math.max(120, Math.min(320, available)));
+  }, [results.length]);
 
   useEffect(() => {
     const container = listRef.current;
@@ -24,13 +42,13 @@ export default function MentionPopover({ results, selectedIndex, query, onSelect
   if (results.length === 0) return null;
 
   return (
-    <div className="border border-border rounded-lg bg-card shadow-lg overflow-hidden">
+    <div ref={containerRef} className="border border-border rounded-lg bg-card shadow-lg overflow-hidden">
       <div className="px-3 py-1.5 border-b border-border flex items-center gap-1.5">
         <FolderOpen size={11} className="text-muted-foreground/50" />
         <span className="text-2xs font-medium text-muted-foreground/70 uppercase tracking-wider">Files</span>
         <span className="text-2xs text-muted-foreground/40 ml-auto">{results.length}</span>
       </div>
-      <div ref={listRef} className="max-h-[360px] overflow-y-auto">
+      <div ref={listRef} className="overflow-y-auto" style={{ maxHeight: maxListH }}>
       {results.map((f, idx) => {
         const name = f.split('/').pop() ?? f;
         const dir = f.split('/').slice(0, -1).join('/');

package/app/components/ask/MessageList.tsx

@@ -4,25 +4,46 @@ import { useRef, useEffect } from 'react';
 import { Sparkles, Loader2, AlertCircle, Wrench, WifiOff, Zap } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import type { Message } from '@/lib/types';
+import type { Message, ImagePart } from '@/lib/types';
 import { stripThinkingTags } from '@/hooks/useAiOrganize';
 import ToolCallBlock from './ToolCallBlock';
 import ThinkingBlock from './ThinkingBlock';
 
 const SKILL_PREFIX_RE = /^Use the skill ([^:]+):\s*/;
 
-function UserMessageContent({ content, skillName }: { content: string; skillName?: string }) {
+function UserMessageContent({ content, skillName, images }: { content: string; skillName?: string; images?: ImagePart[] }) {
   const resolved = skillName ?? content.match(SKILL_PREFIX_RE)?.[1];
-  if (!resolved) return <>{content}</>;
   const prefixMatch = content.match(SKILL_PREFIX_RE);
   const rest = prefixMatch ? content.slice(prefixMatch[0].length) : content;
   return (
     <>
-      <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[11px] font-medium bg-[var(--amber)]/15 text-[var(--amber)] mr-1 align-middle">
-        <Zap size={10} className="shrink-0" />
-        {resolved}
-      </span>
-      {rest}
+      {/* Images */}
+      {images && images.length > 0 && (
+        <div className={`flex flex-wrap gap-1.5${content ? ' mb-2' : ''}`}>
+          {images.map((img, idx) => (
+            img.data ? (
+              <img
+                key={idx}
+                src={`data:${img.mimeType};base64,${img.data}`}
+                alt={`Image ${idx + 1}`}
+                className="max-h-48 max-w-full rounded-md object-contain"
+              />
+            ) : (
+              <div key={idx} className="h-12 px-3 rounded-md bg-muted flex items-center gap-1.5 text-xs text-muted-foreground">
+                <span>[Image {idx + 1}]</span>
+              </div>
+            )
+          ))}
+        </div>
+      )}
+      {/* Skill capsule + text */}
+      {resolved && (
+        <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[11px] font-medium bg-[var(--amber)]/15 text-[var(--amber)] mr-1 align-middle">
+          <Zap size={10} className="shrink-0" />
+          {resolved}
+        </span>
+      )}
+      {resolved ? rest : content}
     </>
   );
 }
@@ -168,7 +189,7 @@ export default function MessageList({
             <div
               className="max-w-[85%] px-3 py-2 rounded-xl rounded-br-sm text-sm leading-relaxed whitespace-pre-wrap bg-[var(--amber)] text-[var(--amber-foreground)]"
             >
-              <UserMessageContent content={m.content} skillName={m.skillName} />
+              <UserMessageContent content={m.content} skillName={m.skillName} images={m.images} />
             </div>
           ) : m.content.startsWith('__error__') ? (
             <div className="max-w-[85%] px-3 py-2.5 rounded-xl rounded-bl-sm border border-error/20 bg-error/8 text-sm">

package/app/components/ask/SlashCommandPopover.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Zap } from 'lucide-react';
 import type { SlashItem } from '@/hooks/useSlashCommand';
 import HighlightMatch from './HighlightMatch';
@@ -12,8 +12,26 @@ interface SlashCommandPopoverProps {
   onSelect: (item: SlashItem) => void;
 }
 
+/**
+ * Popover for slash commands. Renders as a flex child within the AskContent
+ * column (not absolutely positioned) to avoid clipping by the panel's
+ * overflow-hidden. Uses a dynamic max-height that caps at 50% of the
+ * viewport so the popover never overflows the visible area.
+ */
 export default function SlashCommandPopover({ results, selectedIndex, query, onSelect }: SlashCommandPopoverProps) {
   const listRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [maxListH, setMaxListH] = useState(280);
+
+  // Dynamically compute max list height based on available space
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    // Reserve ~80px for header + footer chrome, and cap at 50vh
+    const available = Math.min(rect.top - 8, window.innerHeight * 0.5) - 80;
+    setMaxListH(Math.max(120, Math.min(320, available)));
+  }, [results.length]);
 
   useEffect(() => {
     const container = listRef.current;
@@ -25,13 +43,13 @@ export default function SlashCommandPopover({ results, selectedIndex, query, onS
   if (results.length === 0) return null;
 
   return (
-    <div className="border border-border rounded-lg bg-card shadow-lg overflow-hidden">
+    <div ref={containerRef} className="border border-border rounded-lg bg-card shadow-lg overflow-hidden">
       <div className="px-3 py-1.5 border-b border-border flex items-center gap-1.5">
         <Zap size={11} className="text-[var(--amber)]/50" />
         <span className="text-2xs font-medium text-muted-foreground/70 uppercase tracking-wider">Skills</span>
         <span className="text-2xs text-muted-foreground/40 ml-auto">{results.length}</span>
       </div>
-      <div ref={listRef} className="max-h-[360px] overflow-y-auto">
+      <div ref={listRef} className="overflow-y-auto" style={{ maxHeight: maxListH }}>
         {results.map((item, idx) => (
           <button
             key={item.name}

package/app/components/panels/AgentsPanel.tsx

@@ -71,6 +71,7 @@ export default function AgentsPanel({
     navMcp: p.navMcp,
     navSkills: p.navSkills,
     navNetwork: p.navNetwork,
+    navSessions: p.navSessions,
   };
 
   const hub = (

package/app/components/panels/AgentsPanelHubNav.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { usePathname, useSearchParams } from 'next/navigation';
-import { Globe, LayoutDashboard, Server, Zap } from 'lucide-react';
+import { Globe, History, LayoutDashboard, Server, Zap } from 'lucide-react';
 import { PanelNavRow } from './PanelNavRow';
 
 type HubCopy = {
@@ -9,6 +9,7 @@ type HubCopy = {
   navMcp: string;
   navSkills: string;
   navNetwork: string;
+  navSessions: string;
 };
 
 export function AgentsPanelHubNav({
@@ -26,7 +27,7 @@ export function AgentsPanelHubNav({
   return (
     <div className="py-2">
       <PanelNavRow
-        icon={<LayoutDashboard size={14} className="text-[var(--amber)]" />}
+        icon={<LayoutDashboard size={14} className={inAgentsRoute && (tab === null || tab === 'overview') ? 'text-[var(--amber)]' : 'text-muted-foreground'} />}
         title={copy.navOverview}
         badge={<span className="text-2xs tabular-nums text-muted-foreground/60 px-1.5 py-0.5 rounded bg-muted/40 font-medium">{connectedCount}</span>}
         href="/agents"
@@ -50,6 +51,12 @@ export function AgentsPanelHubNav({
         href="/agents?tab=a2a"
         active={inAgentsRoute && tab === 'a2a'}
       />
+      <PanelNavRow
+        icon={<History size={14} className={inAgentsRoute && tab === 'sessions' ? 'text-[var(--amber)]' : 'text-muted-foreground'} />}
+        title={copy.navSessions}
+        href="/agents?tab=sessions"
+        active={inAgentsRoute && tab === 'sessions'}
+      />
     </div>
   );
 }

package/app/components/panels/WorkflowsPanel.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import Link from 'next/link';
+import { Plus, Zap, AlertTriangle, Loader2 } from 'lucide-react';
+import PanelHeader from './PanelHeader';
+import { useLocale } from '@/lib/LocaleContext';
+import { encodePath, relativeTime } from '@/lib/utils';
+
+interface WorkflowItem {
+  path: string;
+  fileName: string;
+  title: string;
+  description?: string;
+  stepCount: number;
+  mtime: number;
+  error?: string;
+}
+
+interface WorkflowsPanelProps {
+  active: boolean;
+  maximized?: boolean;
+  onMaximize?: () => void;
+}
+
+export default function WorkflowsPanel({ active, maximized, onMaximize }: WorkflowsPanelProps) {
+  const { t } = useLocale();
+  const wt = t.panels.workflows as {
+    title: string;
+    empty: string;
+    emptyDesc: string;
+    newWorkflow: string;
+    nSteps: (n: number) => string;
+    parseError: string;
+    name: string;
+    namePlaceholder: string;
+    template: string;
+    templateBlank: string;
+    create: string;
+    cancel: string;
+    creating: string;
+    exists: string;
+  };
+
+  const [workflows, setWorkflows] = useState<WorkflowItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showCreate, setShowCreate] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [creating, setCreating] = useState(false);
+  const [createError, setCreateError] = useState('');
+
+  const fetchWorkflows = useCallback(async () => {
+    try {
+      const res = await fetch('/api/workflows');
+      if (!res.ok) return;
+      const data = await res.json();
+      setWorkflows(data.workflows ?? []);
+    } catch {
+      // silent
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (active) fetchWorkflows();
+  }, [active, fetchWorkflows]);
+
+  const handleCreate = async () => {
+    const name = newName.trim();
+    if (!name || creating) return;
+    setCreating(true);
+    setCreateError('');
+
+    try {
+      const res = await fetch('/api/workflows', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setCreateError(res.status === 409 ? wt.exists : (data.error || 'Error'));
+        return;
+      }
+      // Refresh list and navigate to new file
+      setShowCreate(false);
+      setNewName('');
+      await fetchWorkflows();
+      window.location.href = `/view/${encodePath(data.path)}`;
+    } catch {
+      setCreateError('Network error');
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  return (
+    <div className={`flex flex-col h-full ${active ? '' : 'hidden'}`}>
+      <PanelHeader title={wt.title} maximized={maximized} onMaximize={onMaximize}>
+        <button
+          onClick={() => setShowCreate(v => !v)}
+          className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors focus-visible:ring-1 focus-visible:ring-ring"
+          aria-label={wt.newWorkflow}
+          title={wt.newWorkflow}
+        >
+          <Plus size={13} />
+        </button>
+      </PanelHeader>
+
+      <div className="flex-1 overflow-y-auto min-h-0">
+        {/* Create form */}
+        {showCreate && (
+          <div className="px-3 py-3 border-b border-border">
+            <label className="block text-xs font-medium text-muted-foreground mb-1.5">{wt.name}</label>
+            <input
+              type="text"
+              value={newName}
+              onChange={e => { setNewName(e.target.value); setCreateError(''); }}
+              onKeyDown={e => e.key === 'Enter' && handleCreate()}
+              placeholder={wt.namePlaceholder}
+              autoFocus
+              className="w-full px-2.5 py-1.5 text-sm rounded-md border border-border bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+            />
+            {createError && (
+              <p className="text-xs text-[var(--error)] mt-1">{createError}</p>
+            )}
+            <div className="flex gap-2 mt-2.5">
+              <button
+                onClick={() => { setShowCreate(false); setNewName(''); setCreateError(''); }}
+                className="flex-1 px-3 py-1.5 text-xs rounded-md border border-border text-muted-foreground hover:bg-muted transition-colors"
+              >
+                {wt.cancel}
+              </button>
+              <button
+                onClick={handleCreate}
+                disabled={!newName.trim() || creating}
+                className="flex-1 px-3 py-1.5 text-xs rounded-md font-medium transition-colors disabled:opacity-50 bg-[var(--amber)] text-[var(--amber-foreground)]"
+              >
+                {creating ? wt.creating : wt.create}
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Loading */}
+        {loading && (
+          <div className="flex items-center justify-center py-8 text-muted-foreground">
+            <Loader2 size={16} className="animate-spin" />
+          </div>
+        )}
+
+        {/* Empty state */}
+        {!loading && workflows.length === 0 && !showCreate && (
+          <div className="flex flex-col items-center justify-center py-10 px-4 text-center">
+            <Zap size={24} className="text-muted-foreground/40 mb-3" />
+            <p className="text-sm font-medium text-muted-foreground mb-1">{wt.empty}</p>
+            <p className="text-xs text-muted-foreground/70 mb-4 max-w-[200px]">{wt.emptyDesc}</p>
+            <button
+              onClick={() => setShowCreate(true)}
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md font-medium bg-[var(--amber)] text-[var(--amber-foreground)] transition-colors"
+            >
+              <Plus size={12} />
+              {wt.newWorkflow}
+            </button>
+          </div>
+        )}
+
+        {/* Workflow list */}
+        {!loading && workflows.length > 0 && (
+          <div className="flex flex-col gap-0.5 py-1.5">
+            {workflows.map(w => (
+              <Link
+                key={w.path}
+                href={`/view/${encodePath(w.path)}`}
+                className={`flex items-start gap-2.5 px-3 py-2 mx-1 rounded-lg transition-colors hover:bg-muted ${
+                  w.error ? 'opacity-70' : ''
+                }`}
+              >
+                <Zap size={14} className="shrink-0 mt-0.5 text-[var(--amber)]" />
+                <div className="min-w-0 flex-1">
+                  <span className="text-sm font-medium text-foreground block truncate">{w.title}</span>
+                  <div className="flex items-center gap-2 mt-0.5">
+                    {w.error ? (
+                      <span className="inline-flex items-center gap-1 text-2xs text-[var(--error)]">
+                        <AlertTriangle size={10} />
+                        {wt.parseError}
+                      </span>
+                    ) : (
+                      <span className="text-2xs text-muted-foreground">
+                        {wt.nSteps(w.stepCount)}
+                      </span>
+                    )}
+                    <span className="text-2xs text-muted-foreground/60" suppressHydrationWarning>
+                      {relativeTime(w.mtime, t.home?.relativeTime)}
+                    </span>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}