/**
* CognitiveToolsPanel Component
*
* HUD panel providing AI-powered tools for analyzing and transforming memories.
* Includes Summarize, Transform, Find Similar, and Analyze actions with loading states.
*
* Requirements: 9.1, 9.2, 9.3, 9.4, 9.5, 9.6
*/
import { useCallback, useState } from "react";
import { getDefaultClient } from "../../api/client";
import { selectIsProcessing, useCognitiveStore } from "../../stores/cognitiveStore";
import { useGraphStore } from "../../stores/graphStore";
import type {
AssessConfidenceResponse,
DetectBiasResponse,
Memory,
SearchResultItem,
ThinkResponse,
} from "../../types/api";
// ============================================================================
// Types
// ============================================================================
export type CognitiveToolAction = "summarize" | "transform" | "find-similar" | "analyze";
export interface CognitiveToolsPanelProps {
/** The memory to perform actions on */
memory: Memory;
/** Callback when similar nodes are found (for highlighting in 3D view) */
onSimilarNodesFound?: (nodeIds: string[]) => void;
/** Callback when a result modal should be shown */
onShowResult?: (result: CognitiveToolResult) => void;
/** Additional CSS classes */
className?: string;
/** Layout mode - 'grid' for 2x2 grid, 'horizontal' for inline row */
layout?: "grid" | "horizontal";
}
export interface SummarizeResult {
type: "summarize";
summary: string;
insights: string[];
confidence: number;
}
export interface TransformResult {
type: "transform";
transformed: string;
mode: string;
}
export interface FindSimilarResult {
type: "find-similar";
similarMemories: SearchResultItem[];
highlightedNodeIds: string[];
}
export interface AnalyzeResult {
type: "analyze";
confidence: AssessConfidenceResponse;
bias: DetectBiasResponse;
}
export type CognitiveToolResult =
| SummarizeResult
| TransformResult
| FindSimilarResult
| AnalyzeResult;
// ============================================================================
// Constants
// ============================================================================
const TOOL_DESCRIPTIONS: Record<CognitiveToolAction, string> = {
summarize: "Generate an AI summary of this memory",
transform: "Transform the memory content",
"find-similar": "Find semantically similar memories",
analyze: "Analyze confidence and detect biases",
};
// ============================================================================
// Sub-Components
// ============================================================================
interface GlassPanelProps {
children: React.ReactNode;
className?: string;
}
/**
* Glassmorphism panel wrapper with cyan glow
* Requirements: 23.5
*/
function GlassPanel({ children, className = "" }: GlassPanelProps): React.ReactElement {
return (
<div
className={`rounded-xl ${className}`}
style={{
background: "var(--theme-surface)",
backdropFilter: "blur(16px)",
WebkitBackdropFilter: "blur(16px)",
border: "1px solid var(--theme-primary-glow)",
boxShadow: `
0 0 20px var(--theme-primary-glow),
0 0 40px var(--theme-primary-bg),
inset 0 0 30px var(--theme-primary-bg)
`,
}}
>
{children}
</div>
);
}
interface ToolButtonProps {
action: CognitiveToolAction;
label: string;
icon: React.ReactNode;
isLoading: boolean;
isDisabled: boolean;
onClick: () => void;
layout?: "grid" | "horizontal";
}
/**
* Individual tool button with loading state
* Requirements: 9.1, 9.6
*/
function ToolButton({
action,
label,
icon,
isLoading,
isDisabled,
onClick,
layout = "grid",
}: ToolButtonProps): React.ReactElement {
const isHorizontal = layout === "horizontal";
return (
<button
onClick={onClick}
disabled={isDisabled || isLoading}
title={TOOL_DESCRIPTIONS[action]}
className={`
flex items-center justify-center
rounded-lg
transition-all duration-200
${isHorizontal ? "flex-row gap-1.5 px-3 py-1.5" : "flex-col p-3"}
${
isDisabled || isLoading
? "bg-ui-border/50 text-ui-text-muted cursor-not-allowed"
: "bg-ui-border hover:bg-ui-accent-primary/20 text-ui-text-primary hover:text-ui-accent-primary"
}
`}
aria-label={`${label} - ${TOOL_DESCRIPTIONS[action]}`}
aria-busy={isLoading}
>
<div className="relative flex items-center justify-center">
{isLoading ? (
<LoadingSpinner size={isHorizontal ? 14 : 24} />
) : (
<span className={isHorizontal ? "text-sm" : "text-2xl"}>{icon}</span>
)}
</div>
<span className={`font-medium ${isHorizontal ? "text-xs" : "text-xs mt-1"}`}>{label}</span>
</button>
);
}
interface LoadingSpinnerProps {
size?: number;
}
/**
* Loading spinner component
* Requirements: 9.6
*/
function LoadingSpinner({ size = 24 }: LoadingSpinnerProps): React.ReactElement {
return (
<svg
className="animate-spin text-ui-accent-primary"
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
aria-hidden="true"
>
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
);
}
// ============================================================================
// Icons
// ============================================================================
const SummarizeIcon = (): React.ReactElement => (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M4 6h16M4 12h10M4 18h14" />
</svg>
);
const TransformIcon = (): React.ReactElement => (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
</svg>
);
const FindSimilarIcon = (): React.ReactElement => (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<circle cx="11" cy="11" r="8" />
<path d="M21 21l-4.35-4.35" />
<path d="M11 8v6M8 11h6" />
</svg>
);
const AnalyzeIcon = (): React.ReactElement => (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M12 2L2 7l10 5 10-5-10-5z" />
<path d="M2 17l10 5 10-5" />
<path d="M2 12l10 5 10-5" />
</svg>
);
// ============================================================================
// Main Component
// ============================================================================
/**
* CognitiveToolsPanel - AI tools for memory analysis and transformation
*
* Features:
* - Summarize: Generate AI summary of memory content
* - Transform: Transform memory content (placeholder for future modes)
* - Find Similar: Find semantically similar memories and highlight in 3D view
* - Analyze: Assess confidence and detect biases
*
* Requirements: 9.1, 9.2, 9.3, 9.4, 9.5, 9.6
*/
export function CognitiveToolsPanel({
memory,
onSimilarNodesFound,
onShowResult,
className = "",
layout = "grid",
}: CognitiveToolsPanelProps): React.ReactElement {
// Local loading states for each action
const [loadingAction, setLoadingAction] = useState<CognitiveToolAction | null>(null);
const [error, setError] = useState<string | null>(null);
const [lastFailedAction, setLastFailedAction] = useState<CognitiveToolAction | null>(null);
// Global cognitive store state
const isGlobalProcessing = useCognitiveStore(selectIsProcessing);
const startOperation = useCognitiveStore((state) => state.startOperation);
const completeOperation = useCognitiveStore((state) => state.completeOperation);
const failOperation = useCognitiveStore((state) => state.failOperation);
// Graph store for highlighting similar nodes
const visibleNodes = useGraphStore((state) => state.visibleNodes);
/**
* Handle Summarize action
* Requirements: 9.2
*/
const handleSummarize = useCallback(async () => {
setLoadingAction("summarize");
setError(null);
setLastFailedAction(null);
const operationId = startOperation("think", memory.content, "analytical");
try {
const client = getDefaultClient();
const response: ThinkResponse = await client.think({
input: `Summarize the following memory content and extract key insights:\n\n${memory.content}`,
mode: "analytical",
userId: memory.userId,
context: `This is a ${memory.primarySector} memory with salience ${String(memory.salience)} and strength ${String(memory.strength)}.`,
});
const result: SummarizeResult = {
type: "summarize",
summary: response.conclusion,
insights: response.thoughts.map((t) => t.content),
confidence: response.confidence,
};
completeOperation(operationId, { type: "think", data: response });
onShowResult?.(result);
} catch (err) {
const message = err instanceof Error ? err.message : "Failed to summarize memory";
setError(message);
setLastFailedAction("summarize");
failOperation(operationId, message);
} finally {
setLoadingAction(null);
}
}, [memory, startOperation, completeOperation, failOperation, onShowResult]);
/**
* Handle Transform action (placeholder for future implementation)
*/
const handleTransform = useCallback(async () => {
setLoadingAction("transform");
setError(null);
setLastFailedAction(null);
const operationId = startOperation("think", memory.content, "creative");
try {
const client = getDefaultClient();
const response: ThinkResponse = await client.think({
input: `Transform and enhance the following memory content with creative insights:\n\n${memory.content}`,
mode: "creative",
userId: memory.userId,
});
const result: TransformResult = {
type: "transform",
transformed: response.conclusion,
mode: "creative",
};
completeOperation(operationId, { type: "think", data: response });
onShowResult?.(result);
} catch (err) {
const message = err instanceof Error ? err.message : "Failed to transform memory";
setError(message);
setLastFailedAction("transform");
failOperation(operationId, message);
} finally {
setLoadingAction(null);
}
}, [memory, startOperation, completeOperation, failOperation, onShowResult]);
/**
* Handle Find Similar action
* Requirements: 9.3
*/
const handleFindSimilar = useCallback(async () => {
setLoadingAction("find-similar");
setError(null);
setLastFailedAction(null);
try {
const client = getDefaultClient();
const response = await client.searchMemories({
userId: memory.userId,
text: memory.content,
minSimilarity: 0.5,
limit: 10,
});
// Filter out the current memory and get IDs
const similarMemories = response.results.filter((r) => r.id !== memory.id);
const highlightedNodeIds = similarMemories.map((r) => r.id);
// Filter to only include nodes that are visible in the 3D view
const visibleHighlightedIds = highlightedNodeIds.filter((id) => visibleNodes.has(id));
const result: FindSimilarResult = {
type: "find-similar",
similarMemories,
highlightedNodeIds: visibleHighlightedIds,
};
// Notify parent to highlight nodes in 3D view
onSimilarNodesFound?.(visibleHighlightedIds);
onShowResult?.(result);
} catch (err) {
const message = err instanceof Error ? err.message : "Failed to find similar memories";
setError(message);
setLastFailedAction("find-similar");
} finally {
setLoadingAction(null);
}
}, [memory, visibleNodes, onSimilarNodesFound, onShowResult]);
/**
* Handle Analyze action
* Requirements: 9.4, 9.5, 30.4
* Uses the unified /api/v1/metacognition/analyze endpoint for both confidence and bias
*/
const handleAnalyze = useCallback(async () => {
setLoadingAction("analyze");
setError(null);
setLastFailedAction(null);
const operationId = startOperation("analyze", memory.content);
try {
const client = getDefaultClient();
// Use the unified metacognition analyze endpoint (Requirement 30.4)
// This returns both confidence and bias data in a single call
const response = await client.analyzeMetacognition({
reasoningChain: memory.content,
context: `${memory.primarySector} memory with salience ${String(memory.salience)} and strength ${String(memory.strength)}`,
});
const result: AnalyzeResult = {
type: "analyze",
confidence: response.confidence,
bias: response.biases,
};
completeOperation(operationId, { type: "analyze_metacognition", data: response });
onShowResult?.(result);
} catch (err) {
const message = err instanceof Error ? err.message : "Failed to analyze memory";
setError(message);
setLastFailedAction("analyze");
failOperation(operationId, message);
} finally {
setLoadingAction(null);
}
}, [memory, startOperation, completeOperation, failOperation, onShowResult]);
/**
* Handle retry of the last failed action
* Requirements: 30.5
*/
const handleRetry = useCallback((): void => {
if (lastFailedAction === null) return;
switch (lastFailedAction) {
case "summarize":
void handleSummarize();
break;
case "transform":
void handleTransform();
break;
case "find-similar":
void handleFindSimilar();
break;
case "analyze":
void handleAnalyze();
break;
}
}, [lastFailedAction, handleSummarize, handleTransform, handleFindSimilar, handleAnalyze]);
// Determine if any action is loading
const isAnyLoading = loadingAction !== null || isGlobalProcessing;
const isHorizontal = layout === "horizontal";
const toolButtons = (
<div className={isHorizontal ? "flex items-center gap-2" : "grid grid-cols-2 gap-2"}>
<ToolButton
action="summarize"
label="Summarize"
icon={<SummarizeIcon />}
isLoading={loadingAction === "summarize"}
isDisabled={isAnyLoading && loadingAction !== "summarize"}
onClick={() => void handleSummarize()}
layout={layout}
/>
<ToolButton
action="transform"
label="Transform"
icon={<TransformIcon />}
isLoading={loadingAction === "transform"}
isDisabled={isAnyLoading && loadingAction !== "transform"}
onClick={() => void handleTransform()}
layout={layout}
/>
<ToolButton
action="find-similar"
label={isHorizontal ? "Similar" : "Find Similar"}
icon={<FindSimilarIcon />}
isLoading={loadingAction === "find-similar"}
isDisabled={isAnyLoading && loadingAction !== "find-similar"}
onClick={() => void handleFindSimilar()}
layout={layout}
/>
<ToolButton
action="analyze"
label="Analyze"
icon={<AnalyzeIcon />}
isLoading={loadingAction === "analyze"}
isDisabled={isAnyLoading && loadingAction !== "analyze"}
onClick={() => void handleAnalyze()}
layout={layout}
/>
</div>
);
// Horizontal layout - simple div wrapper
if (isHorizontal) {
return (
<div className={className}>
{error !== null && (
<div className="mb-0 mr-2 p-2 bg-red-500/20 border border-red-500/50 rounded">
<p className="text-red-400 text-xs">Server unavailable</p>
</div>
)}
{toolButtons}
</div>
);
}
// Grid layout - GlassPanel wrapper
return (
<GlassPanel className={`p-4 ${className}`}>
<h3 className="text-sm font-semibold neon-text-subtle mb-3">AI Tools</h3>
{error !== null && (
<div className="mb-3 p-2 bg-red-500/20 border border-red-500/50 rounded">
<p className="text-red-400 text-xs mb-2">
{error.includes("EAGAIN") || error.includes("ECONNREFUSED") || error.includes("fetch")
? "Backend server not available. Start Thought server to use AI tools."
: error}
</p>
{lastFailedAction !== null && (
<button
onClick={handleRetry}
disabled={isAnyLoading}
className="text-xs px-2 py-1 bg-red-500/30 hover:bg-red-500/50 text-red-300 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
Retry {lastFailedAction.replace("-", " ")}
</button>
)}
</div>
)}
{toolButtons}
{isGlobalProcessing && loadingAction === null && (
<div className="mt-3 flex items-center justify-center text-ui-text-secondary text-xs">
<LoadingSpinner size={16} />
<span className="ml-2">Processing...</span>
</div>
)}
</GlassPanel>
);
}
export default CognitiveToolsPanel;
