+ {/* Header - Simplified */}
+
+
+ !
+
+
+
{error.title}
+
{error.message}
-
- {metadata.length > 0 && (
-
- {metadata.map((item) => (
-
- {item.label}: {item.value}
-
- ))}
-
- )}
+ {/* Metadata - Simplified */}
+ {metadata.length > 0 && (
+
+ {metadata.map((item) => (
+
+ {item.label}: {item.value}
+
+ ))}
+
+ )}
- {error.detail && (
-
-
- Details
-
-
- {error.detail}
-
+ {/* Detail - Simplified */}
+ {error.detail && (
+
+
+ {error.detail}
+
+
+ )}
);
};
diff --git a/MosaicIQ/src/components/Panels/FinancialsPanel.tsx b/MosaicIQ/src/components/Panels/FinancialsPanel.tsx
new file mode 100644
index 0000000..c068b4d
--- /dev/null
+++ b/MosaicIQ/src/components/Panels/FinancialsPanel.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { FinancialsPanelData } from '../../types/financial';
+import { StatementTableMinimal, formatMoney, formatNumber } from '../ui/StatementTableMinimal';
+
+interface FinancialsPanelProps {
+ data: FinancialsPanelData;
+}
+
+const SourceAttribution: React.FC<{ status: FinancialsPanelData['sourceStatus'] }> = ({ status }) => {
+ return (
+
+ SEC EDGAR • companyfacts
+ {status.latestXbrlParsed ? ' • latest filing parsed with crabrl' : ''}
+ {status.degradedReason && (
+
{status.degradedReason}
+ )}
+
+ );
+};
+
+export const FinancialsPanel: React.FC
= ({ data }) => {
+ return (
+
+ {/* Header - Minimal */}
+
+
+
+
{data.symbol} Financials
+
+ {data.companyName} • {data.frequency}
+
+
+
+
CIK {data.cik}
+ {data.latestFiling && (
+
+ {data.latestFiling.form} filed {data.latestFiling.filingDate}
+
+ )}
+
+
+
+ {/* Table - Minimal styling */}
+
+ formatMoney(period.revenue) },
+ { key: 'grossProfit', label: 'Gross Profit', render: (period) => formatMoney(period.grossProfit) },
+ { key: 'operatingIncome', label: 'Operating Income', render: (period) => formatMoney(period.operatingIncome) },
+ { key: 'netIncome', label: 'Net Income', render: (period) => formatMoney(period.netIncome) },
+ { key: 'dilutedEps', label: 'Diluted EPS', render: (period) => formatMoney(period.dilutedEps) },
+ { key: 'cash', label: 'Cash & Equivalents', render: (period) => formatMoney(period.cashAndEquivalents) },
+ { key: 'assets', label: 'Total Assets', render: (period) => formatMoney(period.totalAssets) },
+ { key: 'liabilities', label: 'Total Liabilities', render: (period) => formatMoney(period.totalLiabilities) },
+ { key: 'equity', label: 'Total Equity', render: (period) => formatMoney(period.totalEquity) },
+ { key: 'shares', label: 'Shares Outstanding', render: (period) => formatNumber(period.sharesOutstanding) },
+ ]}
+ />
+
+
+ {/* Footer - Minimal attribution */}
+
+
- {/* Header */}
-
-
-
- {ticker ? `News: ${ticker.toUpperCase()}` : 'Market News'}
-
- {news.length} articles
-
-
+
+ {/* Header - Inline with badges */}
+
+
+ {ticker ? `News: ${ticker.toUpperCase()}` : 'Market News'}
+
+ {ticker && (
+
+ {ticker}
+
+ )}
+
+ {news.length}
+
+
- {/* News List */}
-
- {news.map((item) => (
-
- {/* Source & Time */}
-
-
- {item.source}
-
-
- {formatTime(item.timestamp)}
-
-
+ {/* News List - Minimal dividers */}
+ {news.length > 0 ? (
+
+ {news.map((item, idx) => (
+
+ {idx > 0 && }
- {/* Headline */}
-
- {item.headline}
-
-
- {/* Snippet */}
-
- {item.snippet}
-
-
- {/* Related Tickers */}
- {item.relatedTickers.length > 0 && (
-
- {item.relatedTickers.map((ticker) => (
-
- {ticker}
-
- ))}
+ {/* Source & Time */}
+
+
+ {item.source}
+
+
+ {formatTime(item.timestamp)}
+
- )}
-
- ))}
-
+ {item.headline}
+
+
+ {/* Snippet */}
+
+ {item.snippet}
+
+
+ {/* Related Tickers */}
+ {item.relatedTickers.length > 0 && (
+
+ {item.relatedTickers.map((ticker) => (
+
+ {ticker}
+
+ ))}
+
+ )}
+
+ ))}
+
📰
No news articles found
diff --git a/MosaicIQ/src/components/Panels/PortfolioPanel.tsx b/MosaicIQ/src/components/Panels/PortfolioPanel.tsx
index f7080de..93bab8b 100644
--- a/MosaicIQ/src/components/Panels/PortfolioPanel.tsx
+++ b/MosaicIQ/src/components/Panels/PortfolioPanel.tsx
@@ -1,74 +1,69 @@
import React from 'react';
import { Portfolio } from '../../types/financial';
+import { MetricGrid } from '../ui';
interface PortfolioPanelProps {
portfolio: Portfolio;
}
-export const PortfolioPanel: React.FC
= ({ portfolio }) => {
- const formatCurrency = (value: number) => {
- return `$${value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
- };
+const formatCurrency = (value: number) => {
+ return `$${value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+};
+export const PortfolioPanel: React.FC = ({ portfolio }) => {
const totalGainPositive = portfolio.totalGain >= 0;
const dayChangePositive = portfolio.dayChange >= 0;
+ const summaryMetrics = [
+ {
+ label: 'Total Value',
+ value: formatCurrency(portfolio.totalValue),
+ size: 'lg' as const,
+ },
+ {
+ label: "Today's Change",
+ value: `${dayChangePositive ? '+' : ''}${formatCurrency(portfolio.dayChange)} (${dayChangePositive ? '+' : ''}${portfolio.dayChangePercent.toFixed(2)}%)`,
+ sentiment: (dayChangePositive ? 'positive' : 'negative') as 'positive' | 'negative',
+ },
+ {
+ label: 'Total Gain/Loss',
+ value: `${totalGainPositive ? '+' : ''}${formatCurrency(portfolio.totalGain)} (${totalGainPositive ? '+' : ''}${portfolio.totalGainPercent.toFixed(2)}%)`,
+ sentiment: (totalGainPositive ? 'positive' : 'negative') as 'positive' | 'negative',
+ },
+ ];
+
return (
-
+
{/* Header */}
-
-
Portfolio Summary
-
+
- {/* Summary Stats */}
-
- {/* Total Value */}
-
-
Total Value
-
- {formatCurrency(portfolio.totalValue)}
-
-
+ {/* Summary Stats - Inline metric grid */}
+
- {/* Day Change */}
-
-
Today's Change
-
- {dayChangePositive ? '+' : ''}{formatCurrency(portfolio.dayChange)} ({dayChangePositive ? '+' : ''}{portfolio.dayChangePercent.toFixed(2)}%)
-
-
-
- {/* Total Gain */}
-
-
Total Gain/Loss
-
- {totalGainPositive ? '+' : ''}{formatCurrency(portfolio.totalGain)} ({totalGainPositive ? '+' : ''}{portfolio.totalGainPercent.toFixed(2)}%)
-
-
-
-
- {/* Holdings Table */}
-
-
-
Holdings ({portfolio.holdings.length})
-
+ {/* Holdings Table - Minimal */}
+
+ Holdings ({portfolio.holdings.length})
-
-
- | Symbol |
- Qty |
- Avg Cost |
- Current |
- Value |
- Gain/Loss |
+
+
+ | Symbol |
+ Qty |
+ Avg Cost |
+ Current |
+ Value |
+ Gain/Loss |
-
+
{portfolio.holdings.map((holding) => {
const gainPositive = holding.gainLoss >= 0;
return (
-
+
|
{holding.symbol}
{holding.name}
@@ -89,7 +84,7 @@ export const PortfolioPanel: React.FC = ({ portfolio }) =>
|
-
+
);
};
diff --git a/MosaicIQ/src/components/Panels/SecPanelChrome.tsx b/MosaicIQ/src/components/Panels/SecPanelChrome.tsx
new file mode 100644
index 0000000..135eabd
--- /dev/null
+++ b/MosaicIQ/src/components/Panels/SecPanelChrome.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { FilingRef, SourceStatus } from '../../types/financial';
+
+interface SecPanelChromeProps {
+ title: string;
+ subtitle: string;
+ cik: string;
+ latestFiling?: FilingRef;
+ sourceStatus: SourceStatus;
+ children: React.ReactNode;
+}
+
+export const SecPanelChrome: React.FC
= ({
+ title,
+ subtitle,
+ cik,
+ latestFiling,
+ sourceStatus,
+ children,
+}) => {
+ return (
+
+
+
+
+
+
CIK {cik}
+ {latestFiling && (
+
+ {latestFiling.form} filed {latestFiling.filingDate}
+
+ )}
+
+
+
+
+
{children}
+
+
+
+ SEC EDGAR • companyfacts
+ {sourceStatus.latestXbrlParsed ? ' • latest filing parsed with crabrl' : ''}
+
+ {sourceStatus.degradedReason && (
+
{sourceStatus.degradedReason}
+ )}
+
+
{
+ key: string;
+ label: string;
+ render: (period: Row) => React.ReactNode;
+}
+
+interface StatementTablePanelProps {
+ periods: Row[];
+ metrics: StatementMetric[];
+}
+
+const numericFormatter = new Intl.NumberFormat('en-US', {
+ maximumFractionDigits: 2,
+});
+
+const isMissingNumber = (value: number | null | undefined): value is null | undefined =>
+ value === null || value === undefined || Number.isNaN(value);
+
+export const formatMoney = (value?: number | null) => {
+ if (isMissingNumber(value)) return '—';
+ if (Math.abs(value) >= 1e12) return `$${(value / 1e12).toFixed(2)}T`;
+ if (Math.abs(value) >= 1e9) return `$${(value / 1e9).toFixed(2)}B`;
+ if (Math.abs(value) >= 1e6) return `$${(value / 1e6).toFixed(2)}M`;
+ return `$${numericFormatter.format(value)}`;
+};
+
+export const formatNumber = (value?: number | null) =>
+ isMissingNumber(value) ? '—' : numericFormatter.format(value);
+
+export const formatPercent = (value?: number | null) =>
+ isMissingNumber(value) ? '—' : `${value >= 0 ? '+' : ''}${value.toFixed(1)}%`;
+
+export function StatementTablePanel({
+ periods,
+ metrics,
+}: StatementTablePanelProps) {
+ return (
+
+
+
+
+ |
+ Item
+ |
+ {periods.map((period) => (
+
+ {period.label}
+ |
+ ))}
+
+
+
+ {metrics.map((metric) => (
+
+ |
+ {metric.label}
+ |
+ {periods.map((period) => (
+
+ {metric.render(period)}
+ |
+ ))}
+
+ ))}
+
+
+
+
{companies.map((company) => {
const isPositive = company.change >= 0;
@@ -21,20 +22,35 @@ export const CompanyList: React.FC
= ({ companies, onCompanyCl
);
diff --git a/MosaicIQ/src/components/Sidebar/PortfolioSummary.tsx b/MosaicIQ/src/components/Sidebar/PortfolioSummary.tsx
index fd37ca8..2d7fcea 100644
--- a/MosaicIQ/src/components/Sidebar/PortfolioSummary.tsx
+++ b/MosaicIQ/src/components/Sidebar/PortfolioSummary.tsx
@@ -1,11 +1,15 @@
-import React from 'react';
+import React, { useState } from 'react';
import { Portfolio } from '../../types/financial';
+import { ChevronDown, ChevronUp, TrendingUp, TrendingDown } from 'lucide-react';
interface PortfolioSummaryProps {
portfolio: Portfolio;
}
export const PortfolioSummary: React.FC = ({ portfolio }) => {
+ const [isExpanded, setIsExpanded] = useState(false);
+ const INITIAL_HOLDINGS_COUNT = 3;
+
const formatCurrency = (value: number) => {
if (value >= 1000) {
return `$${(value / 1000).toFixed(1)}K`;
@@ -14,38 +18,95 @@ export const PortfolioSummary: React.FC = ({ portfolio })
};
const isPositive = portfolio.dayChange >= 0;
+ const visibleHoldings = isExpanded ? portfolio.holdings : portfolio.holdings.slice(0, INITIAL_HOLDINGS_COUNT);
+ const hasMoreHoldings = portfolio.holdings.length > INITIAL_HOLDINGS_COUNT;
return (
-
-
-
Portfolio
- {portfolio.holdings.length} positions
-
+
+