Francy51/Neon-Desk
2
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

Add history window controls and expand taxonomy pack support

Browse Source 
- add 3Y/5Y/10Y financial history filtering and reorganize normalization details UI
- add new fiscal taxonomy surface/income bridge/KPI packs and update Rust taxonomy loading
- auto-detect Homebrew SQLite for native `sqlite-vec` in local dev/e2e with docs and env guidance
This commit is contained in:
francy51
2026-03-18 23:40:28 -04:00
parent f8426c4dde
commit 17de3dd72d
102 changed files with 14978 additions and 1316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/dashboard/metric-card.tsx
View File

@@ -41,7 +41,7 @@ export function MetricCard({
className,
)}
>
<p className="panel-heading text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
<p className="text-[11px] text-[color:var(--terminal-muted)]">
{label}
</p>
<p className="mt-1 text-xl font-semibold text-[color:var(--terminal-bright)]">
@@ -68,10 +68,8 @@ export function MetricCard({
className,
)}
>
<p className="panel-heading text-[11px] uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">
{label}
</p>
<p className="mt-2 text-3xl font-semibold text-[color:var(--terminal-bright)]">
<p className="text-xs text-[color:var(--terminal-muted)]">{label}</p>
<p className="mt-2 text-2xl font-semibold text-[color:var(--terminal-bright)]">
{value}
</p>
{delta ? (

35
components/financials/control-bar.tsx
View File

@@ -1,7 +1,7 @@
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
type ControlButtonVariant = 'primary' | 'ghost' | 'secondary' | 'danger';
type ControlButtonVariant = "primary" | "ghost" | "secondary" | "danger";
export type FinancialControlOption = {
value: string;
@@ -34,19 +34,25 @@ type FinancialControlBarProps = {
};
export function FinancialControlBar({
title = 'Control Bar',
title = "Control Bar",
subtitle,
sections,
actions,
className
className,
}: FinancialControlBarProps) {
return (
<section className={cn('border-t border-[color:var(--line-weak)] pt-4', className)}>
<section
className={cn("border-t border-[color:var(--line-weak)] pt-4", className)}
>
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
<div className="min-w-0">
<h3 className="text-base font-semibold text-[color:var(--terminal-bright)]">{title}</h3>
<h3 className="text-base font-semibold text-[color:var(--terminal-bright)]">
{title}
</h3>
{subtitle ? (
<p className="mt-1 text-sm text-[color:var(--terminal-muted)]">{subtitle}</p>
<p className="mt-1 text-sm text-[color:var(--terminal-muted)]">
{subtitle}
</p>
) : null}
</div>
@@ -56,7 +62,7 @@ export function FinancialControlBar({
<Button
key={action.id}
type="button"
variant={action.variant ?? 'secondary'}
variant={action.variant ?? "secondary"}
disabled={action.disabled}
className="px-2 py-1 text-xs sm:min-h-9"
onClick={action.onClick}
@@ -70,17 +76,16 @@ export function FinancialControlBar({
<div className="mt-4 grid grid-cols-1 gap-3">
{sections.map((section) => (
<div
key={section.id}
className="data-surface px-3 py-3"
>
<span className="mb-2 block text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">{section.label}</span>
<div key={section.id} className="data-surface px-3 py-3">
<span className="mb-2 block text-[11px] text-[color:var(--terminal-muted)]">
{section.label}
</span>
<div className="flex flex-wrap items-center gap-1.5">
{section.options.map((option) => (
<Button
key={`${section.id}-${option.value}`}
type="button"
variant={option.value === section.value ? 'primary' : 'ghost'}
variant={option.value === section.value ? "primary" : "ghost"}
disabled={option.disabled}
className="px-2 py-1 text-xs sm:min-h-9"
onClick={() => section.onChange(option.value)}

25
components/financials/financials-toolbar.tsx
View File

@@ -91,12 +91,14 @@ function FinancialsToolbarComponent({
const groupedSections = useMemo(() => {
const statementKeys = ["surface"];
const periodKeys = ["cadence"];
const historyKeys = ["history"];
const modeKeys = ["display"];
const scaleKeys = ["scale"];
return {
statement: sections.filter((s) => statementKeys.includes(s.key)),
period: sections.filter((s) => periodKeys.includes(s.key)),
history: sections.filter((s) => historyKeys.includes(s.key)),
mode: sections.filter((s) => modeKeys.includes(s.key)),
scale: sections.filter((s) => scaleKeys.includes(s.key)),
};
@@ -147,6 +149,29 @@ function FinancialsToolbarComponent({
))}
</ControlGroup>
{groupedSections.history.length > 0 && (
<ControlGroup showDivider>
{groupedSections.history.map((section) => (
<Fragment key={section.key}>
{section.options.map((option) => {
const isActive = section.value === option.value;
return (
<Button
key={`${section.key}-${option.value}`}
variant={isActive ? "secondary" : "ghost"}
size="compact"
onClick={() => section.onChange(option.value)}
className="text-xs"
>
{option.label}
</Button>
);
})}
</Fragment>
))}
</ControlGroup>
)}
{groupedSections.mode.length > 0 && (
<ControlGroup showDivider>
{groupedSections.mode.map((section) => (

35
components/financials/normalization-summary.tsx
View File

@@ -6,6 +6,8 @@ import { cn } from "@/lib/utils";
type NormalizationSummaryProps = {
normalization: NormalizationMetadata;
showHeader?: boolean;
className?: string;
};
function SummaryField(props: {
@@ -20,7 +22,7 @@ function SummaryField(props: {
props.tone === "warning" && "border-l-2 border-[#7f6250] pl-3",
)}
>
<p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
<p className="text-[11px] text-[color:var(--terminal-muted)]">
{props.label}
</p>
<p
@@ -39,21 +41,30 @@ function SummaryField(props: {
export function NormalizationSummary({
normalization,
showHeader = true,
className,
}: NormalizationSummaryProps) {
const hasMaterialUnmapped = normalization.materialUnmappedRowCount > 0;
const hasWarnings = normalization.warnings.length > 0;
return (
<section className="border-t border-[color:var(--line-weak)] pt-4">
<header className="mb-3">
<h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
Normalization Summary
</h3>
<p className="text-xs text-[color:var(--terminal-muted)]">
Pack, parser, and residual mapping health for the compact statement
surface.
</p>
</header>
<section
className={cn(
showHeader ? "border-t border-[color:var(--line-weak)] pt-4" : "",
className,
)}
>
{showHeader ? (
<header className="mb-3">
<h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
Normalization Summary
</h3>
<p className="text-xs text-[color:var(--terminal-muted)]">
Pack, parser, and residual mapping health for the compact statement
surface.
</p>
</header>
) : null}
<div className="grid gap-x-6 gap-y-1 md:grid-cols-4 xl:grid-cols-8">
<SummaryField
@@ -90,7 +101,7 @@ export function NormalizationSummary({
{hasWarnings ? (
<div className="mt-3 border-t border-[color:var(--line-weak)] pt-3">
<p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
<p className="text-[11px] text-[color:var(--terminal-muted)]">
Parser Warnings
</p>
<div className="mt-2 flex flex-wrap gap-2">

496
components/financials/statement-matrix.tsx
View File

@@ -1,15 +1,18 @@
'use client';
"use client";
import { Fragment, memo, useMemo, useRef } from 'react';
import { useVirtualizer } from '@tanstack/react-virtual';
import { ChevronDown, ChevronRight } from 'lucide-react';
import type { FinancialStatementPeriod, SurfaceFinancialRow, DetailFinancialRow } from '@/lib/types';
import { cn } from '@/lib/utils';
import { Fragment } from "react";
import { ChevronDown, ChevronRight } from "lucide-react";
import type {
DetailFinancialRow,
FinancialStatementPeriod,
SurfaceFinancialRow,
} from "@/lib/types";
import { cn } from "@/lib/utils";
import type {
StatementInspectorSelection,
StatementTreeNode,
StatementTreeSection
} from '@/lib/financials/statement-view-model';
StatementTreeSection,
} from "@/lib/financials/statement-view-model";
type MatrixRow = SurfaceFinancialRow | DetailFinancialRow;
@@ -19,172 +22,183 @@ type StatementMatrixProps = {
selectedRowRef: StatementInspectorSelection | null;
onToggleRow: (key: string) => void;
onSelectRow: (selection: StatementInspectorSelection) => void;
renderCellValue: (row: MatrixRow, periodId: string, previousPeriodId: string | null) => string;
renderCellValue: (
row: MatrixRow,
periodId: string,
previousPeriodId: string | null,
) => string;
periodLabelFormatter: (value: string) => string;
dense?: boolean;
virtualized?: boolean;
};
function isSurfaceNode(node: StatementTreeNode): node is Extract<StatementTreeNode, { kind: 'surface' }> {
return node.kind === 'surface';
}
function rowSelected(
function isSurfaceNode(
node: StatementTreeNode,
selectedRowRef: StatementInspectorSelection | null
) {
if (!selectedRowRef) {
return false;
}
if (node.kind === 'surface') {
return selectedRowRef.kind === 'surface' && selectedRowRef.key === node.row.key;
}
return selectedRowRef.kind === 'detail'
&& selectedRowRef.key === node.row.key
&& selectedRowRef.parentKey === node.parentSurfaceKey;
): node is Extract<StatementTreeNode, { kind: "surface" }> {
return node.kind === "surface";
}
function surfaceBadges(node: Extract<StatementTreeNode, { kind: 'surface' }>) {
const badges: Array<{ label: string; tone: 'default' | 'warning' | 'muted' }> = [];
function surfaceBadges(node: Extract<StatementTreeNode, { kind: "surface" }>) {
const badges: Array<{
label: string;
tone: "default" | "warning" | "muted";
}> = [];
if (node.row.resolutionMethod === 'formula_derived') {
badges.push({ label: 'Formula', tone: node.row.confidence === 'low' ? 'warning' : 'default' });
if (node.row.resolutionMethod === "formula_derived") {
badges.push({
label: "Formula",
tone: node.row.confidence === "low" ? "warning" : "default",
});
}
if (node.row.resolutionMethod === 'not_meaningful') {
badges.push({ label: 'N/M', tone: 'muted' });
if (node.row.resolutionMethod === "not_meaningful") {
badges.push({ label: "N/M", tone: "muted" });
}
if (node.row.confidence === 'low') {
badges.push({ label: 'Low confidence', tone: 'warning' });
if (node.row.confidence === "low") {
badges.push({ label: "Low confidence", tone: "warning" });
}
const detailCount = node.row.detailCount ?? node.directDetailCount;
if (detailCount > 0) {
badges.push({ label: `${detailCount} details`, tone: 'default' });
badges.push({ label: `${detailCount} details`, tone: "default" });
}
return badges;
}
function badgeClass(tone: 'default' | 'warning' | 'muted', dense?: boolean) {
function badgeClass(tone: "default" | "warning" | "muted", dense?: boolean) {
const baseClasses = dense
? 'rounded border px-1 py-0.5 text-[9px] uppercase tracking-[0.12em]'
: 'rounded-full border px-2 py-0.5 text-[10px] uppercase tracking-[0.14em]';
? "rounded border px-1 py-0.5 text-[9px]"
: "rounded border px-2 py-0.5 text-[10px]";
if (tone === 'warning') {
return cn(baseClasses, 'border-[#84614f] bg-[rgba(112,76,54,0.22)] text-[#ffd7bf]');
if (tone === "warning") {
return cn(
baseClasses,
"border-[#84614f] bg-[rgba(112,76,54,0.22)] text-[#ffd7bf]",
);
}
if (tone === 'muted') {
return cn(baseClasses, 'border-[color:var(--line-weak)] bg-[rgba(80,85,92,0.16)] text-[color:var(--terminal-muted)]');
if (tone === "muted") {
return cn(
baseClasses,
"border-[color:var(--line-weak)] bg-[rgba(80,85,92,0.16)] text-[color:var(--terminal-muted)]",
);
}
return cn(baseClasses, 'border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] text-[color:var(--terminal-bright)]');
return cn(
baseClasses,
"border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] text-[color:var(--terminal-bright)]",
);
}
// Flatten tree nodes for virtualization
type FlattenedNode = {
node: StatementTreeNode;
sectionKey: string;
sectionLabel?: string;
isSectionHeader?: boolean;
};
function flattenSections(sections: StatementTreeSection[]): FlattenedNode[] {
const result: FlattenedNode[] = [];
function flattenNodes(nodes: StatementTreeNode[], sectionKey: string): void {
for (const node of nodes) {
result.push({ node, sectionKey });
if (node.kind === 'surface' && node.expanded && node.children.length > 0) {
flattenNodes(node.children, sectionKey);
}
}
}
for (const section of sections) {
if (section.label) {
result.push({
node: {} as StatementTreeNode,
sectionKey: section.key,
sectionLabel: section.label,
isSectionHeader: true
});
}
flattenNodes(section.nodes, section.key);
}
return result;
}
function renderNodes(props: StatementMatrixProps & { nodes: StatementTreeNode[]; dense?: boolean }) {
function renderNodes(
props: StatementMatrixProps & { nodes: StatementTreeNode[]; dense?: boolean },
) {
const { dense = false } = props;
const buttonSize = dense ? 'size-7' : 'size-11';
const buttonClass = dense ? 'rounded' : 'rounded-lg';
const labelSize = dense ? 'text-[13px]' : 'text-sm';
const detailLabelSize = dense ? 'text-xs' : 'text-[13px]';
const paddingY = dense ? 'py-1.5' : 'py-2';
const gapClass = dense ? 'gap-1' : 'gap-2';
const buttonSize = dense ? "size-6" : "size-8";
const buttonClass = dense ? "rounded" : "rounded-lg";
const labelSize = dense ? "text-[13px]" : "text-sm";
const detailLabelSize = dense ? "text-[11px]" : "text-xs";
const paddingY = dense ? "py-1.5" : "py-2";
const gapClass = dense ? "gap-1.5" : "gap-2";
return props.nodes.map((node) => {
const isSelected = rowSelected(node, props.selectedRowRef);
const labelIndent = node.kind === 'detail' ? node.level * 16 + 16 : node.level * 16;
const labelIndent =
node.kind === "detail" ? node.level * 16 + 16 : node.level * 16;
const canToggle = isSurfaceNode(node) && node.expandable;
const nextSelection: StatementInspectorSelection = node.kind === 'surface'
? { kind: 'surface', key: node.row.key }
: { kind: 'detail', key: node.row.key, parentKey: node.parentSurfaceKey };
const nextSelection: StatementInspectorSelection =
node.kind === "surface"
? { kind: "surface", key: node.row.key }
: {
kind: "detail",
key: node.row.key,
parentKey: node.parentSurfaceKey,
};
const rowClass = cn(
"financial-matrix-row",
node.kind === "detail" && "financial-matrix-row-detail",
);
const stickyCellClass = cn(
"financial-matrix-sticky-cell",
node.kind === "detail" && "financial-matrix-sticky-cell-detail",
);
return (
<Fragment key={node.id}>
<tr className={cn(isSelected && 'bg-[color:rgba(70,77,87,0.48)]')}>
<td className="sticky left-0 z-10 bg-[color:var(--panel)]">
<div className={cn('flex min-w-[240px] items-start', gapClass)} style={{ paddingLeft: `${labelIndent}px` }}>
<tr className={rowClass}>
<td className={stickyCellClass}>
<div
className={cn("flex min-w-0 items-start", gapClass)}
style={{ paddingLeft: `${labelIndent}px` }}
>
{canToggle ? (
<button
type="button"
aria-label={`${node.expanded ? 'Collapse' : 'Expand'} ${node.row.label} details`}
aria-label={`${node.expanded ? "Collapse" : "Expand"} ${node.row.label} details`}
aria-expanded={node.expanded}
aria-controls={`statement-children-${node.id}`}
className={cn(
'mt-0.5 inline-flex shrink-0 items-center justify-center border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)]',
"mt-0.5 inline-flex shrink-0 items-center justify-center border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)]",
buttonSize,
buttonClass
buttonClass,
)}
onClick={(event) => {
event.stopPropagation();
props.onToggleRow(node.row.key);
}}
>
{node.expanded ? <ChevronDown className="size-3.5" /> : <ChevronRight className="size-3.5" />}
{node.expanded ? (
<ChevronDown className="size-3.5" />
) : (
<ChevronRight className="size-3.5" />
)}
</button>
) : (
<span className={cn('inline-flex shrink-0 items-center justify-center text-[color:var(--terminal-muted)]', buttonSize)} aria-hidden="true">
{node.kind === 'detail' ? '·' : ''}
<span
className={cn(
"inline-flex shrink-0 items-center justify-center text-[color:var(--terminal-muted)]",
buttonSize,
)}
aria-hidden="true"
>
{node.kind === "detail" ? "·" : ""}
</span>
)}
<button
type="button"
className={cn('flex min-w-0 flex-1 flex-col items-start gap-0.5 text-left', paddingY)}
className={cn(
"flex min-w-0 flex-1 flex-col items-start gap-1 text-left",
paddingY,
)}
onClick={() => props.onSelectRow(nextSelection)}
>
<span className={cn(
labelSize,
'text-[color:var(--terminal-bright)]',
node.kind === 'detail' && cn(detailLabelSize, 'text-[color:var(--terminal-soft)]'),
node.kind === 'surface' && node.level > 0 && 'text-[color:var(--terminal-soft)]'
)}>
<span
className={cn(
"block max-w-full truncate",
labelSize,
node.kind === "detail"
? cn(
detailLabelSize,
"text-[color:var(--terminal-muted)]",
)
: "text-[color:var(--terminal-bright)]",
node.kind === "surface" &&
node.level > 0 &&
"text-[color:var(--accent)]",
)}
title={node.row.label}
>
{node.row.label}
</span>
{node.kind === 'detail' ? (
<span className="text-[10px] text-[color:var(--terminal-muted)]">
{node.kind === "detail" ? (
<span
className="block max-w-full truncate text-[10px] text-[color:var(--terminal-muted)]"
title={node.row.localName}
>
{node.row.localName}
{node.row.residualFlag ? ' · residual' : ''}
{node.row.residualFlag ? " · residual" : ""}
</span>
) : (
) : surfaceBadges(node).length > 0 ? (
<div className="flex flex-wrap gap-1">
{surfaceBadges(node).map((badge) => (
<span
@@ -195,25 +209,37 @@ function renderNodes(props: StatementMatrixProps & { nodes: StatementTreeNode[];
</span>
))}
</div>
)}
) : null}
</button>
</div>
</td>
{props.periods.map((period, index) => (
<td key={`${node.id}-${period.id}`} className="font-mono text-xs">
{props.renderCellValue(node.row, period.id, index > 0 ? props.periods[index - 1]?.id ?? null : null)}
<td
key={`${node.id}-${period.id}`}
className={cn(
"financial-matrix-value-cell font-mono text-xs",
node.kind === "detail" && "text-[color:var(--terminal-muted)]",
)}
>
{props.renderCellValue(
node.row,
period.id,
index > 0 ? (props.periods[index - 1]?.id ?? null) : null,
)}
</td>
))}
</tr>
{isSurfaceNode(node) && node.expanded ? (
<>
<tr id={`statement-children-${node.id}`} className="sr-only">
<td colSpan={props.periods.length + 1}>Expanded children for {node.row.label}</td>
<td colSpan={props.periods.length + 1}>
Expanded children for {node.row.label}
</td>
</tr>
{renderNodes({
...props,
nodes: node.children,
dense
dense,
})}
</>
) : null}
@@ -222,193 +248,73 @@ function renderNodes(props: StatementMatrixProps & { nodes: StatementTreeNode[];
});
}
export function StatementMatrix(props: StatementMatrixProps) {
const { dense = false, virtualized = false } = props;
const tableClass = dense ? 'data-table-dense min-w-[960px]' : 'data-table min-w-[1040px]';
// Hooks must be called unconditionally
const parentRef = useRef<HTMLDivElement>(null);
const flatRows = useMemo(() => flattenSections(props.sections), [props.sections]);
const virtualizer = useVirtualizer({
count: flatRows.length,
getScrollElement: () => parentRef.current,
estimateSize: (index) => {
const item = flatRows[index];
if (item.isSectionHeader) return dense ? 32 : 40;
if (item.node.kind === 'surface' && surfaceBadges(item.node as any).length > 0) return dense ? 44 : 56;
return dense ? 36 : 48;
},
overscan: 10,
});
// Non-virtualized version (original implementation with dense support)
if (!virtualized) {
return (
<div className="data-table-wrap">
<table className={tableClass}>
<thead>
<tr>
<th className="sticky left-0 z-10 bg-[color:var(--panel)]">Metric</th>
{props.periods.map((period) => (
<th key={period.id}>
<div className="flex flex-col gap-1">
<span>{props.periodLabelFormatter(period.periodEnd ?? period.filingDate)}</span>
<span className="text-[11px] normal-case tracking-normal text-[color:var(--terminal-muted)]">{period.filingType} · {period.periodLabel}</span>
</div>
</th>
))}
</tr>
</thead>
<tbody>
{props.sections.map((section) => (
<Fragment key={section.key}>
{section.label ? (
<tr className="bg-[color:var(--panel-soft)]">
<td colSpan={props.periods.length + 1} className="font-semibold text-[color:var(--terminal-bright)]">
{section.label}
</td>
</tr>
) : null}
{renderNodes({
...props,
nodes: section.nodes,
dense
})}
</Fragment>
))}
</tbody>
</table>
</div>
);
}
// Virtualized version for large datasets
export function StatementMatrix({
periods,
sections,
selectedRowRef,
onToggleRow,
onSelectRow,
renderCellValue,
periodLabelFormatter,
dense = false,
}: StatementMatrixProps) {
return (
<div ref={parentRef} className="data-table-wrap h-[600px] overflow-auto">
<table className={tableClass}>
<thead className="sticky top-0 z-20 bg-[color:var(--panel)]">
<div className="financial-matrix-wrap">
<table className="financial-matrix">
<colgroup>
<col className="financial-matrix-metric-col" />
{periods.map((period) => (
<col
key={`col-${period.id}`}
className="financial-matrix-period-col"
/>
))}
</colgroup>
<thead>
<tr>
<th className="sticky left-0 z-30 bg-[color:var(--panel)]">Metric</th>
{props.periods.map((period) => (
<th key={period.id}>
<th className="financial-matrix-header">Metric</th>
{periods.map((period) => (
<th key={period.id} className="financial-matrix-header">
<div className="flex flex-col gap-1">
<span>{props.periodLabelFormatter(period.periodEnd ?? period.filingDate)}</span>
<span className="text-[11px] normal-case tracking-normal text-[color:var(--terminal-muted)]">{period.filingType} · {period.periodLabel}</span>
<span className="text-sm font-medium text-[color:var(--terminal-bright)]">
{periodLabelFormatter(
period.periodEnd ?? period.filingDate,
)}
</span>
<span className="text-[11px] tracking-normal text-[color:var(--terminal-muted)]">
{period.filingType} · {period.periodLabel}
</span>
</div>
</th>
))}
</tr>
</thead>
<tbody
style={{ height: `${virtualizer.getTotalSize()}px` }}
className="relative"
>
{virtualizer.getVirtualItems().map((virtualRow) => {
const item = flatRows[virtualRow.index];
if (item.isSectionHeader) {
return (
<tr
key={`section-${item.sectionKey}`}
className="absolute w-full bg-[color:var(--panel-soft)]"
style={{ transform: `translateY(${virtualRow.start}px)` }}
>
<td colSpan={props.periods.length + 1} className="font-semibold text-[color:var(--terminal-bright)]">
{item.sectionLabel}
<tbody>
{sections.map((section) => (
<Fragment key={section.key}>
{section.label ? (
<tr className="financial-matrix-section-row">
<td
colSpan={periods.length + 1}
className="financial-matrix-section-cell"
>
{section.label}
</td>
</tr>
);
}
const node = item.node;
const isSelected = rowSelected(node, props.selectedRowRef);
const labelIndent = node.kind === 'detail' ? node.level * 16 + 16 : node.level * 16;
const canToggle = isSurfaceNode(node) && node.expandable;
const nextSelection: StatementInspectorSelection = node.kind === 'surface'
? { kind: 'surface', key: node.row.key }
: { kind: 'detail', key: node.row.key, parentKey: node.parentSurfaceKey };
const buttonSize = dense ? 'size-7' : 'size-11';
const buttonClass = dense ? 'rounded' : 'rounded-lg';
const labelSize = dense ? 'text-[13px]' : 'text-sm';
const detailLabelSize = dense ? 'text-xs' : 'text-[13px]';
const paddingY = dense ? 'py-1.5' : 'py-2';
const gapClass = dense ? 'gap-1' : 'gap-2';
return (
<tr
key={node.id}
className={cn('absolute w-full', isSelected && 'bg-[color:rgba(70,77,87,0.48)]')}
style={{ transform: `translateY(${virtualRow.start}px)` }}
>
<td className="sticky left-0 z-10 bg-[color:var(--panel)]">
<div className={cn('flex min-w-[240px] items-start', gapClass)} style={{ paddingLeft: `${labelIndent}px` }}>
{canToggle ? (
<button
type="button"
aria-label={`${node.expanded ? 'Collapse' : 'Expand'} ${node.row.label} details`}
aria-expanded={node.expanded}
aria-controls={`statement-children-${node.id}`}
className={cn(
'mt-0.5 inline-flex shrink-0 items-center justify-center border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)]',
buttonSize,
buttonClass
)}
onClick={(event) => {
event.stopPropagation();
props.onToggleRow(node.row.key);
}}
>
{node.expanded ? <ChevronDown className="size-3.5" /> : <ChevronRight className="size-3.5" />}
</button>
) : (
<span className={cn('inline-flex shrink-0 items-center justify-center text-[color:var(--terminal-muted)]', buttonSize)} aria-hidden="true">
{node.kind === 'detail' ? '·' : ''}
</span>
)}
<button
type="button"
className={cn('flex min-w-0 flex-1 flex-col items-start gap-0.5 text-left', paddingY)}
onClick={() => props.onSelectRow(nextSelection)}
>
<span className={cn(
labelSize,
'text-[color:var(--terminal-bright)]',
node.kind === 'detail' && cn(detailLabelSize, 'text-[color:var(--terminal-soft)]'),
node.kind === 'surface' && node.level > 0 && 'text-[color:var(--terminal-soft)]'
)}>
{node.row.label}
</span>
{node.kind === 'detail' ? (
<span className="text-[10px] text-[color:var(--terminal-muted)]">
{node.row.localName}
{node.row.residualFlag ? ' · residual' : ''}
</span>
) : (
<div className="flex flex-wrap gap-1">
{surfaceBadges(node as any).map((badge) => (
<span
key={`${node.row.key}-${badge.label}`}
className={badgeClass(badge.tone, dense)}
>
{badge.label}
</span>
))}
</div>
)}
</button>
</div>
</td>
{props.periods.map((period, index) => (
<td key={`${node.id}-${period.id}`} className="font-mono text-xs">
{props.renderCellValue(node.row, period.id, index > 0 ? props.periods[index - 1]?.id ?? null : null)}
</td>
))}
</tr>
);
})}
) : null}
{renderNodes({
periods,
sections,
selectedRowRef,
onToggleRow,
onSelectRow,
renderCellValue,
periodLabelFormatter,
dense,
nodes: section.nodes,
})}
</Fragment>
))}
</tbody>
</table>
</div>

36
components/financials/statement-row-inspector.tsx
View File

@@ -1,5 +1,6 @@
"use client";
import { cn } from "@/lib/utils";
import type {
DetailFinancialRow,
DimensionBreakdownRow,
@@ -27,12 +28,14 @@ type StatementRowInspectorProps = {
rowKey: string,
unit: SurfaceFinancialRow["unit"],
) => string;
showHeader?: boolean;
className?: string;
};
function InspectorField(props: { label: string; value: string }) {
return (
<div className="py-1.5">
<p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
<p className="text-[11px] text-[color:var(--terminal-muted)]">
{props.label}
</p>
<p className="text-sm font-medium text-[color:var(--terminal-bright)]">
@@ -57,16 +60,25 @@ export function StatementRowInspector(props: StatementRowInspectorProps) {
: null;
return (
<section className="border-t border-[color:var(--line-weak)] pt-4">
<header className="mb-3">
<h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
Row Details
</h3>
<p className="text-xs text-[color:var(--terminal-muted)]">
Inspect compact-surface resolution, raw drill-down rows, and
dimensional evidence.
</p>
</header>
<section
className={cn(
props.showHeader === false
? ""
: "border-t border-[color:var(--line-weak)] pt-4",
props.className,
)}
>
{props.showHeader === false ? null : (
<header className="mb-3">
<h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
Row Details
</h3>
<p className="text-xs text-[color:var(--terminal-muted)]">
Inspect compact-surface resolution, raw drill-down rows, and
dimensional evidence.
</p>
</header>
)}
{!selection ? (
<p className="text-sm text-[color:var(--terminal-muted)]">
@@ -132,7 +144,7 @@ export function StatementRowInspector(props: StatementRowInspectorProps) {
{selection.detailRows.length > 0 ? (
<div className="border-t border-[color:var(--line-weak)] pt-3">
<p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
<p className="text-[11px] text-[color:var(--terminal-muted)]">
Raw Detail Labels
</p>
<div className="mt-2 flex flex-wrap gap-2">

42
components/shell/app-shell.tsx
View File

@@ -518,8 +518,6 @@ export function AppShell({
return (
<div className="app-surface">
<div className="noise-layer" aria-hidden="true" />
<div
className={cn(
"relative z-10 mx-auto flex min-h-screen w-full max-w-[1440px] gap-6 px-4 pb-10 pt-4 sm:px-5 sm:pb-12 sm:pt-6 md:px-8 lg:gap-8",
@@ -541,15 +539,9 @@ export function AppShell({
>
{!isSidebarCollapsed ? (
<div className="min-w-0">
<p className="terminal-caption text-xs uppercase tracking-[0.25em] text-[color:var(--terminal-muted)]">
Fiscal Clone
</p>
<h1 className="mt-2 text-2xl font-semibold text-[color:var(--terminal-bright)]">
<h1 className="text-lg font-semibold text-[color:var(--terminal-bright)]">
Neon Desk
</h1>
<p className="mt-2 text-sm text-[color:var(--terminal-muted)]">
Financial intelligence cockpit with durable AI workflows.
</p>
</div>
) : null}
@@ -586,7 +578,7 @@ export function AppShell({
aria-hidden="true"
/>
) : (
<p className="terminal-caption px-2 text-[11px] uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">
<p className="px-2 text-[11px] text-[color:var(--terminal-muted)]">
{GROUP_LABELS[group]}
</p>
)}
@@ -603,12 +595,12 @@ export function AppShell({
onFocus={() => prefetchForHref(item.href)}
title={item.label}
className={cn(
"flex items-center rounded-xl border border-transparent text-sm transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--line-strong)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent",
"flex items-center rounded-lg border border-transparent text-sm transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--line-strong)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent",
isSidebarCollapsed
? "justify-center px-0 py-2.5"
: "gap-3 px-2.5 py-1.5",
item.active
? "border-[color:var(--line-strong)] bg-[color:var(--panel-bright)] text-[color:var(--terminal-bright)] shadow-[inset_2px_0_0_var(--accent)]"
? "border-[color:var(--line-strong)] bg-[color:var(--panel-bright)] text-[color:var(--terminal-bright)]"
: "text-[color:var(--terminal-muted)] hover:border-[color:var(--line-weak)] hover:bg-[color:var(--panel-soft)] hover:text-[color:var(--terminal-bright)]",
)}
>
@@ -633,22 +625,15 @@ export function AppShell({
{isSigningOut ? "Signing out..." : "Sign out"}
</Button>
<div className="rounded-[1rem] border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-2.5">
<p className="text-xs uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">
Runtime
</p>
<p className="mt-1 truncate text-sm text-[color:var(--terminal-bright)]">
<div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-2.5">
<p className="text-xs text-[color:var(--terminal-muted)]">
{displayName}
</p>
{role ? (
<p className="mt-1 text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
Role: {role}
<p className="mt-1 text-xs text-[color:var(--terminal-muted)]">
{role}
</p>
) : null}
<p className="mt-2 text-xs text-[color:var(--terminal-muted)]">
AI and market data are driven by environment configuration and
live API tasks.
</p>
</div>
</>
) : null}
@@ -675,10 +660,7 @@ export function AppShell({
</div>
<div className="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between">
<div className="min-w-0 pr-6 sm:pr-0">
<p className="terminal-caption text-xs uppercase tracking-[0.3em] text-[color:var(--terminal-muted)]">
Live System
</p>
<h2 className="mt-2 text-xl font-semibold text-[color:var(--terminal-bright)] sm:text-2xl md:text-3xl">
<h2 className="text-xl font-semibold text-[color:var(--terminal-bright)] sm:text-2xl">
{title}
</h2>
{subtitle ? (
@@ -748,7 +730,7 @@ export function AppShell({
</div>
<nav
className="fixed inset-x-0 bottom-0 z-40 border-t border-[color:var(--line-weak)] bg-[color:rgba(24,27,32,0.96)] px-2 py-2 backdrop-blur lg:hidden"
className="fixed inset-x-0 bottom-0 z-40 border-t border-[color:var(--line-weak)] bg-[color:var(--panel)] px-2 py-2 lg:hidden"
aria-label="Mobile primary"
>
<div
@@ -799,11 +781,11 @@ export function AppShell({
<div
role="dialog"
aria-modal="true"
className="absolute inset-x-3 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-3 shadow-[0_20px_60px_rgba(0,0,0,0.45)]"
className="absolute inset-x-3 rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-3"
style={{ bottom: "calc(4.7rem + env(safe-area-inset-bottom))" }}
onClick={(event) => event.stopPropagation()}
>
<p className="terminal-caption mb-2 px-1 text-[11px] uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">
<p className="mb-2 px-1 text-[11px] text-[color:var(--terminal-muted)]">
More destinations
</p>
<div className="grid grid-cols-2 gap-2">

2
components/ui/button.tsx
View File

@@ -33,7 +33,7 @@ export function Button({
return (
<button
className={cn(
"inline-flex items-center justify-center rounded-xl border font-medium transition duration-200 disabled:cursor-not-allowed disabled:opacity-50",
"inline-flex items-center justify-center rounded-lg border font-medium transition duration-150 disabled:cursor-not-allowed disabled:opacity-50",
variantMap[variant],
sizeMap[size],
className,

2
components/ui/input.tsx
View File

@@ -19,7 +19,7 @@ export function Input({
return (
<input
className={cn(
"w-full rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] text-[color:var(--terminal-bright)] outline-none transition placeholder:text-[color:var(--terminal-muted)] focus:border-[color:var(--line-strong)] focus:shadow-[0_0_0_3px_var(--focus-ring)]",
"w-full rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] text-[color:var(--terminal-bright)] outline-none transition placeholder:text-[color:var(--terminal-muted)] focus:border-[color:var(--line-strong)]",
sizeMap[inputSize],
className,
)}

2
components/ui/panel.tsx
View File

@@ -54,7 +54,7 @@ export function Panel({
"min-w-0",
variant === "surface"
? cn(
"rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] shadow-[0_0_0_1px_rgba(255,255,255,0.03),0_12px_30px_rgba(0,0,0,0.38)]",
"rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel)]",
surfaceStyles,
)
: cn("border-t border-[color:var(--line-weak)]", flatStyles),

19
components/ui/status-pill.tsx
View File

@@ -1,20 +1,25 @@
import { cn } from '@/lib/utils';
import type { TaskStatus } from '@/lib/types';
import { cn } from "@/lib/utils";
import type { TaskStatus } from "@/lib/types";
type StatusPillProps = {
status: TaskStatus;
};
const classes: Record<TaskStatus, string> = {
queued: 'border-[#525861] bg-[#262a30] text-[#c0c7d0]',
running: 'border-[#686e77] bg-[#2d3137] text-[#d8dde4]',
completed: 'border-[#7b828c] bg-[#353a42] text-[#eef2f6]',
failed: 'border-[#8f3d3d] bg-[#431616] text-[#ff9c9c]'
queued: "border-[#525861] bg-[#262a30] text-[#c0c7d0]",
running: "border-[#686e77] bg-[#2d3137] text-[#d8dde4]",
completed: "border-[#7b828c] bg-[#353a42] text-[#eef2f6]",
failed: "border-[#8f3d3d] bg-[#431616] text-[#ff9c9c]",
};
export function StatusPill({ status }: StatusPillProps) {
return (
<span className={cn('inline-flex items-center rounded-full border px-2 py-1 text-xs uppercase tracking-[0.16em]', classes[status])}>
<span
className={cn(
"inline-flex items-center rounded border px-2 py-1 text-xs",
classes[status],
)}
>
{status}
</span>
);