Redesign dashboard/screener UI for improved density and performance
- Add compact/dense CSS tokens for tighter layouts - Add size prop to Button (default/compact) and Input (default/compact) - Add density prop to Panel (normal/compact/dense) - Add size prop to MetricCard (default/compact/inline) - Create IndexCardRow component for horizontal metric display - Create FilterChip component for removable filter tags - Redesign Command Center with flat sections, reduced cards - Tighten AppShell spacing (sidebar w-56, header mb-3, main space-y-4) Design goals achieved: - Denser, cleaner terminal-style layout - Reduced card usage in favor of flat sections with dividers - More space-efficient controls and metrics - Better use of widescreen layouts
This commit is contained in:
251
app/globals.css
251
app/globals.css
@@ -1,8 +1,10 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--font-display: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
||||
--font-mono: "Menlo", "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
|
||||
--font-display:
|
||||
"Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
||||
--font-mono:
|
||||
"Menlo", "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
|
||||
--bg-0: #121417;
|
||||
--bg-1: #181b20;
|
||||
--bg-2: #21252b;
|
||||
@@ -57,8 +59,16 @@ body {
|
||||
font-family: var(--font-display), sans-serif;
|
||||
color: var(--terminal-bright);
|
||||
background:
|
||||
radial-gradient(circle at 18% -10%, rgba(170, 178, 188, 0.16), transparent 35%),
|
||||
radial-gradient(circle at 84% 0%, rgba(121, 128, 138, 0.14), transparent 30%),
|
||||
radial-gradient(
|
||||
circle at 18% -10%,
|
||||
rgba(170, 178, 188, 0.16),
|
||||
transparent 35%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 84% 0%,
|
||||
rgba(121, 128, 138, 0.14),
|
||||
transparent 30%
|
||||
),
|
||||
linear-gradient(140deg, var(--bg-0), var(--bg-1) 50%, var(--bg-2));
|
||||
}
|
||||
|
||||
@@ -85,7 +95,10 @@ body {
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.24;
|
||||
background-image: radial-gradient(rgba(220, 226, 234, 0.1) 0.7px, transparent 0.7px);
|
||||
background-image: radial-gradient(
|
||||
rgba(220, 226, 234, 0.1) 0.7px,
|
||||
transparent 0.7px
|
||||
);
|
||||
background-size: 4px 4px;
|
||||
}
|
||||
|
||||
@@ -114,14 +127,22 @@ textarea {
|
||||
.data-surface {
|
||||
border: 1px solid var(--line-weak);
|
||||
border-radius: 1rem;
|
||||
background: linear-gradient(180deg, rgba(40, 43, 49, 0.92), rgba(24, 27, 32, 0.78));
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(40, 43, 49, 0.92),
|
||||
rgba(24, 27, 32, 0.78)
|
||||
);
|
||||
}
|
||||
|
||||
.data-table-wrap {
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--line-weak);
|
||||
border-radius: 1rem;
|
||||
background: linear-gradient(180deg, rgba(34, 37, 42, 0.9), rgba(20, 23, 27, 0.76));
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(34, 37, 42, 0.9),
|
||||
rgba(20, 23, 27, 0.76)
|
||||
);
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
@@ -172,8 +193,16 @@ textarea {
|
||||
@media (max-width: 640px) {
|
||||
body {
|
||||
background:
|
||||
radial-gradient(circle at 24% -4%, rgba(170, 178, 188, 0.14), transparent 36%),
|
||||
radial-gradient(circle at 82% 2%, rgba(121, 128, 138, 0.12), transparent 30%),
|
||||
radial-gradient(
|
||||
circle at 24% -4%,
|
||||
rgba(170, 178, 188, 0.14),
|
||||
transparent 36%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 82% 2%,
|
||||
rgba(121, 128, 138, 0.12),
|
||||
transparent 30%
|
||||
),
|
||||
linear-gradient(155deg, var(--bg-0), var(--bg-1) 54%, var(--bg-2));
|
||||
}
|
||||
|
||||
@@ -183,3 +212,207 @@ textarea {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-compact {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.panel-dense {
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.data-table-dense {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.data-table-dense th,
|
||||
.data-table-dense td {
|
||||
border-bottom: 1px solid var(--line-weak);
|
||||
padding: 0.5rem 0.6rem;
|
||||
text-align: left;
|
||||
font-size: 0.8125rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.data-table-dense th {
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: 0.6875rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--terminal-muted);
|
||||
}
|
||||
|
||||
.data-table-dense tbody tr:hover {
|
||||
background-color: rgba(63, 68, 76, 0.32);
|
||||
}
|
||||
|
||||
.metric-compact {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.metric-compact .metric-value {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.metric-compact .metric-label {
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
|
||||
.index-card-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.25rem;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.index-card-row::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.index-card-row::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.index-card-row::-webkit-scrollbar-thumb {
|
||||
background: var(--line-weak);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.index-card {
|
||||
flex-shrink: 0;
|
||||
min-width: 140px;
|
||||
padding: 0.625rem 0.75rem;
|
||||
border-right: 1px solid var(--line-weak);
|
||||
}
|
||||
|
||||
.index-card:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.index-card .label {
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: 0.625rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--terminal-muted);
|
||||
}
|
||||
|
||||
.index-card .value {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--terminal-bright);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.index-card .delta {
|
||||
font-size: 0.75rem;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.index-card .delta.positive {
|
||||
color: #96f5bf;
|
||||
}
|
||||
|
||||
.index-card .delta.negative {
|
||||
color: #ff9f9f;
|
||||
}
|
||||
|
||||
.filter-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--line-weak);
|
||||
background: var(--panel-soft);
|
||||
font-size: 0.6875rem;
|
||||
font-family: var(--font-mono), monospace;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--terminal-bright);
|
||||
transition:
|
||||
border-color 0.15s,
|
||||
background-color 0.15s;
|
||||
}
|
||||
|
||||
.filter-chip:hover {
|
||||
border-color: var(--line-strong);
|
||||
}
|
||||
|
||||
.filter-chip .remove {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
transition:
|
||||
opacity 0.15s,
|
||||
background-color 0.15s;
|
||||
}
|
||||
|
||||
.filter-chip .remove:hover {
|
||||
opacity: 1;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
border-top: 1px solid var(--line-weak);
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.section-divider-compact {
|
||||
border-top: 1px solid var(--line-weak);
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
.toolbar-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.screener-table-wrap {
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--line-weak);
|
||||
border-radius: 0.75rem;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(34, 37, 42, 0.9),
|
||||
rgba(20, 23, 27, 0.76)
|
||||
);
|
||||
}
|
||||
|
||||
.screener-table-wrap thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(28, 31, 36, 0.95);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.screener-table-wrap thead::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: var(--line-weak);
|
||||
}
|
||||
|
||||
.control-compact {
|
||||
min-height: 32px;
|
||||
padding: 0.375rem 0.625rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.control-compact.rounded-xl {
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
320
app/page.tsx
320
app/page.tsx
@@ -1,31 +1,32 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import Link from 'next/link';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { Activity, Bot, RefreshCw, Sparkles } from 'lucide-react';
|
||||
import { AppShell } from '@/components/shell/app-shell';
|
||||
import { Panel } from '@/components/ui/panel';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { MetricCard } from '@/components/dashboard/metric-card';
|
||||
import { TaskFeed } from '@/components/dashboard/task-feed';
|
||||
import { useAuthGuard } from '@/hooks/use-auth-guard';
|
||||
import { useLinkPrefetch } from '@/hooks/use-link-prefetch';
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import Link from "next/link";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { Activity, Bot, RefreshCw, Sparkles } from "lucide-react";
|
||||
import { AppShell } from "@/components/shell/app-shell";
|
||||
import { Panel } from "@/components/ui/panel";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { TaskFeed } from "@/components/dashboard/task-feed";
|
||||
import { IndexCardRow } from "@/components/dashboard/index-card-row";
|
||||
import { useAuthGuard } from "@/hooks/use-auth-guard";
|
||||
import { useLinkPrefetch } from "@/hooks/use-link-prefetch";
|
||||
import { queuePortfolioInsights, queuePriceRefresh } from "@/lib/api";
|
||||
import { buildGraphingHref } from "@/lib/graphing/catalog";
|
||||
import type { PortfolioInsight, PortfolioSummary, Task } from "@/lib/types";
|
||||
import {
|
||||
queuePortfolioInsights,
|
||||
queuePriceRefresh
|
||||
} from '@/lib/api';
|
||||
import { buildGraphingHref } from '@/lib/graphing/catalog';
|
||||
import type { PortfolioInsight, PortfolioSummary, Task } from '@/lib/types';
|
||||
import { formatCompactCurrency, formatCurrency, formatPercent } from '@/lib/format';
|
||||
import { queryKeys } from '@/lib/query/keys';
|
||||
formatCompactCurrency,
|
||||
formatCurrency,
|
||||
formatPercent,
|
||||
} from "@/lib/format";
|
||||
import { queryKeys } from "@/lib/query/keys";
|
||||
import {
|
||||
filingsQueryOptions,
|
||||
latestPortfolioInsightQueryOptions,
|
||||
portfolioSummaryQueryOptions,
|
||||
recentTasksQueryOptions,
|
||||
watchlistQueryOptions
|
||||
} from '@/lib/query/options';
|
||||
watchlistQueryOptions,
|
||||
} from "@/lib/query/options";
|
||||
|
||||
type DashboardState = {
|
||||
summary: PortfolioSummary;
|
||||
@@ -38,15 +39,15 @@ type DashboardState = {
|
||||
const EMPTY_STATE: DashboardState = {
|
||||
summary: {
|
||||
positions: 0,
|
||||
total_value: '0',
|
||||
total_gain_loss: '0',
|
||||
total_cost_basis: '0',
|
||||
avg_return_pct: '0'
|
||||
total_value: "0",
|
||||
total_gain_loss: "0",
|
||||
total_cost_basis: "0",
|
||||
avg_return_pct: "0",
|
||||
},
|
||||
filingsCount: 0,
|
||||
watchlistCount: 0,
|
||||
tasks: [],
|
||||
latestInsight: null
|
||||
latestInsight: null,
|
||||
};
|
||||
|
||||
export default function CommandCenterPage() {
|
||||
@@ -71,23 +72,24 @@ export default function CommandCenterPage() {
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const [summaryRes, filingsRes, watchlistRes, tasksRes, insightRes] = await Promise.all([
|
||||
queryClient.ensureQueryData(summaryOptions),
|
||||
queryClient.ensureQueryData(filingsOptions),
|
||||
queryClient.ensureQueryData(watchlistOptions),
|
||||
queryClient.ensureQueryData(tasksOptions),
|
||||
queryClient.ensureQueryData(insightOptions)
|
||||
]);
|
||||
const [summaryRes, filingsRes, watchlistRes, tasksRes, insightRes] =
|
||||
await Promise.all([
|
||||
queryClient.ensureQueryData(summaryOptions),
|
||||
queryClient.ensureQueryData(filingsOptions),
|
||||
queryClient.ensureQueryData(watchlistOptions),
|
||||
queryClient.ensureQueryData(tasksOptions),
|
||||
queryClient.ensureQueryData(insightOptions),
|
||||
]);
|
||||
|
||||
setState({
|
||||
summary: summaryRes.summary,
|
||||
filingsCount: filingsRes.filings.length,
|
||||
watchlistCount: watchlistRes.items.length,
|
||||
tasks: tasksRes.tasks,
|
||||
latestInsight: insightRes.insight
|
||||
latestInsight: insightRes.insight,
|
||||
});
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load dashboard');
|
||||
setError(err instanceof Error ? err.message : "Failed to load dashboard");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -100,39 +102,55 @@ export default function CommandCenterPage() {
|
||||
}, [isPending, isAuthenticated, loadData]);
|
||||
|
||||
const headerActions = (
|
||||
<>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="compact"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await queuePriceRefresh();
|
||||
void queryClient.invalidateQueries({ queryKey: queryKeys.recentTasks(20) });
|
||||
void queryClient.invalidateQueries({ queryKey: queryKeys.portfolioSummary() });
|
||||
void queryClient.invalidateQueries({
|
||||
queryKey: queryKeys.recentTasks(20),
|
||||
});
|
||||
void queryClient.invalidateQueries({
|
||||
queryKey: queryKeys.portfolioSummary(),
|
||||
});
|
||||
await loadData();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to queue price refresh');
|
||||
setError(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "Failed to queue price refresh",
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<RefreshCw className="size-4" />
|
||||
Refresh prices
|
||||
<RefreshCw className="size-3.5" />
|
||||
Refresh
|
||||
</Button>
|
||||
<Button
|
||||
size="compact"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await queuePortfolioInsights();
|
||||
void queryClient.invalidateQueries({ queryKey: queryKeys.recentTasks(20) });
|
||||
void queryClient.invalidateQueries({ queryKey: queryKeys.latestPortfolioInsight() });
|
||||
void queryClient.invalidateQueries({
|
||||
queryKey: queryKeys.recentTasks(20),
|
||||
});
|
||||
void queryClient.invalidateQueries({
|
||||
queryKey: queryKeys.latestPortfolioInsight(),
|
||||
});
|
||||
await loadData();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to queue AI insight');
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to queue AI insight",
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Sparkles className="size-4" />
|
||||
Queue AI insight
|
||||
<Sparkles className="size-3.5" />
|
||||
AI Insight
|
||||
</Button>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
|
||||
const signedGain = useMemo(() => {
|
||||
@@ -140,114 +158,200 @@ export default function CommandCenterPage() {
|
||||
return gain >= 0 ? `+${formatCurrency(gain)}` : formatCurrency(gain);
|
||||
}, [state.summary.total_gain_loss]);
|
||||
|
||||
const indexCards = useMemo(
|
||||
() => [
|
||||
{
|
||||
label: "Portfolio Value",
|
||||
value: formatCurrency(state.summary.total_value),
|
||||
delta: formatCompactCurrency(state.summary.total_cost_basis),
|
||||
},
|
||||
{
|
||||
label: "Unrealized P&L",
|
||||
value: signedGain,
|
||||
delta: formatPercent(state.summary.avg_return_pct),
|
||||
positive: Number(state.summary.total_gain_loss) >= 0,
|
||||
},
|
||||
{
|
||||
label: "Filings",
|
||||
value: String(state.filingsCount),
|
||||
delta: "Last 200",
|
||||
},
|
||||
{
|
||||
label: "Coverage",
|
||||
value: String(state.watchlistCount),
|
||||
delta: `${state.summary.positions} active`,
|
||||
},
|
||||
],
|
||||
[state, signedGain],
|
||||
);
|
||||
|
||||
if (isPending || !isAuthenticated) {
|
||||
return <div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Booting secure terminal...</div>;
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">
|
||||
Booting secure terminal...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
title="Command Center"
|
||||
subtitle={`Welcome back${session?.user?.name ? `, ${session.user.name}` : ''}. Review tasks, portfolio health, and AI outputs.`}
|
||||
subtitle={
|
||||
session?.user?.name
|
||||
? `Welcome back, ${session.user.name}`
|
||||
: "Review tasks, portfolio health, and AI outputs."
|
||||
}
|
||||
actions={headerActions}
|
||||
>
|
||||
{error ? (
|
||||
<Panel variant="surface">
|
||||
<p className="text-sm text-[#ffb5b5]">{error}</p>
|
||||
</Panel>
|
||||
<div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--danger-soft)] px-3 py-2 text-sm text-[#ffb5b5]">
|
||||
{error}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
|
||||
<MetricCard label="Portfolio Value" value={formatCurrency(state.summary.total_value)} delta={formatCompactCurrency(state.summary.total_cost_basis)} />
|
||||
<MetricCard
|
||||
label="Unrealized P&L"
|
||||
value={signedGain}
|
||||
delta={formatPercent(state.summary.avg_return_pct)}
|
||||
positive={Number(state.summary.total_gain_loss) >= 0}
|
||||
/>
|
||||
<MetricCard label="Tracked Filings" value={String(state.filingsCount)} delta="Last 200 records" />
|
||||
<MetricCard label="Coverage Names" value={String(state.watchlistCount)} delta={`${state.summary.positions} positions active`} />
|
||||
<div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)]">
|
||||
<IndexCardRow cards={indexCards} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 xl:grid-cols-3">
|
||||
<Panel title="Recent Tasks" subtitle="Durable jobs from queue processor" className="xl:col-span-1" variant="surface">
|
||||
<div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
|
||||
<div className="border-t border-[color:var(--line-weak)] pt-4 xl:col-span-1">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
|
||||
Recent Tasks
|
||||
</h3>
|
||||
<span className="terminal-caption text-[10px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">
|
||||
Queue Processor
|
||||
</span>
|
||||
</div>
|
||||
{loading ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">Loading tasks...</p>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">
|
||||
Loading...
|
||||
</p>
|
||||
) : (
|
||||
<TaskFeed tasks={state.tasks} />
|
||||
)}
|
||||
</Panel>
|
||||
</div>
|
||||
|
||||
<Panel title="AI Brief" subtitle="Latest portfolio insight from AI SDK (Zhipu)" className="xl:col-span-2" variant="surface">
|
||||
{loading ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">Loading intelligence output...</p>
|
||||
) : state.latestInsight ? (
|
||||
<>
|
||||
<div className="mb-3 inline-flex items-center gap-2 rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-2 py-1 text-xs text-[color:var(--terminal-muted)]">
|
||||
<Bot className="size-3.5" />
|
||||
<div className="border-t border-[color:var(--line-weak)] pt-4 xl:col-span-2">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
|
||||
AI Brief
|
||||
</h3>
|
||||
{state.latestInsight ? (
|
||||
<div className="inline-flex items-center gap-1.5 rounded border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-2 py-0.5 text-[10px] text-[color:var(--terminal-muted)]">
|
||||
<Bot className="size-3" />
|
||||
{state.latestInsight.provider} :: {state.latestInsight.model}
|
||||
</div>
|
||||
<p className="whitespace-pre-wrap text-sm leading-6 text-[color:var(--terminal-bright)]">{state.latestInsight.content}</p>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
{loading ? (
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">
|
||||
Loading...
|
||||
</p>
|
||||
) : state.latestInsight ? (
|
||||
<p className="whitespace-pre-wrap text-sm leading-6 text-[color:var(--terminal-bright)]">
|
||||
{state.latestInsight.content}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">No AI brief yet. Queue one from the action bar.</p>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">
|
||||
No AI brief yet. Queue one from the action bar.
|
||||
</p>
|
||||
)}
|
||||
</Panel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Panel title="Quick Links" subtitle="Feature modules">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
<Link className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]" href="/analysis">
|
||||
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Overview</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Inspect one company across price, SEC context, valuation, and recent developments.</p>
|
||||
</Link>
|
||||
<Link className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]" href="/financials">
|
||||
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Financials</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Focus on multi-period filing metrics, margins, leverage, and balance sheet composition.</p>
|
||||
</Link>
|
||||
<Link className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]" href={buildGraphingHref()}>
|
||||
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Graphing</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Compare one normalized metric across multiple companies with shareable chart state.</p>
|
||||
<div className="border-t border-[color:var(--line-weak)] pt-4">
|
||||
<h3 className="mb-3 text-sm font-semibold text-[color:var(--terminal-bright)]">
|
||||
Quick Links
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<Link
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
href="/analysis"
|
||||
>
|
||||
<p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
|
||||
Overview
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
|
||||
Company analysis, price, valuation, and developments.
|
||||
</p>
|
||||
</Link>
|
||||
<Link
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
href="/financials"
|
||||
>
|
||||
<p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
|
||||
Financials
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
|
||||
Multi-period metrics, margins, and balance sheet.
|
||||
</p>
|
||||
</Link>
|
||||
<Link
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
href={buildGraphingHref()}
|
||||
>
|
||||
<p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
|
||||
Graphing
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
|
||||
Compare normalized metrics across companies.
|
||||
</p>
|
||||
</Link>
|
||||
<Link
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
href="/filings"
|
||||
onMouseEnter={() => {
|
||||
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 }),
|
||||
);
|
||||
}}
|
||||
>
|
||||
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Filings</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Sync SEC filings and trigger AI memo analysis.</p>
|
||||
<p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
|
||||
Filings
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
|
||||
SEC filings and AI memo analysis.
|
||||
</p>
|
||||
</Link>
|
||||
<Link
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
href="/portfolio"
|
||||
onMouseEnter={() => prefetchPortfolioSurfaces()}
|
||||
onFocus={() => prefetchPortfolioSurfaces()}
|
||||
>
|
||||
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Portfolio</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Manage the active private portfolio and mark positions to market.</p>
|
||||
<p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
|
||||
Portfolio
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
|
||||
Manage positions and mark to market.
|
||||
</p>
|
||||
</Link>
|
||||
<Link
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
href="/watchlist"
|
||||
onMouseEnter={() => prefetchPortfolioSurfaces()}
|
||||
onFocus={() => prefetchPortfolioSurfaces()}
|
||||
>
|
||||
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Coverage</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Track research status, review cadence, and filing freshness per company.</p>
|
||||
<p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
|
||||
Coverage
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
|
||||
Track research status and filing freshness.
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
|
||||
<Panel>
|
||||
<div className="flex items-center gap-2 text-xs uppercase tracking-[0.24em] text-[color:var(--terminal-muted)]">
|
||||
<Activity className="size-4" />
|
||||
Runtime state: {loading ? 'syncing' : 'stable'}
|
||||
</div>
|
||||
</Panel>
|
||||
<div className="flex items-center gap-2 text-[10px] uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">
|
||||
<Activity className="size-3" />
|
||||
Runtime: {loading ? "syncing" : "stable"}
|
||||
</div>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user