@flame0510/project-aether 1.1.9

package/app/components/SessionDrawer.tsx

@@ -0,0 +1,263 @@
+'use client';
+// Replaces AgentDrawer.jsx — uses Rev4aApiClient (Facade) instead of raw fetch
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useResponsive } from '../design-system';
+import type { SessionDetail } from '@/lib/types';
+import { Rev4aApiClient } from '@/lib/patterns/ApiClient';
+import { deriveSessionDisplayLabel } from '@/lib/patterns/sessionPresentation';
+import {
+  formatUsd,
+  formatUsdOrDash,
+  formatTokens,
+  formatTimeFromUnixSeconds,
+  formatDuration,
+  truncate,
+  statusColor,
+  parseEventData,
+} from '@/lib/utils/format';
+import Rev4aLoader from './Rev4aLoader';
+
+interface SessionDrawerProps {
+  sessionId: string | null;
+  onClose: () => void;
+}
+
+export default function SessionDrawer({ sessionId, onClose }: SessionDrawerProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [detail, setDetail] = useState<SessionDetail | null>(null);
+  const isMobile = useResponsive('md');
+
+  // ── Drag-to-close per bottom sheet mobile ─────────────────────────────
+  const dragStartY = useRef<number | null>(null);
+  const sheetRef = useRef<HTMLElement>(null);
+
+  const onDragStart = (e: React.TouchEvent) => {
+    dragStartY.current = e.touches[0].clientY;
+    if (sheetRef.current) sheetRef.current.style.transition = 'none';
+  };
+
+  const onDragMove = (e: React.TouchEvent) => {
+    if (dragStartY.current === null || !sheetRef.current) return;
+    const dy = e.touches[0].clientY - dragStartY.current;
+    if (dy > 0) sheetRef.current.style.transform = `translateY(${dy}px)`;
+  };
+
+  const onDragEnd = (e: React.TouchEvent) => {
+    if (dragStartY.current === null || !sheetRef.current) return;
+    const dy = e.changedTouches[0].clientY - dragStartY.current;
+    sheetRef.current.style.transition = 'transform 0.25s ease';
+    if (dy > 80) {
+      sheetRef.current.style.transform = 'translateY(100%)';
+      setTimeout(onClose, 250);
+    } else {
+      sheetRef.current.style.transform = 'translateY(0)';
+    }
+    dragStartY.current = null;
+  };
+
+  useEffect(() => {
+    if (!sessionId) {
+      setDetail(null);
+      setError('');
+      setLoading(false);
+      return;
+    }
+
+    const controller = new AbortController();
+    (async () => {
+      setLoading(true);
+      setError('');
+      try {
+        const data = await Rev4aApiClient.fetchSessionDetail(sessionId);
+        if (!controller.signal.aborted) setDetail(data);
+      } catch (e: unknown) {
+        if (!controller.signal.aborted) {
+          setDetail(null);
+          setError(e instanceof Error ? e.message : 'Unexpected error');
+        }
+      } finally {
+        if (!controller.signal.aborted) setLoading(false);
+      }
+    })();
+
+    return () => controller.abort();
+  }, [sessionId]);
+
+  if (!sessionId) return null;
+
+  const { session, events, children } = detail ?? { session: null, events: [], children: [] };
+  const endedOrUpdated = session?.ended_at ?? session?.updated_at ?? null;
+
+  return (
+    <>
+      {isMobile && (
+        <div
+          onClick={onClose}
+          style={{
+            position: 'fixed', inset: 0, zIndex: 299,
+            background: 'rgba(0,0,0,0.5)',
+          }}
+        />
+      )}
+      <aside
+      ref={sheetRef}
+      style={isMobile ? {
+        position: 'fixed',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 300,
+        width: '100%',
+        maxHeight: '75vh',
+        overflowY: 'auto',
+        background: 'var(--bg)',
+        borderTop: '1px solid var(--border)',
+        borderRadius: 0,
+        color: 'var(--text)',
+        padding: '20px 14px 28px',
+        transition: 'transform 0.25s ease',
+        touchAction: 'none',
+      } : {
+        position: 'fixed',
+        right: 0,
+        top: 0,
+        zIndex: 200,
+        width: 320,
+        maxWidth: '92vw',
+        height: '100vh',
+        overflowY: 'auto',
+        background: 'var(--bg)',
+        borderLeft: '1px solid var(--border)',
+        color: 'var(--text)',
+        padding: '20px 14px 14px',
+      }}
+    >
+      {isMobile && (
+        <div
+          onTouchStart={onDragStart}
+          onTouchMove={onDragMove}
+          onTouchEnd={onDragEnd}
+          style={{ display: 'flex', justifyContent: 'center', marginBottom: 12, marginTop: -8, padding: '8px 0', cursor: 'grab' }}>
+          <div style={{ width: 36, height: 4, borderRadius: 2, background: 'var(--border)' }} />
+        </div>
+      )}
+      <button
+        type="button"
+        onClick={onClose}
+        aria-label="Chiudi"
+        style={{
+          position: 'absolute',
+          top: isMobile ? 16 : 14,
+          right: 14,
+          border: 'none',
+          background: 'transparent',
+          color: 'var(--text-dim)',
+          fontSize: 18,
+          lineHeight: 1,
+          cursor: 'pointer',
+          padding: 4,
+          borderRadius: 0,
+          transition: 'color 0.15s',
+        }}
+        onMouseEnter={e => (e.currentTarget.style.color = 'var(--text)')}
+        onMouseLeave={e => (e.currentTarget.style.color = 'var(--text-dim)')}
+      >
+        ✕
+      </button>
+
+      {loading && <Rev4aLoader label="LOADING SESSION" compact />}
+      {error && <div style={{ color: '#f07070' }}>{error}</div>}
+
+      {!loading && !error && session && (
+        <>
+          <Section>
+            <div style={{ color: 'var(--violet)', fontSize: 12, marginBottom: 8 }}>
+              {truncate(deriveSessionDisplayLabel(session), 40)}
+            </div>
+            <div style={{ color: 'var(--text-dim)', fontSize: 11, marginBottom: 10 }}>
+              {truncate(session.session_id, 60)}
+            </div>
+            <Grid>
+              <Row label="STATO">
+                <span style={{ color: statusColor(session.status) }}>●</span>{' '}
+                {session.status ?? 'idle'}
+              </Row>
+              <Row label="TIPO">
+                {session.session_id.includes(':cron:') ? 'cron' : 'sessione'}
+              </Row>
+              <Row label="MODELLO">{session.model ?? '-'}</Row>
+              <Row label="COSTO">{formatUsdOrDash(session.cost_usd)}</Row>
+              <Row label="TOKEN">
+                in: {formatTokens(session.tokens_in)} out: {formatTokens(session.tokens_out)}
+              </Row>
+              <Row label="INIZIO">{formatTimeFromUnixSeconds(session.started_at)}</Row>
+              <Row label="AGGIORN.">{formatTimeFromUnixSeconds(session.updated_at)}</Row>
+              <Row label="FINE">{formatTimeFromUnixSeconds(session.ended_at)}</Row>
+              <Row label="DURATA">{formatDuration(session.started_at, endedOrUpdated)}</Row>
+              <Row label="TASK">{truncate(session.task_preview ?? '-', 200)}</Row>
+            </Grid>
+          </Section>
+
+          <Section title="AZIONI RECENTI">
+            {events.length === 0 && <Muted>No events</Muted>}
+            {events.map((evt) => (
+              <div key={evt.id ?? `${evt.ts ?? 0}-${evt.type ?? 'event'}`} style={{ fontSize: 12 }}>
+                <span style={{ color: 'var(--text-dim)', marginRight: 6 }}>
+                  {formatTimeFromUnixSeconds(evt.ts)}
+                </span>
+                <span style={{ marginRight: 6 }}>{evt.type ?? 'event'}</span>
+                <span style={{ color: 'var(--text-dim)' }}>
+                  {truncate(parseEventData(evt.data), 80)}
+                </span>
+              </div>
+            ))}
+          </Section>
+
+          <Section title="SESSIONI FIGLIE">
+            {children.length === 0 && <Muted>No child sessions</Muted>}
+            {children.map((child) => (
+              <div key={child.session_id} style={{ fontSize: 12 }}>
+                <div>{truncate(deriveSessionDisplayLabel(child), 44)}</div>
+                <Muted>
+                  {child.status ?? 'idle'} {formatUsdOrDash(child.cost_usd)}
+                </Muted>
+              </div>
+            ))}
+          </Section>
+        </>
+      )}
+    </aside>
+    </>
+  );
+}
+
+// ── Small layout helpers ───────────────────────────────────────────────────
+
+function Section({ title, children }: { title?: string; children: React.ReactNode }) {
+  return (
+    <div style={{ borderTop: title ? '1px solid var(--border)' : 'none', marginTop: title ? 14 : 0, paddingTop: title ? 10 : 0 }}>
+      {title && (
+        <div style={{ fontSize: 12, color: 'var(--violet)', marginBottom: 8 }}>{title}</div>
+      )}
+      <div style={{ display: 'grid', gap: 7 }}>{children}</div>
+    </div>
+  );
+}
+
+function Grid({ children }: { children: React.ReactNode }) {
+  return <div style={{ display: 'grid', gap: 7, fontSize: 12 }}>{children}</div>;
+}
+
+function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div>
+      {label} {children}
+    </div>
+  );
+}
+
+function Muted({ children }: { children: React.ReactNode }) {
+  return <div style={{ fontSize: 12, color: 'var(--text-dim)' }}>{children}</div>;
+}

