-
-
Overview
-
Inspect one company across price, SEC context, valuation, and recent developments.
-
-
-
Financials
-
Focus on multi-period filing metrics, margins, leverage, and balance sheet composition.
-
-
-
Graphing
-
Compare one normalized metric across multiple companies with shareable chart state.
+
+
+ Quick Links
+
+
+
+
+ Overview
+
+
+ Company analysis, price, valuation, and developments.
+
+
+ Financials
+
+
+ Multi-period metrics, margins, and balance sheet.
+
+
+
+
+ Graphing
+
+
+ Compare normalized metrics across companies.
+
+
+
{
- void queryClient.prefetchQuery(filingsQueryOptions({ limit: 120 }));
+ void queryClient.prefetchQuery(
+ filingsQueryOptions({ limit: 120 }),
+ );
}}
onFocus={() => {
- void queryClient.prefetchQuery(filingsQueryOptions({ limit: 120 }));
+ void queryClient.prefetchQuery(
+ filingsQueryOptions({ limit: 120 }),
+ );
}}
>
-
Filings
-
Sync SEC filings and trigger AI memo analysis.
+
+ Filings
+
+
+ SEC filings and AI memo analysis.
+
prefetchPortfolioSurfaces()}
onFocus={() => prefetchPortfolioSurfaces()}
>
-
Portfolio
-
Manage the active private portfolio and mark positions to market.
+
+ Portfolio
+
+
+ Manage positions and mark to market.
+
prefetchPortfolioSurfaces()}
onFocus={() => prefetchPortfolioSurfaces()}
>
-
Coverage
-
Track research status, review cadence, and filing freshness per company.
+
+ Coverage
+
+
+ Track research status and filing freshness.
+
-
+
-
-
-
- Runtime state: {loading ? 'syncing' : 'stable'}
-
+
+
+ Runtime: {loading ? "syncing" : "stable"}
+
);
}
diff --git a/components/dashboard/index-card-row.tsx b/components/dashboard/index-card-row.tsx
new file mode 100644
index 0000000..def273b
--- /dev/null
+++ b/components/dashboard/index-card-row.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { memo } from "react";
+import { cn } from "@/lib/utils";
+
+type IndexCardProps = {
+ label: string;
+ value: string;
+ delta?: string;
+ positive?: boolean;
+};
+
+type IndexCardRowProps = {
+ cards: IndexCardProps[];
+ className?: string;
+};
+
+const IndexCard = memo(function IndexCard({
+ label,
+ value,
+ delta,
+ positive = true,
+}: IndexCardProps) {
+ return (
+
+
{label}
+
{value}
+ {delta ? (
+
+ {delta}
+
+ ) : null}
+
+ );
+});
+
+export function IndexCardRow({ cards, className }: IndexCardRowProps) {
+ return (
+
+ {cards.map((card, index) => (
+
+ ))}
+
+ );
+}
diff --git a/components/dashboard/metric-card.tsx b/components/dashboard/metric-card.tsx
index 984d534..220a475 100644
--- a/components/dashboard/metric-card.tsx
+++ b/components/dashboard/metric-card.tsx
@@ -1,4 +1,6 @@
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
+
+type MetricCardSize = "default" | "compact" | "inline";
type MetricCardProps = {
label: string;
@@ -6,15 +8,79 @@ type MetricCardProps = {
delta?: string;
positive?: boolean;
className?: string;
+ size?: MetricCardSize;
};
-export function MetricCard({ label, value, delta, positive = true, className }: MetricCardProps) {
+export function MetricCard({
+ label,
+ value,
+ delta,
+ positive = true,
+ className,
+ size = "default",
+}: MetricCardProps) {
+ if (size === "inline") {
+ return (
+
+
{label}
+
{value}
+ {delta ? (
+
+ {delta}
+
+ ) : null}
+
+ );
+ }
+
+ if (size === "compact") {
+ return (
+
+
+ {label}
+
+
+ {value}
+
+ {delta ? (
+
+ {delta}
+
+ ) : null}
+
+ );
+ }
+
return (
-
-
{label}
-
{value}
+
+
+ {label}
+
+
+ {value}
+
{delta ? (
-
+
{delta}
) : null}
diff --git a/components/shell/app-shell.tsx b/components/shell/app-shell.tsx
index 3bcea89..1608380 100644
--- a/components/shell/app-shell.tsx
+++ b/components/shell/app-shell.tsx
@@ -530,7 +530,7 @@ export function AppShell({
className={cn(
"hidden shrink-0 flex-col gap-4 border-r border-[color:var(--line-weak)] lg:flex",
hasMounted ? "transition-[width,padding] duration-200" : "",
- isSidebarCollapsed ? "w-16 pr-1" : "w-72 pr-4",
+ isSidebarCollapsed ? "w-16 pr-1" : "w-56 pr-4",
)}
>
-
+
{breadcrumbItems.map((item, index) => {
@@ -743,7 +743,7 @@ export function AppShell({
- {children}
+ {children}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 41aa225..31c6d55 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -1,25 +1,42 @@
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
-type ButtonVariant = 'primary' | 'ghost' | 'danger' | 'secondary';
+type ButtonVariant = "primary" | "ghost" | "danger" | "secondary";
+type ButtonSize = "default" | "compact";
type ButtonProps = React.ButtonHTMLAttributes
& {
variant?: ButtonVariant;
+ size?: ButtonSize;
};
const variantMap: Record = {
- primary: 'border-[color:var(--line-strong)] bg-[color:var(--accent)] text-[#16181c] hover:bg-[color:var(--accent-strong)]',
- secondary: 'border-[color:var(--line-weak)] bg-[color:var(--panel-bright)] text-[color:var(--terminal-bright)] hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel)]',
- ghost: 'border-[color:var(--line-weak)] bg-transparent text-[color:var(--terminal-bright)] hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-soft)]',
- danger: 'border-[color:var(--danger)] bg-[color:var(--danger-soft)] text-[#ffc9c9] hover:bg-[color:var(--danger)] hover:text-[#1e0d0d]'
+ primary:
+ "border-[color:var(--line-strong)] bg-[color:var(--accent)] text-[#16181c] hover:bg-[color:var(--accent-strong)]",
+ secondary:
+ "border-[color:var(--line-weak)] bg-[color:var(--panel-bright)] text-[color:var(--terminal-bright)] hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel)]",
+ ghost:
+ "border-[color:var(--line-weak)] bg-transparent text-[color:var(--terminal-bright)] hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-soft)]",
+ danger:
+ "border-[color:var(--danger)] bg-[color:var(--danger-soft)] text-[#ffc9c9] hover:bg-[color:var(--danger)] hover:text-[#1e0d0d]",
};
-export function Button({ className, variant = 'primary', ...props }: ButtonProps) {
+const sizeMap: Record = {
+ default: "min-h-11 px-3 py-2 text-sm gap-2",
+ compact: "min-h-8 px-2.5 py-1.5 text-xs gap-1.5",
+};
+
+export function Button({
+ className,
+ variant = "primary",
+ size = "default",
+ ...props
+}: ButtonProps) {
return (
diff --git a/components/ui/filter-chip.tsx b/components/ui/filter-chip.tsx
new file mode 100644
index 0000000..e66b56b
--- /dev/null
+++ b/components/ui/filter-chip.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+type FilterChipProps = {
+ label: string;
+ onRemove: () => void;
+ className?: string;
+};
+
+export function FilterChip({ label, onRemove, className }: FilterChipProps) {
+ return (
+
+ {label}
+
+
+ );
+}
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
index 94ce96a..705cf69 100644
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -1,13 +1,27 @@
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
-type InputProps = React.InputHTMLAttributes;
+type InputSize = "default" | "compact";
-export function Input({ className, ...props }: InputProps) {
+type InputProps = React.InputHTMLAttributes & {
+ inputSize?: InputSize;
+};
+
+const sizeMap: Record = {
+ default: "min-h-11 px-3 py-2 text-sm",
+ compact: "min-h-8 px-2.5 py-1.5 text-xs",
+};
+
+export function Input({
+ className,
+ inputSize = "default",
+ ...props
+}: InputProps) {
return (
diff --git a/components/ui/panel.tsx b/components/ui/panel.tsx
index ce3a701..42fa832 100644
--- a/components/ui/panel.tsx
+++ b/components/ui/panel.tsx
@@ -1,4 +1,7 @@
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
+
+type PanelVariant = "flat" | "surface";
+type PanelDensity = "normal" | "compact" | "dense";
type PanelProps = {
title?: string;
@@ -6,24 +9,82 @@ type PanelProps = {
actions?: React.ReactNode;
children: React.ReactNode;
className?: string;
- variant?: 'flat' | 'surface';
+ variant?: PanelVariant;
+ density?: PanelDensity;
};
-export function Panel({ title, subtitle, actions, children, className, variant = 'flat' }: PanelProps) {
+const densityStyles: Record = {
+ normal: "",
+ compact: "",
+ dense: "",
+};
+
+const headerDensityStyles: Record = {
+ normal: "mb-4",
+ compact: "mb-3",
+ dense: "mb-2",
+};
+
+export function Panel({
+ title,
+ subtitle,
+ actions,
+ children,
+ className,
+ variant = "flat",
+ density = "normal",
+}: PanelProps) {
+ const surfaceStyles =
+ density === "normal"
+ ? "p-4 sm:p-5"
+ : density === "compact"
+ ? "p-3 sm:p-4"
+ : "p-2.5 sm:p-3";
+
+ const flatStyles =
+ density === "normal"
+ ? "pt-4 sm:pt-5"
+ : density === "compact"
+ ? "pt-3 sm:pt-4"
+ : "pt-2.5 sm:pt-3";
+
return (
- {(title || subtitle || actions) ? (
-
+ {title || subtitle || actions ? (
+