shieldcortex 2.0.0

package/dashboard/src/components/memory/MemoryDetail.tsx

@@ -0,0 +1,325 @@
+'use client';
+
+/**
+ * Memory Detail
+ * Shows detailed information about a selected memory
+ * including related memories and decay visualization
+ */
+
+import { useMemo } from 'react';
+import { Memory, MemoryLink } from '@/types/memory';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { getCategoryColor, getTypeColor } from '@/lib/category-colors';
+import { calculateDecayFactor } from '@/lib/position-algorithm';
+
+interface MemoryDetailProps {
+  memory: Memory;
+  links?: MemoryLink[];
+  memories?: Memory[];
+  onClose: () => void;
+  onReinforce?: (id: number) => void;
+  onSelectMemory?: (id: number) => void;
+}
+
+// Relationship styling
+const RELATIONSHIP_STYLES: Record<string, { color: string; label: string; icon: string }> = {
+  references: { color: '#60a5fa', label: 'References', icon: '→' },
+  extends: { color: '#34d399', label: 'Extends', icon: '⊃' },
+  contradicts: { color: '#f87171', label: 'Contradicts', icon: '⊗' },
+  related: { color: '#a78bfa', label: 'Related', icon: '~' },
+};
+
+// Get health status based on decay
+function getHealthStatus(decayFactor: number): { label: string; color: string; bgColor: string } {
+  if (decayFactor > 0.7) {
+    return { label: 'Healthy', color: '#22C55E', bgColor: 'rgba(34, 197, 94, 0.15)' };
+  }
+  if (decayFactor > 0.4) {
+    return { label: 'Fading', color: '#EAB308', bgColor: 'rgba(234, 179, 8, 0.15)' };
+  }
+  return { label: 'Critical', color: '#EF4444', bgColor: 'rgba(239, 68, 68, 0.15)' };
+}
+
+export function MemoryDetail({
+  memory,
+  links = [],
+  memories = [],
+  onClose,
+  onReinforce,
+  onSelectMemory,
+}: MemoryDetailProps) {
+  const decayFactor = calculateDecayFactor(memory);
+  const categoryColor = getCategoryColor(memory.category);
+  const typeColor = getTypeColor(memory.type);
+  const healthStatus = getHealthStatus(decayFactor);
+
+  // Find related memories through links
+  const relatedMemories = useMemo(() => {
+    const related: Array<{
+      memory: Memory;
+      relationship: string;
+      strength: number;
+      direction: 'from' | 'to';
+    }> = [];
+
+    for (const link of links) {
+      if (link.source_id === memory.id) {
+        const target = memories.find(m => m.id === link.target_id);
+        if (target) {
+          related.push({
+            memory: target,
+            relationship: link.relationship,
+            strength: link.strength,
+            direction: 'to',
+          });
+        }
+      } else if (link.target_id === memory.id) {
+        const source = memories.find(m => m.id === link.source_id);
+        if (source) {
+          related.push({
+            memory: source,
+            relationship: link.relationship,
+            strength: link.strength,
+            direction: 'from',
+          });
+        }
+      }
+    }
+
+    // Sort by strength
+    return related.sort((a, b) => b.strength - a.strength);
+  }, [memory.id, links, memories]);
+
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr);
+    return date.toLocaleString();
+  };
+
+  const timeSince = (dateStr: string) => {
+    const date = new Date(dateStr);
+    const now = new Date();
+    const hours = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60));
+
+    if (hours < 1) return 'Just now';
+    if (hours < 24) return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    if (days < 7) return `${days}d ago`;
+    return `${Math.floor(days / 7)}w ago`;
+  };
+
+  return (
+    <Card className="bg-slate-900 border-slate-700 h-full overflow-auto">
+      <CardHeader className="border-b border-slate-700 pb-3">
+        <div className="flex items-start justify-between gap-2">
+          <CardTitle className="text-lg font-semibold text-white leading-tight">
+            {memory.title}
+          </CardTitle>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onClose}
+            className="text-slate-400 hover:text-white -mt-1"
+          >
+            ✕
+          </Button>
+        </div>
+        <div className="flex items-center gap-2 mt-2">
+          <span
+            className="px-2 py-0.5 rounded text-xs font-medium"
+            style={{
+              backgroundColor: categoryColor + '20',
+              color: categoryColor,
+            }}
+          >
+            {memory.category}
+          </span>
+          <span
+            className="px-2 py-0.5 rounded text-xs font-medium"
+            style={{
+              backgroundColor: typeColor + '20',
+              color: typeColor,
+            }}
+          >
+            {memory.type.replace('_', '-')}
+          </span>
+        </div>
+      </CardHeader>
+
+      <CardContent className="p-4 space-y-4">
+        {/* Content */}
+        <div>
+          <h4 className="text-xs font-medium text-slate-400 mb-1">Content</h4>
+          <p className="text-sm text-slate-200 whitespace-pre-wrap leading-relaxed">
+            {memory.content}
+          </p>
+        </div>
+
+        {/* Health Status Banner */}
+        <div
+          className="rounded-lg p-3 flex items-center gap-3"
+          style={{ backgroundColor: healthStatus.bgColor }}
+        >
+          <div
+            className="w-3 h-3 rounded-full animate-pulse"
+            style={{ backgroundColor: healthStatus.color }}
+          />
+          <div>
+            <div className="text-sm font-medium" style={{ color: healthStatus.color }}>
+              {healthStatus.label}
+            </div>
+            <div className="text-xs text-slate-400">
+              {decayFactor > 0.7
+                ? 'Memory is strong and stable'
+                : decayFactor > 0.4
+                ? 'Memory is fading - reinforce to preserve'
+                : 'Memory at risk of deletion - reinforce now'}
+            </div>
+          </div>
+        </div>
+
+        {/* Metrics */}
+        <div className="grid grid-cols-2 gap-3">
+          <div className="bg-slate-800 rounded-lg p-3">
+            <div className="text-xs text-slate-400">Salience</div>
+            <div className="text-lg font-bold text-white">
+              {(memory.salience * 100).toFixed(0)}%
+            </div>
+            <div className="mt-1 h-1.5 bg-slate-700 rounded-full overflow-hidden">
+              <div
+                className="h-full bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 rounded-full transition-all"
+                style={{ width: `${memory.salience * 100}%` }}
+              />
+            </div>
+          </div>
+
+          <div className="bg-slate-800 rounded-lg p-3">
+            <div className="text-xs text-slate-400">Decay Factor</div>
+            <div className="text-lg font-bold text-white">
+              {(decayFactor * 100).toFixed(0)}%
+            </div>
+            <div className="mt-1 h-1.5 bg-slate-700 rounded-full overflow-hidden">
+              <div
+                className="h-full rounded-full transition-all"
+                style={{
+                  width: `${decayFactor * 100}%`,
+                  backgroundColor: healthStatus.color,
+                }}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Access info */}
+        <div className="bg-slate-800 rounded-lg p-3 space-y-2">
+          <div className="flex justify-between items-center">
+            <span className="text-xs text-slate-400">Access Count</span>
+            <span className="text-sm font-medium text-white">
+              {memory.accessCount} times
+            </span>
+          </div>
+          <div className="flex justify-between items-center">
+            <span className="text-xs text-slate-400">Last Accessed</span>
+            <span className="text-sm text-white">
+              {timeSince(memory.lastAccessed)}
+            </span>
+          </div>
+          <div className="flex justify-between items-center">
+            <span className="text-xs text-slate-400">Created</span>
+            <span className="text-sm text-white">
+              {formatDate(memory.createdAt)}
+            </span>
+          </div>
+        </div>
+
+        {/* Related Memories */}
+        {relatedMemories.length > 0 && (
+          <div>
+            <h4 className="text-xs font-medium text-slate-400 mb-2 flex items-center gap-2">
+              <span className="inline-block w-4 h-4">🔗</span>
+              Related Memories ({relatedMemories.length})
+            </h4>
+            <div className="space-y-2 max-h-48 overflow-y-auto">
+              {relatedMemories.map(({ memory: related, relationship, strength, direction }) => {
+                const style = RELATIONSHIP_STYLES[relationship] || RELATIONSHIP_STYLES.related;
+                const relatedCategoryColor = getCategoryColor(related.category);
+
+                return (
+                  <button
+                    key={`${related.id}-${direction}`}
+                    onClick={() => onSelectMemory?.(related.id)}
+                    className="w-full text-left p-2 bg-slate-800 hover:bg-slate-750 rounded-lg transition-colors group"
+                  >
+                    <div className="flex items-center gap-2 mb-1">
+                      <span
+                        className="w-1.5 h-1.5 rounded-full"
+                        style={{ backgroundColor: style.color }}
+                      />
+                      <span
+                        className="text-[10px] font-medium"
+                        style={{ color: style.color }}
+                      >
+                        {direction === 'to' ? `${style.icon} ${style.label}` : `${style.label} ${style.icon}`}
+                      </span>
+                      <span className="text-[10px] text-slate-500 ml-auto">
+                        {(strength * 100).toFixed(0)}%
+                      </span>
+                    </div>
+                    <div className="text-sm text-white truncate group-hover:text-blue-400 transition-colors">
+                      {related.title}
+                    </div>
+                    <div className="flex items-center gap-2 mt-1">
+                      <span
+                        className="px-1.5 py-0.5 rounded text-[10px]"
+                        style={{
+                          backgroundColor: relatedCategoryColor + '20',
+                          color: relatedCategoryColor,
+                        }}
+                      >
+                        {related.category}
+                      </span>
+                      <span className="text-[10px] text-slate-500">
+                        {(related.salience * 100).toFixed(0)}% salience
+                      </span>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Tags */}
+        {memory.tags && memory.tags.length > 0 && (
+          <div>
+            <h4 className="text-xs font-medium text-slate-400 mb-2">Tags</h4>
+            <div className="flex flex-wrap gap-1">
+              {memory.tags.map((tag, i) => (
+                <span
+                  key={i}
+                  className="px-2 py-0.5 bg-slate-700 text-slate-300 rounded text-xs"
+                >
+                  {tag}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex gap-2 pt-2">
+          {onReinforce && (
+            <Button
+              variant="default"
+              size="sm"
+              onClick={() => onReinforce(memory.id)}
+              className="flex-1 bg-blue-600 hover:bg-blue-700"
+            >
+              ⚡ Reinforce Memory
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/dashboard/src/components/nav/NavRail.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useDashboardStore } from '@/lib/store';
+import { useStats } from '@/hooks/useMemories';
+import { Network, LayoutGrid, BarChart3, Brain, Share2 } from 'lucide-react';
+
+const NAV_ITEMS = [
+  { id: 'graph' as const, label: 'Graph', icon: Network },
+  { id: 'memories' as const, label: 'Memories', icon: LayoutGrid },
+  { id: 'insights' as const, label: 'Insights', icon: BarChart3 },
+  { id: 'brain' as const, label: 'Brain', icon: Brain },
+  { id: 'ontology' as const, label: 'Ontology', icon: Share2 },
+];
+
+export function NavRail() {
+  const { viewMode, setViewMode } = useDashboardStore();
+  const { data: stats } = useStats();
+
+  const healthPercent = stats?.decayDistribution
+    ? Math.round(
+        (stats.decayDistribution.healthy /
+          Math.max(1, stats.total)) *
+          100
+      )
+    : null;
+
+  return (
+    <nav className="w-14 border-r border-slate-800 bg-slate-900/50 flex flex-col items-center py-3 shrink-0">
+      <div className="flex-1 flex flex-col items-center gap-1">
+        {NAV_ITEMS.map(({ id, label, icon: Icon }) => (
+          <button
+            key={id}
+            onClick={() => setViewMode(id)}
+            className={`w-10 h-10 rounded-lg flex flex-col items-center justify-center gap-0.5 transition-colors ${
+              viewMode === id
+                ? 'bg-cyan-600/20 text-cyan-400'
+                : 'text-slate-500 hover:text-slate-300 hover:bg-slate-800'
+            }`}
+            title={label}
+          >
+            <Icon size={18} />
+            <span className="text-[9px] leading-none">{label}</span>
+          </button>
+        ))}
+      </div>
+
+      {/* Bottom stats */}
+      <div className="flex flex-col items-center gap-1 text-[10px] text-slate-500">
+        {stats && <span>{stats.total}</span>}
+        {healthPercent !== null && <span>{healthPercent}%</span>}
+      </div>
+    </nav>
+  );
+}

package/dashboard/src/components/ui/button.tsx

@@ -0,0 +1,62 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/dashboard/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/dashboard/src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/dashboard/src/hooks/useDebouncedValue.ts

@@ -0,0 +1,24 @@
+/**
+ * Debounce Hook
+ *
+ * Delays updating a value until after a specified delay has passed
+ * since the last time the value changed.
+ */
+
+import { useState, useEffect } from 'react';
+
+export function useDebouncedValue<T>(value: T, delay: number = 300): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}