package/app/components/SessionTopology.tsx

@@ -0,0 +1,289 @@
+// @ts-nocheck
+'use client';
+
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import * as d3 from 'd3';
+import type { Session, TreeNode } from '@/lib/types';
+import { buildSessionTree } from '@/lib/patterns/SessionFactory';
+import { nodeLabel } from '@/lib/patterns/sessionPresentation';
+
+interface SessionTopologyProps {
+  sessions: Session[];
+  filter: string;
+  onNodeClick: (sessionId: string) => void;
+  emptyMessage?: string;
+}
+
+export interface SessionTopologyHandle {
+  resetView: () => void;
+}
+
+function formatCost(value: number | null | undefined): string {
+  return `$${Number(value ?? 0).toFixed(4)}`;
+}
+
+function draw(
+  svgEl: SVGSVGElement,
+  tooltipEl: HTMLDivElement | null,
+  width: number,
+  height: number,
+  treeData: TreeNode,
+  isTouch: boolean,
+  onNodeClick: (id: string) => void,
+  registerReset: (reset: () => void) => void,
+) {
+  const svg = d3.select(svgEl);
+  svg.selectAll('*').remove();
+  svg.attr('viewBox', `0 0 ${width} ${height}`);
+
+  const g = svg.append('g');
+  const content = g.append('g').attr('transform', 'translate(40,20)');
+
+  const zoom = d3.zoom<SVGSVGElement, unknown>()
+    .scaleExtent([0.2, 5])
+    .on('zoom', (event) => g.attr('transform', event.transform));
+  svg.call(zoom).on('dblclick.zoom', null);
+
+  const root = d3.hierarchy<TreeNode>(treeData);
+  const treeLayout = d3.tree<TreeNode>().size([height - 40, width - 120]);
+  treeLayout(root);
+
+  const linkGen = d3
+    .linkHorizontal<d3.HierarchyPointLink<TreeNode>, d3.HierarchyPointNode<TreeNode>>()
+    .x((d) => d.y)
+    .y((d) => d.x);
+
+  content
+    .selectAll('.link')
+    .data(root.links().filter((l) => !l.source.data._virtualRoot))
+    .join('path')
+    .attr('class', 'link')
+    .attr('d', linkGen as any)
+    .attr('fill', 'none');
+
+  let lastActivation = { id: '', ts: 0 };
+  const activateNode = (d: d3.HierarchyPointNode<TreeNode>) => {
+    const id = d.data.session_id;
+    if (!id || d.data._virtualRoot || d.data._agentNode) return;
+    const now = Date.now();
+    if (lastActivation.id === id && now - lastActivation.ts < 250) return;
+    lastActivation = { id, ts: now };
+    onNodeClick(id);
+  };
+
+  const node = content
+    .selectAll<SVGGElement, d3.HierarchyPointNode<TreeNode>>('.node')
+    .data(root.descendants().filter((d) => !d.data._virtualRoot))
+    .join('g')
+    .attr('class', (d) => `node ${d.data.status ?? 'idle'}`)
+    .attr('transform', (d) => `translate(${d.y},${d.x})`)
+    .on('mousemove', (event: MouseEvent, d) => {
+      if (isTouch || !tooltipEl) return;
+      tooltipEl.style.display = 'block';
+      const tx = event.clientX + 18;
+      const ty = event.clientY + 18;
+      // Keep tooltip inside viewport
+      const tw = tooltipEl.offsetWidth || 200;
+      const th = tooltipEl.offsetHeight || 80;
+      tooltipEl.style.left = `${Math.min(tx, window.innerWidth - tw - 8)}px`;
+      tooltipEl.style.top = `${Math.min(ty, window.innerHeight - th - 8)}px`;
+      tooltipEl.innerHTML = [
+        `<div><strong>${nodeLabel(d.data)}</strong></div>`,
+                `<div>model: ${d.data.model ?? '-'}</div>`,
+        `<div>cost: ${formatCost(d.data.cost_usd)}</div>`,
+        `<div>status: ${d.data.status ?? 'idle'}</div>`,
+      ].join('');
+    })
+    .on('mouseleave', () => {
+      if (tooltipEl) tooltipEl.style.display = 'none';
+    })
+    .on('pointerup', (_: PointerEvent, d) => activateNode(d))
+    .on('click', (_: MouseEvent, d) => activateNode(d));
+
+  node
+    .filter((d) => d.data.status === 'working' || d.data.status === 'active')
+    .append('circle')
+    .attr('class', 'pulse-ring')
+    .attr('r', 10);
+
+  node.append('circle').attr('r', 8);
+
+  node
+    .append('text')
+    .text((d) => nodeLabel(d.data))
+    .attr('dy', 22)
+    .attr('text-anchor', 'middle')
+    .style('font-size', '10px')
+    .style('fill', '#d6e2e8');
+
+  node
+    .filter((d) => Number(d.data.cost_usd ?? 0) > 0)
+    .append('text')
+    .text((d) => formatCost(d.data.cost_usd))
+    .attr('dy', 34)
+    .attr('text-anchor', 'middle')
+    .style('font-size', '10px')
+    .style('fill', '#89a1ad');
+
+  const resetView = () => {
+    const contentNode = content.node();
+    if (!contentNode) return;
+
+    const bbox = contentNode.getBBox();
+    if (!bbox.width || !bbox.height) {
+      svg.transition().duration(250).call(zoom.transform, d3.zoomIdentity.translate(40, 20));
+      return;
+    }
+
+    const padX = isTouch ? 24 : 48;
+    const padY = isTouch ? 24 : 36;
+    const scale = Math.max(
+      0.2,
+      Math.min(
+        1.5,
+        (width - padX * 2) / bbox.width,
+        (height - padY * 2) / bbox.height,
+      ),
+    );
+    const tx = width / 2 - (bbox.x + bbox.width / 2) * scale;
+    const ty = height / 2 - (bbox.y + bbox.height / 2) * scale;
+
+    svg
+      .transition()
+      .duration(250)
+      .call(zoom.transform, d3.zoomIdentity.translate(tx, ty).scale(scale));
+  };
+
+  registerReset(resetView);
+}
+
+const SessionTopology = forwardRef<SessionTopologyHandle, SessionTopologyProps>(function SessionTopology(
+  { sessions, filter, onNodeClick, emptyMessage = 'No sessions visible' },
+  ref,
+) {
+  const svgRef = useRef<SVGSVGElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const resetRef = useRef<() => void>(() => {});
+  const prevFitKeyRef = useRef<string>('');
+  const fitFrameRef = useRef<number | null>(null);
+  const [isTouch, setIsTouch] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => { setMounted(true); }, []);
+
+  const treeData = useMemo(() => buildSessionTree(sessions, filter), [sessions, filter]);
+  const hasVisibleNodes = useMemo(() => (treeData.children ?? []).some((node) => node._agentNode ? (node.children?.length ?? 0) > 0 : true), [treeData]);
+  const fitKey = useMemo(() => JSON.stringify({
+    filter,
+    nodes: treeData.children ?? [],
+  }), [filter, treeData]);
+
+  useImperativeHandle(ref, () => ({
+    resetView: () => resetRef.current(),
+  }), []);
+
+  useEffect(() => {
+    const check = () => {
+      const coarse = window.matchMedia?.('(pointer: coarse)')?.matches;
+      setIsTouch(Boolean(coarse || window.innerWidth < 768));
+    };
+    check();
+    window.addEventListener('resize', check);
+    return () => window.removeEventListener('resize', check);
+  }, []);
+
+  useEffect(() => {
+    if (!hasVisibleNodes) {
+      resetRef.current = () => {};
+      prevFitKeyRef.current = '';
+    }
+  }, [hasVisibleNodes]);
+
+  useEffect(() => () => {
+    if (fitFrameRef.current !== null) {
+      cancelAnimationFrame(fitFrameRef.current);
+    }
+  }, []);
+
+  useEffect(() => {
+    const svgEl = svgRef.current;
+    const tooltipEl = tooltipRef.current;
+    if (!svgEl || !hasVisibleNodes) return;
+    const shouldAutoFit = fitKey !== prevFitKeyRef.current;
+    prevFitKeyRef.current = fitKey;
+
+    const scheduleAutoFit = () => {
+      if (!shouldAutoFit) return;
+
+      if (fitFrameRef.current !== null) {
+        cancelAnimationFrame(fitFrameRef.current);
+      }
+
+      let attempts = 0;
+      const runFit = () => {
+        fitFrameRef.current = requestAnimationFrame(() => {
+          const contentNode = svgEl.querySelector('g > g');
+          const bbox = contentNode && typeof (contentNode as SVGGElement).getBBox === 'function'
+            ? (contentNode as SVGGElement).getBBox()
+            : null;
+
+          if ((!svgEl.clientWidth || !svgEl.clientHeight || !bbox || !bbox.width || !bbox.height) && attempts < 6) {
+            attempts += 1;
+            runFit();
+            return;
+          }
+
+          resetRef.current();
+          fitFrameRef.current = null;
+        });
+      };
+
+      runFit();
+    };
+
+    const render = (autoFit: boolean) => {
+      const width = svgEl.clientWidth || 900;
+      const height = svgEl.clientHeight || 480;
+      draw(svgEl, tooltipEl, width, height, treeData, isTouch, onNodeClick, (reset) => {
+        resetRef.current = reset;
+      });
+
+      if (autoFit) {
+        scheduleAutoFit();
+      }
+    };
+
+    render(shouldAutoFit);
+    const ro = new ResizeObserver(() => render(false));
+    ro.observe(svgEl);
+    return () => {
+      ro.disconnect();
+      if (fitFrameRef.current !== null) {
+        cancelAnimationFrame(fitFrameRef.current);
+        fitFrameRef.current = null;
+      }
+    };
+  }, [fitKey, hasVisibleNodes, isTouch, treeData, onNodeClick]);
+
+  return (
+    <>
+      <div className="graph-shell">
+        {hasVisibleNodes ? (
+          <svg ref={svgRef} id="graph-svg" />
+        ) : (
+          <div className="empty-state">
+            <span className="empty-state-icon">◎</span>
+            <span className="empty-state-msg">{emptyMessage}</span>
+          </div>
+        )}
+      </div>
+      {mounted && createPortal(
+        <div ref={tooltipRef} className="graph-tooltip" />,
+        document.body
+      )}
+    </>
+  );
+});
+
+export default SessionTopology;