@keyueclaw/web-sdk 0.1.82 → 0.1.83

package/dist/ui/src/ui/views/skills.d.ts

@@ -1,107 +0,0 @@
-import "../components/code-editor.ts";
-import type { SkillFilesListResult } from "../controllers/skill-files.ts";
-import type { SkillMessageMap, TeamSkillEntry } from "../controllers/skills.ts";
-import type { SkillStatusReport } from "../types.ts";
-export type SkillsProps = {
-    connected: boolean;
-    loading: boolean;
-    report: SkillStatusReport | null;
-    error: string | null;
-    filter: string;
-    edits: Record<string, string>;
-    busyKey: string | null;
-    messages: SkillMessageMap;
-    onFilterChange: (next: string) => void;
-    onRefresh: () => void;
-    onToggle: (skillKey: string, enabled: boolean) => void;
-    onEdit: (skillKey: string, value: string) => void;
-    onSaveKey: (skillKey: string) => void;
-    onInstall: (skillKey: string, name: string, installId: string) => void;
-    skillFilesLists: Record<string, SkillFilesListResult>;
-    skillFilesContents: Record<string, string>;
-    skillFilesDrafts: Record<string, string>;
-    skillFilesActiveKey: string | null;
-    skillFilesActiveName: string | null;
-    skillFilesLoading: boolean;
-    skillFilesSaving: boolean;
-    skillFilesError: string | null;
-    skillFilesFullscreen: boolean;
-    onOpenEditor: (skillKey: string) => void;
-    onCloseEditor: () => void;
-    onToggleFullscreen: () => void;
-    onSelectFile: (skillKey: string, name: string) => void;
-    onRefreshFilesList: (skillKey: string) => void;
-    onEditFileDraft: (skillKey: string, name: string, value: string) => void;
-    onSaveFile: (skillKey: string, name: string, content: string) => void;
-    skillFilesBackConfirm: boolean;
-    onShowBackConfirm: () => void;
-    onHideBackConfirm: () => void;
-    skillDeleteConfirmKey: string | null;
-    onRequestDelete: (skillKey: string) => void;
-    onConfirmDelete: (skillKey: string) => void;
-    onCancelDelete: () => void;
-    skillExportBusyKey: string | null;
-    onExport: (skillKey: string) => void;
-    skillCreateMode: boolean;
-    skillCreateName: string;
-    skillCreateDesc: string;
-    skillCreateBusy: boolean;
-    skillCreateError: string | null;
-    onStartCreate: () => void;
-    onCancelCreate: () => void;
-    onCreateNameChange: (v: string) => void;
-    onCreateDescChange: (v: string) => void;
-    onSubmitCreate: () => void;
-    skillAiDialogOpen: boolean;
-    skillAiFormName: string;
-    skillAiFormDesc: string;
-    skillAiFormTrigger: string;
-    skillAiFormInstruction: string;
-    skillAiFormExample: string;
-    skillAiFormError: string | null;
-    onOpenAiDialog: () => void;
-    onCloseAiDialog: () => void;
-    onAiFormChange: (field: string, value: string) => void;
-    onStartAiGenerate: () => void;
-    skillAiBuilderMode: boolean;
-    skillAiBuilderSkillKey: string | null;
-    skillAiBuilderBuilding: boolean;
-    skillAiBuilderActiveTab: string;
-    skillAiBuilderOpenTabs: string[];
-    skillAiChatMessages: unknown[];
-    skillAiChatStream: string | null;
-    skillAiChatSending: boolean;
-    skillAiChatMessage: string;
-    skillAiToolCalls: Array<{
-        toolCallId: string;
-        name: string;
-        phase: "pending" | "done";
-    }>;
-    onSkillAiTabChange: (tab: string) => void;
-    onSkillAiChatMessageChange: (v: string) => void;
-    onSkillAiChatSend: () => void;
-    onCloseAiBuilder: () => void;
-    skillAiBuilderExitConfirm: boolean;
-    onConfirmExitBuilder: () => void;
-    onCancelExitBuilder: () => void;
-    onSkillAiFileTabOpen: (filename: string) => void;
-    skillUploadBusy: boolean;
-    skillUploadError: string | null;
-    skillUploadOverwriteKey: string | null;
-    onUploadFile: (file: File) => void;
-    onConfirmOverwrite: () => void;
-    onCancelOverwrite: () => void;
-    skillsTab: "personal" | "team";
-    onTabChange: (tab: "personal" | "team") => void;
-    skillMenuOpenKey: string | null;
-    onMenuOpen: (skillKey: string) => void;
-    onMenuClose: () => void;
-    teamSkillsLoading: boolean;
-    teamSkillsReport: TeamSkillEntry[] | null;
-    teamSkillsError: string | null;
-    teamSkillsSyncBusyKey: string | null;
-    teamSkillsSyncedKeys: string[];
-    onSyncTeamSkill: (id: string) => void;
-    onRefreshTeamSkills: () => void;
-};
-export declare function renderSkills(props: SkillsProps): import("lit").TemplateResult<1>;

package/dist/ui/src/ui/views/usage-metrics.d.ts

@@ -1,30 +0,0 @@
-import { UsageSessionEntry, UsageTotals, UsageAggregates } from "./usageTypes.ts";
-declare function charsToTokens(chars: number): number;
-declare function formatTokens(n: number): string;
-declare function formatHourLabel(hour: number): string;
-declare function buildPeakErrorHours(sessions: UsageSessionEntry[], timeZone: "local" | "utc"): any;
-declare function getZonedHour(date: Date, zone: "local" | "utc"): number;
-declare function setToHourEnd(date: Date, zone: "local" | "utc"): Date;
-declare function renderUsageMosaic(sessions: UsageSessionEntry[], timeZone: "local" | "utc", selectedHours: number[], onSelectHour: (hour: number, shiftKey: boolean) => void): import("lit").TemplateResult<1>;
-declare function formatCost(n: number, decimals?: number): string;
-declare function formatIsoDate(date: Date): string;
-declare function formatDayLabel(dateStr: string): string;
-declare function formatFullDate(dateStr: string): string;
-declare const buildAggregatesFromSessions: (sessions: UsageSessionEntry[], fallback?: UsageAggregates | null) => UsageAggregates;
-type UsageInsightStats = {
-    durationSumMs: number;
-    durationCount: number;
-    avgDurationMs: number;
-    throughputTokensPerMin?: number;
-    throughputCostPerMin?: number;
-    errorRate: number;
-    peakErrorDay?: {
-        date: string;
-        errors: number;
-        messages: number;
-        rate: number;
-    };
-};
-declare const buildUsageInsightStats: (sessions: UsageSessionEntry[], totals: UsageTotals | null, aggregates: UsageAggregates) => UsageInsightStats;
-export type { UsageInsightStats };
-export { buildAggregatesFromSessions, buildPeakErrorHours, buildUsageInsightStats, charsToTokens, formatCost, formatDayLabel, formatFullDate, formatHourLabel, formatIsoDate, formatTokens, getZonedHour, renderUsageMosaic, setToHourEnd, };

package/dist/ui/src/ui/views/usage-query.d.ts

@@ -1,16 +0,0 @@
-import { CostDailyEntry, UsageAggregates, UsageSessionEntry } from "./usageTypes.ts";
-declare function downloadTextFile(filename: string, content: string, type?: string): void;
-declare const buildSessionsCsv: (sessions: UsageSessionEntry[]) => string;
-declare const buildDailyCsv: (daily: CostDailyEntry[]) => string;
-type QuerySuggestion = {
-    label: string;
-    value: string;
-};
-declare const buildQuerySuggestions: (query: string, sessions: UsageSessionEntry[], aggregates?: UsageAggregates | null) => QuerySuggestion[];
-declare const applySuggestionToQuery: (query: string, suggestion: string) => string;
-declare const normalizeQueryText: (value: string) => string;
-declare const addQueryToken: (query: string, token: string) => string;
-declare const removeQueryToken: (query: string, token: string) => string;
-declare const setQueryTokensForKey: (query: string, key: string, values: string[]) => string;
-export type { QuerySuggestion };
-export { addQueryToken, applySuggestionToQuery, buildDailyCsv, buildQuerySuggestions, buildSessionsCsv, downloadTextFile, normalizeQueryText, removeQueryToken, setQueryTokensForKey, };

package/dist/ui/src/ui/views/usage-render-details.d.ts

@@ -1,26 +0,0 @@
-import { SessionLogEntry, SessionLogRole, TimeSeriesPoint, UsageSessionEntry } from "./usageTypes.ts";
-declare const CHART_BAR_WIDTH_RATIO = 0.75;
-declare const CHART_MAX_BAR_WIDTH = 8;
-declare function renderEmptyDetailState(): symbol;
-declare function renderSessionSummary(session: UsageSessionEntry, filteredUsage?: UsageSessionEntry["usage"], filteredLogs?: SessionLogEntry[]): import("lit").TemplateResult<1>;
-/** Aggregate usage stats from time series points within a timestamp range. */
-declare function computeFilteredUsage(baseUsage: NonNullable<UsageSessionEntry["usage"]>, points: TimeSeriesPoint[], rangeStart: number, rangeEnd: number): UsageSessionEntry["usage"] | undefined;
-declare function renderSessionDetailPanel(session: UsageSessionEntry, timeSeries: {
-    points: TimeSeriesPoint[];
-} | null, timeSeriesLoading: boolean, timeSeriesMode: "cumulative" | "per-turn", onTimeSeriesModeChange: (mode: "cumulative" | "per-turn") => void, timeSeriesBreakdownMode: "total" | "by-type", onTimeSeriesBreakdownChange: (mode: "total" | "by-type") => void, timeSeriesCursorStart: number | null, timeSeriesCursorEnd: number | null, onTimeSeriesCursorRangeChange: (start: number | null, end: number | null) => void, startDate: string, endDate: string, selectedDays: string[], sessionLogs: SessionLogEntry[] | null, sessionLogsLoading: boolean, sessionLogsExpanded: boolean, onToggleSessionLogsExpanded: () => void, logFilters: {
-    roles: SessionLogRole[];
-    tools: string[];
-    hasTools: boolean;
-    query: string;
-}, onLogFilterRolesChange: (next: SessionLogRole[]) => void, onLogFilterToolsChange: (next: string[]) => void, onLogFilterHasToolsChange: (next: boolean) => void, onLogFilterQueryChange: (next: string) => void, onLogFilterClear: () => void, contextExpanded: boolean, onToggleContextExpanded: () => void, onClose: () => void): import("lit").TemplateResult<1>;
-declare function renderTimeSeriesCompact(timeSeries: {
-    points: TimeSeriesPoint[];
-} | null, loading: boolean, mode: "cumulative" | "per-turn", onModeChange: (mode: "cumulative" | "per-turn") => void, breakdownMode: "total" | "by-type", onBreakdownChange: (mode: "total" | "by-type") => void, startDate?: string, endDate?: string, selectedDays?: string[], cursorStart?: number | null, cursorEnd?: number | null, onCursorRangeChange?: (start: number | null, end: number | null) => void): import("lit").TemplateResult<1>;
-declare function renderContextPanel(contextWeight: UsageSessionEntry["contextWeight"], usage: UsageSessionEntry["usage"], expanded: boolean, onToggleExpanded: () => void): import("lit").TemplateResult<1>;
-declare function renderSessionLogsCompact(logs: SessionLogEntry[] | null, loading: boolean, expandedAll: boolean, onToggleExpandedAll: () => void, filters: {
-    roles: SessionLogRole[];
-    tools: string[];
-    hasTools: boolean;
-    query: string;
-}, onFilterRolesChange: (next: SessionLogRole[]) => void, onFilterToolsChange: (next: string[]) => void, onFilterHasToolsChange: (next: boolean) => void, onFilterQueryChange: (next: string) => void, onFilterClear: () => void, cursorStart?: number | null, cursorEnd?: number | null): import("lit").TemplateResult<1>;
-export { computeFilteredUsage, renderContextPanel, renderEmptyDetailState, renderSessionDetailPanel, renderSessionLogsCompact, renderSessionSummary, renderTimeSeriesCompact, CHART_BAR_WIDTH_RATIO, CHART_MAX_BAR_WIDTH, };

package/dist/ui/src/ui/views/usage-render-overview.d.ts

@@ -1,23 +0,0 @@
-import { nothing } from "lit";
-import { UsageInsightStats } from "./usage-metrics.ts";
-import { UsageAggregates, UsageColumnId, UsageSessionEntry, UsageTotals, CostDailyEntry } from "./usageTypes.ts";
-declare function renderFilterChips(selectedDays: string[], selectedHours: number[], selectedSessions: string[], sessions: UsageSessionEntry[], onClearDays: () => void, onClearHours: () => void, onClearSessions: () => void, onClearFilters: () => void): import("lit").TemplateResult<1> | typeof nothing;
-declare function renderDailyChartCompact(daily: CostDailyEntry[], selectedDays: string[], chartMode: "tokens" | "cost", dailyChartMode: "total" | "by-type", onDailyChartModeChange: (mode: "total" | "by-type") => void, onSelectDay: (day: string, shiftKey: boolean) => void): import("lit").TemplateResult<1>;
-declare function renderCostBreakdownCompact(totals: UsageTotals, mode: "tokens" | "cost"): import("lit").TemplateResult<1>;
-declare function renderInsightList(title: string, items: Array<{
-    label: string;
-    value: string;
-    sub?: string;
-}>, emptyLabel: string): import("lit").TemplateResult<1>;
-declare function renderPeakErrorList(title: string, items: Array<{
-    label: string;
-    value: string;
-    sub?: string;
-}>, emptyLabel: string): import("lit").TemplateResult<1>;
-declare function renderUsageInsights(totals: UsageTotals | null, aggregates: UsageAggregates, stats: UsageInsightStats, showCostHint: boolean, errorHours: Array<{
-    label: string;
-    value: string;
-    sub?: string;
-}>, sessionCount: number, totalSessions: number): import("lit").TemplateResult<1> | typeof nothing;
-declare function renderSessionsCard(sessions: UsageSessionEntry[], selectedSessions: string[], selectedDays: string[], isTokenMode: boolean, sessionSort: "tokens" | "cost" | "recent" | "messages" | "errors", sessionSortDir: "asc" | "desc", recentSessions: string[], sessionsTab: "all" | "recent", onSelectSession: (key: string, shiftKey: boolean) => void, onSessionSortChange: (sort: "tokens" | "cost" | "recent" | "messages" | "errors") => void, onSessionSortDirChange: (dir: "asc" | "desc") => void, onSessionsTabChange: (tab: "all" | "recent") => void, visibleColumns: UsageColumnId[], totalSessions: number, onClearSessions: () => void): import("lit").TemplateResult<1>;
-export { renderCostBreakdownCompact, renderDailyChartCompact, renderFilterChips, renderInsightList, renderPeakErrorList, renderSessionsCard, renderUsageInsights, };

package/dist/ui/src/ui/views/usage-styles/usageStyles-part1.d.ts

@@ -1 +0,0 @@
-export declare const usageStylesPart1 = "\n  .usage-page-header {\n    margin: 4px 0 12px;\n  }\n  .usage-page-title {\n    font-size: 28px;\n    font-weight: 700;\n    letter-spacing: -0.02em;\n    margin-bottom: 4px;\n  }\n  .usage-page-subtitle {\n    font-size: 13px;\n    color: var(--muted);\n    margin: 0 0 12px;\n  }\n  /* ===== FILTERS & HEADER ===== */\n  .usage-filters-inline {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-wrap: wrap;\n  }\n  .usage-filters-inline select {\n    padding: 6px 10px;\n    border: 1px solid var(--border);\n    border-radius: 6px;\n    background: var(--bg);\n    color: var(--text);\n    font-size: 13px;\n  }\n  .usage-filters-inline input[type=\"date\"] {\n    padding: 6px 10px;\n    border: 1px solid var(--border);\n    border-radius: 6px;\n    background: var(--bg);\n    color: var(--text);\n    font-size: 13px;\n  }\n  .usage-filters-inline input[type=\"text\"] {\n    padding: 6px 10px;\n    border: 1px solid var(--border);\n    border-radius: 6px;\n    background: var(--bg);\n    color: var(--text);\n    font-size: 13px;\n    min-width: 180px;\n  }\n  .usage-filters-inline .btn-sm {\n    padding: 6px 12px;\n    font-size: 14px;\n  }\n  .usage-refresh-indicator {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    background: rgba(255, 77, 77, 0.1);\n    border-radius: 4px;\n    font-size: 12px;\n    color: #ff4d4d;\n  }\n  .usage-refresh-indicator::before {\n    content: \"\";\n    width: 10px;\n    height: 10px;\n    border: 2px solid #ff4d4d;\n    border-top-color: transparent;\n    border-radius: 50%;\n    animation: usage-spin 0.6s linear infinite;\n  }\n  @keyframes usage-spin {\n    to { transform: rotate(360deg); }\n  }\n  .active-filters {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n  .filter-chip {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 8px 4px 12px;\n    background: var(--accent-subtle);\n    border: 1px solid var(--accent);\n    border-radius: 16px;\n    font-size: 12px;\n  }\n  .filter-chip-label {\n    color: var(--accent);\n    font-weight: 500;\n  }\n  .filter-chip-remove {\n    background: none;\n    border: none;\n    color: var(--accent);\n    cursor: pointer;\n    padding: 2px 4px;\n    font-size: 14px;\n    line-height: 1;\n    opacity: 0.7;\n    transition: opacity 0.15s;\n  }\n  .filter-chip-remove:hover {\n    opacity: 1;\n  }\n  .filter-clear-btn {\n    padding: 4px 10px !important;\n    font-size: 12px !important;\n    line-height: 1 !important;\n    margin-left: 8px;\n  }\n  .usage-query-bar {\n    display: grid;\n    grid-template-columns: minmax(220px, 1fr) auto;\n    gap: 10px;\n    align-items: center;\n    /* Keep the dropdown filter row from visually touching the query row. */\n    margin-bottom: 10px;\n  }\n  .usage-query-actions {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    flex-wrap: nowrap;\n    justify-self: end;\n  }\n  .usage-query-actions .btn {\n    height: 34px;\n    padding: 0 14px;\n    border-radius: 999px;\n    font-weight: 600;\n    font-size: 13px;\n    line-height: 1;\n    border: 1px solid var(--border);\n    background: var(--bg-secondary);\n    color: var(--text);\n    box-shadow: none;\n    transition: background 0.15s, border-color 0.15s, color 0.15s;\n  }\n  .usage-query-actions .btn:hover {\n    background: var(--bg);\n    border-color: var(--border-strong);\n  }\n  .usage-action-btn {\n    height: 34px;\n    padding: 0 14px;\n    border-radius: 999px;\n    font-weight: 600;\n    font-size: 13px;\n    line-height: 1;\n    border: 1px solid var(--border);\n    background: var(--bg-secondary);\n    color: var(--text);\n    box-shadow: none;\n    transition: background 0.15s, border-color 0.15s, color 0.15s;\n  }\n  .usage-action-btn:hover {\n    background: var(--bg);\n    border-color: var(--border-strong);\n  }\n  .usage-primary-btn {\n    background: #ff4d4d;\n    color: #fff;\n    border-color: #ff4d4d;\n    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);\n  }\n  .btn.usage-primary-btn {\n    background: #ff4d4d !important;\n    border-color: #ff4d4d !important;\n    color: #fff !important;\n  }\n  .usage-primary-btn:hover {\n    background: #e64545;\n    border-color: #e64545;\n  }\n  .btn.usage-primary-btn:hover {\n    background: #e64545 !important;\n    border-color: #e64545 !important;\n  }\n  .usage-primary-btn:disabled {\n    background: rgba(255, 77, 77, 0.18);\n    border-color: rgba(255, 77, 77, 0.3);\n    color: #ff4d4d;\n    box-shadow: none;\n    cursor: default;\n    opacity: 1;\n  }\n  .usage-primary-btn[disabled] {\n    background: rgba(255, 77, 77, 0.18) !important;\n    border-color: rgba(255, 77, 77, 0.3) !important;\n    color: #ff4d4d !important;\n    opacity: 1 !important;\n  }\n  .usage-secondary-btn {\n    background: var(--bg-secondary);\n    color: var(--text);\n    border-color: var(--border);\n  }\n  .usage-query-input {\n    width: 100%;\n    min-width: 220px;\n    padding: 6px 10px;\n    border: 1px solid var(--border);\n    border-radius: 6px;\n    background: var(--bg);\n    color: var(--text);\n    font-size: 13px;\n  }\n  .usage-query-suggestions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    margin-top: 6px;\n  }\n  .usage-query-suggestion {\n    padding: 4px 8px;\n    border-radius: 999px;\n    border: 1px solid var(--border);\n    background: var(--bg-secondary);\n    font-size: 11px;\n    color: var(--text);\n    cursor: pointer;\n    transition: background 0.15s;\n  }\n  .usage-query-suggestion:hover {\n    background: var(--bg-hover);\n  }\n  .usage-filter-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n    margin-top: 14px;\n  }\n  details.usage-filter-select {\n    position: relative;\n    border: 1px solid var(--border);\n    border-radius: 10px;\n    padding: 6px 10px;\n    background: var(--bg);\n    font-size: 12px;\n    min-width: 140px;\n  }\n  details.usage-filter-select summary {\n    cursor: pointer;\n    list-style: none;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 6px;\n    font-weight: 500;\n  }\n  details.usage-filter-select summary::-webkit-details-marker {\n    display: none;\n  }\n  .usage-filter-badge {\n    font-size: 11px;\n    color: var(--muted);\n  }\n  .usage-filter-popover {\n    position: absolute;\n    left: 0;\n    top: calc(100% + 6px);\n    background: var(--bg);\n    border: 1px solid var(--border);\n    border-radius: 10px;\n    padding: 10px;\n    box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n    min-width: 220px;\n    z-index: 20;\n  }\n  .usage-filter-actions {\n    display: flex;\n    gap: 6px;\n    margin-bottom: 8px;\n  }\n  .usage-filter-actions button {\n    border-radius: 999px;\n    padding: 4px 10px;\n    font-size: 11px;\n  }\n  .usage-filter-options {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    max-height: 200px;\n    overflow: auto;\n  }\n  .usage-filter-option {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n  }\n  .usage-query-hint {\n    font-size: 11px;\n    color: var(--muted);\n  }\n  .usage-query-chips {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    margin-top: 6px;\n  }\n  .usage-query-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 8px;\n    border-radius: 999px;\n    border: 1px solid var(--border);\n    background: var(--bg-secondary);\n    font-size: 11px;\n  }\n  .usage-query-chip button {\n    background: none;\n    border: none;\n    color: var(--muted);\n    cursor: pointer;\n    padding: 0;\n    line-height: 1;\n  }\n  .usage-header {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    background: var(--bg);\n  }\n  .usage-header.pinned {\n    position: sticky;\n    top: 12px;\n    z-index: 6;\n    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);\n  }\n  .usage-pin-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 8px;\n    border-radius: 999px;\n    border: 1px solid var(--border);\n    background: var(--bg-secondary);\n    font-size: 11px;\n    color: var(--text);\n    cursor: pointer;\n  }\n  .usage-pin-btn.active {\n    background: var(--accent-subtle);\n    border-color: var(--accent);\n    color: var(--accent);\n  }\n  .usage-header-row {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    flex-wrap: wrap;\n  }\n  .usage-header-title {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n  .usage-header-metrics {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex-wrap: wrap;\n  }\n  .usage-metric-badge {\n    display: inline-flex;\n    align-items: baseline;\n    gap: 6px;\n    padding: 2px 8px;\n    border-radius: 999px;\n    border: 1px solid var(--border);\n    background: transparent;\n    font-size: 11px;\n    color: var(--muted);\n  }\n  .usage-metric-badge strong {\n    font-size: 12px;\n    color: var(--text);\n  }\n  .usage-controls {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    flex-wrap: wrap;\n  }\n  .usage-controls .active-filters {\n    flex: 1 1 100%;\n  }\n  .usage-controls input[type=\"date\"] {\n    min-width: 140px;\n  }\n  .usage-presets {\n    display: inline-flex;\n    gap: 6px;\n    flex-wrap: wrap;\n  }\n  .usage-presets .btn {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .usage-quick-filters {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-wrap: wrap;\n  }\n  .usage-select {\n    min-width: 120px;\n    padding: 6px 10px;\n    border: 1px solid var(--border);\n    border-radius: 6px;\n    background: var(--bg);\n    color: var(--text);\n    font-size: 12px;\n  }\n  .usage-export-menu summary {\n    cursor: pointer;\n    font-weight: 500;\n    color: var(--text);\n    list-style: none;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .usage-export-menu summary::-webkit-details-marker {\n    display: none;\n  }\n  .usage-export-menu {\n    position: relative;\n  }\n  .usage-export-button {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 10px;\n    border-radius: 8px;\n    border: 1px solid var(--border);\n    background: var(--bg);\n    font-size: 12px;\n  }\n  .usage-export-popover {\n    position: absolute;\n    right: 0;\n    top: calc(100% + 6px);\n    background: var(--bg);\n    border: 1px solid var(--border);\n    border-radius: 10px;\n    padding: 8px;\n    box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n    min-width: 160px;\n    z-index: 10;\n  }\n  .usage-export-list {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n  .usage-export-item {\n    text-align: left;\n    padding: 6px 10px;\n    border-radius: 8px;\n    border: 1px solid var(--border);\n    background: var(--bg-secondary);\n    font-size: 12px;\n  }\n  .usage-summary-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n    gap: 12px;\n    margin-top: 12px;\n  }\n  .usage-summary-card {\n    padding: 12px;\n    border-radius: 8px;\n    background: var(--bg-secondary);\n    border: 1px solid var(--border);\n  }\n  .usage-mosaic {\n    margin-top: 16px;\n    padding: 16px;\n  }\n  .usage-mosaic-header {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: 12px;\n    margin-bottom: 12px;\n  }\n  .usage-mosaic-title {\n    font-weight: 600;\n  }\n  .usage-mosaic-sub {\n    font-size: 12px;\n    color: var(--muted);\n  }\n  .usage-mosaic-grid {\n    display: grid;\n    grid-template-columns: minmax(200px, 1fr) minmax(260px, 2fr);\n    gap: 16px;\n    align-items: start;\n  }\n  .usage-mosaic-section {\n    background: var(--bg-subtle);\n    border: 1px solid var(--border);\n    border-radius: 10px;\n    padding: 12px;\n  }\n  .usage-mosaic-section-title {\n    font-size: 12px;\n    font-weight: 600;\n    margin-bottom: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .usage-mosaic-total {\n    font-size: 20px;\n    font-weight: 700;\n  }\n  .usage-daypart-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));\n    gap: 8px;\n  }\n  .usage-daypart-cell {\n    border-radius: 8px;\n    padding: 10px;\n    color: var(--text);\n    background: rgba(255, 77, 77, 0.08);\n    border: 1px solid rgba(255, 77, 77, 0.2);\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n  .usage-daypart-label {\n    font-size: 12px;\n    font-weight: 600;\n  }\n  .usage-daypart-value {\n    font-size: 14px;\n  }\n  .usage-hour-grid {\n    display: grid;\n    grid-template-columns: repeat(24, minmax(6px, 1fr));\n    gap: 4px;\n  }\n  .usage-hour-cell {\n    height: 28px;\n    border-radius: 6px;\n    background: rgba(255, 77, 77, 0.1);\n    border: 1px solid rgba(255, 77, 77, 0.2);\n    cursor: pointer;\n    transition: border-color 0.15s, box-shadow 0.15s;\n  }\n  .usage-hour-cell.selected {\n    border-color: rgba(255, 77, 77, 0.8);\n    box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.2);\n  }\n  .usage-hour-labels {\n    display: grid;\n    grid-template-columns: repeat(6, minmax(0, 1fr));\n    gap: 6px;\n    margin-top: 8px;\n    font-size: 11px;\n    color: var(--muted);\n  }\n  .usage-hour-legend {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    margin-top: 10px;\n    font-size: 11px;\n    color: var(--muted);\n  }\n  .usage-hour-legend span {\n    display: inline-block;\n    width: 14px;\n    height: 10px;\n    border-radius: 4px;\n    background: rgba(255, 77, 77, 0.15);\n    border: 1px solid rgba(255, 77, 77, 0.2);\n  }\n  .usage-calendar-labels {\n    display: grid;\n    grid-template-columns: repeat(7, minmax(10px, 1fr));\n    gap: 6px;\n    font-size: 10px;\n    color: var(--muted);\n    margin-bottom: 6px;\n  }\n  .usage-calendar {\n    display: grid;\n    grid-template-columns: repeat(7, minmax(10px, 1fr));\n    gap: 6px;\n  }\n  .usage-calendar-cell {\n    height: 18px;\n    border-radius: 4px;\n    border: 1px solid rgba(255, 77, 77, 0.2);\n    background: rgba(255, 77, 77, 0.08);\n  }\n  .usage-calendar-cell.empty {\n    background: transparent;\n    border-color: transparent;\n  }\n  .usage-summary-title {\n    font-size: 11px;\n    color: var(--muted);\n    margin-bottom: 6px;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .usage-info {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 16px;\n    height: 16px;\n    margin-left: 6px;\n    border-radius: 999px;\n    border: 1px solid var(--border);\n    background: var(--bg);\n    font-size: 10px;\n    color: var(--muted);\n    cursor: help;\n  }\n  .usage-summary-value {\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-strong);\n  }\n  .usage-summary-value.good {\n    color: #1f8f4e;\n  }\n  .usage-summary-value.warn {\n    color: #c57a00;\n  }\n  .usage-summary-value.bad {\n    color: #c9372c;\n  }\n  .usage-summary-hint {\n    font-size: 10px;\n    color: var(--muted);\n    cursor: help;\n    border: 1px solid var(--border);\n    border-radius: 999px;\n    padding: 0 6px;\n    line-height: 16px;\n    height: 16px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .usage-summary-sub {\n    font-size: 11px;\n    color: var(--muted);\n    margin-top: 4px;\n  }\n  .usage-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n  .usage-list-item {\n    display: flex;\n    justify-content: space-between;\n    gap: 12px;\n    font-size: 12px;\n    color: var(--text);\n    align-items: flex-start;\n  }\n  .usage-list-value {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    gap: 2px;\n    text-align: right;\n  }\n  .usage-list-sub {\n    font-size: 11px;\n    color: var(--muted);\n  }\n  .usage-list-item.button {\n    border: none;\n    background: transparent;\n    padding: 0;\n    text-align: left;\n    cursor: pointer;\n  }\n  .usage-list-item.button:hover {\n    color: var(--text-strong);\n  }\n";

package/dist/ui/src/ui/views/usage-styles/usageStyles-part2.d.ts

@@ -1 +0,0 @@
-export declare const usageStylesPart2 = "\n  .usage-list-item .muted {\n    font-size: 11px;\n  }\n  .usage-error-list {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n  }\n  .usage-error-row {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    gap: 8px;\n    align-items: center;\n    font-size: 12px;\n  }\n  .usage-error-date {\n    font-weight: 600;\n  }\n  .usage-error-rate {\n    font-variant-numeric: tabular-nums;\n  }\n  .usage-error-sub {\n    grid-column: 1 / -1;\n    font-size: 11px;\n    color: var(--muted);\n  }\n  .usage-badges {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    margin-bottom: 8px;\n  }\n  .usage-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 2px 8px;\n    border: 1px solid var(--border);\n    border-radius: 999px;\n    font-size: 11px;\n    background: var(--bg);\n    color: var(--text);\n  }\n  .usage-meta-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n    gap: 12px;\n  }\n  .usage-meta-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    font-size: 12px;\n  }\n  .usage-meta-item span {\n    color: var(--muted);\n    font-size: 11px;\n  }\n  .usage-insights-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n    gap: 16px;\n    margin-top: 12px;\n  }\n  .usage-insight-card {\n    padding: 14px;\n    border-radius: 10px;\n    border: 1px solid var(--border);\n    background: var(--bg-secondary);\n  }\n  .usage-insight-title {\n    font-size: 12px;\n    font-weight: 600;\n    margin-bottom: 10px;\n  }\n  .usage-insight-subtitle {\n    font-size: 11px;\n    color: var(--muted);\n    margin-top: 6px;\n  }\n  /* ===== CHART TOGGLE ===== */\n  .chart-toggle {\n    display: flex;\n    background: var(--bg);\n    border-radius: 6px;\n    overflow: hidden;\n    border: 1px solid var(--border);\n  }\n  .chart-toggle .toggle-btn {\n    padding: 6px 14px;\n    font-size: 13px;\n    background: transparent;\n    border: none;\n    color: var(--muted);\n    cursor: pointer;\n    transition: all 0.15s;\n  }\n  .chart-toggle .toggle-btn:hover {\n    color: var(--text);\n  }\n  .chart-toggle .toggle-btn.active {\n    background: #ff4d4d;\n    color: white;\n  }\n  .chart-toggle.small .toggle-btn {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .sessions-toggle {\n    border-radius: 4px;\n  }\n  .sessions-toggle .toggle-btn {\n    border-radius: 4px;\n  }\n  .daily-chart-header {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 8px;\n    margin-bottom: 6px;\n  }\n\n  /* ===== DAILY BAR CHART ===== */\n  .daily-chart {\n    margin-top: 12px;\n  }\n  .daily-chart-bars {\n    display: flex;\n    align-items: flex-end;\n    height: 200px;\n    gap: 4px;\n    padding: 8px 4px 36px;\n  }\n  .daily-bar-wrapper {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n    justify-content: flex-end;\n    cursor: pointer;\n    position: relative;\n    border-radius: 4px 4px 0 0;\n    transition: background 0.15s;\n    min-width: 0;\n  }\n  .daily-bar-wrapper:hover {\n    background: var(--bg-hover);\n  }\n  .daily-bar-wrapper.selected {\n    background: var(--accent-subtle);\n  }\n  .daily-bar-wrapper.selected .daily-bar {\n    background: var(--accent);\n  }\n  .daily-bar {\n    width: 100%;\n    max-width: var(--bar-max-width, 32px);\n    background: #ff4d4d;\n    border-radius: 3px 3px 0 0;\n    min-height: 2px;\n    transition: all 0.15s;\n    overflow: hidden;\n  }\n  .daily-bar-wrapper:hover .daily-bar {\n    background: #cc3d3d;\n  }\n  .daily-bar-label {\n    position: absolute;\n    bottom: -28px;\n    font-size: 10px;\n    color: var(--muted);\n    white-space: nowrap;\n    text-align: center;\n    transform: rotate(-35deg);\n    transform-origin: top center;\n  }\n  .daily-bar-total {\n    position: absolute;\n    top: -16px;\n    left: 50%;\n    transform: translateX(-50%);\n    font-size: 10px;\n    color: var(--muted);\n    white-space: nowrap;\n  }\n  .daily-bar-tooltip {\n    position: absolute;\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n    background: var(--bg);\n    border: 1px solid var(--border);\n    border-radius: 6px;\n    padding: 8px 12px;\n    font-size: 12px;\n    white-space: nowrap;\n    z-index: 100;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity 0.15s;\n  }\n  .daily-bar-wrapper:hover .daily-bar-tooltip {\n    opacity: 1;\n  }\n\n  /* ===== COST/TOKEN BREAKDOWN BAR ===== */\n  .cost-breakdown {\n    margin-top: 18px;\n    padding: 16px;\n    background: var(--bg-secondary);\n    border-radius: 8px;\n  }\n  .cost-breakdown-header {\n    font-weight: 600;\n    font-size: 15px;\n    letter-spacing: -0.02em;\n    margin-bottom: 12px;\n    color: var(--text-strong);\n  }\n  .cost-breakdown-bar {\n    height: 28px;\n    background: var(--bg);\n    border-radius: 6px;\n    overflow: hidden;\n    display: flex;\n  }\n  .cost-segment {\n    height: 100%;\n    transition: width 0.3s ease;\n    position: relative;\n  }\n  .cost-segment.output {\n    background: #ef4444;\n  }\n  .cost-segment.input {\n    background: #f59e0b;\n  }\n  .cost-segment.cache-write {\n    background: #10b981;\n  }\n  .cost-segment.cache-read {\n    background: #06b6d4;\n  }\n  .cost-breakdown-legend {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n    margin-top: 12px;\n  }\n  .cost-breakdown-total {\n    margin-top: 10px;\n    font-size: 12px;\n    color: var(--muted);\n  }\n  .legend-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--text);\n    cursor: help;\n  }\n  .legend-dot {\n    width: 10px;\n    height: 10px;\n    border-radius: 2px;\n    flex-shrink: 0;\n  }\n  .legend-dot.output {\n    background: #ef4444;\n  }\n  .legend-dot.input {\n    background: #f59e0b;\n  }\n  .legend-dot.cache-write {\n    background: #10b981;\n  }\n  .legend-dot.cache-read {\n    background: #06b6d4;\n  }\n  .legend-dot.system {\n    background: #ff4d4d;\n  }\n  .legend-dot.skills {\n    background: #8b5cf6;\n  }\n  .legend-dot.tools {\n    background: #ec4899;\n  }\n  .legend-dot.files {\n    background: #f59e0b;\n  }\n  .cost-breakdown-note {\n    margin-top: 10px;\n    font-size: 11px;\n    color: var(--muted);\n    line-height: 1.4;\n  }\n\n  /* ===== SESSION BARS (scrollable list) ===== */\n  .session-bars {\n    margin-top: 16px;\n    max-height: 400px;\n    overflow-y: auto;\n    border: 1px solid var(--border);\n    border-radius: 8px;\n    background: var(--bg);\n  }\n  .session-bar-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 14px;\n    border-bottom: 1px solid var(--border);\n    cursor: pointer;\n    transition: background 0.15s;\n  }\n  .session-bar-row:last-child {\n    border-bottom: none;\n  }\n  .session-bar-row:hover {\n    background: var(--bg-hover);\n  }\n  .session-bar-row.selected {\n    background: var(--accent-subtle);\n  }\n  .session-bar-label {\n    flex: 1 1 auto;\n    min-width: 0;\n    font-size: 13px;\n    color: var(--text);\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n  }\n  .session-bar-title {\n    /* Prefer showing the full name; wrap instead of truncating. */\n    white-space: normal;\n    overflow-wrap: anywhere;\n    word-break: break-word;\n  }\n  .session-bar-meta {\n    font-size: 10px;\n    color: var(--muted);\n    font-weight: 400;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .session-bar-track {\n    flex: 0 0 90px;\n    height: 6px;\n    background: var(--bg-secondary);\n    border-radius: 4px;\n    overflow: hidden;\n    opacity: 0.6;\n  }\n  .session-bar-fill {\n    height: 100%;\n    background: rgba(255, 77, 77, 0.7);\n    border-radius: 4px;\n    transition: width 0.3s ease;\n  }\n  .session-bar-value {\n    flex: 0 0 70px;\n    text-align: right;\n    font-size: 12px;\n    font-family: var(--font-mono);\n    color: var(--muted);\n  }\n  .session-bar-actions {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    flex: 0 0 auto;\n  }\n  .session-copy-btn {\n    height: 26px;\n    padding: 0 10px;\n    border-radius: 999px;\n    border: 1px solid var(--border);\n    background: var(--bg-secondary);\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--muted);\n    cursor: pointer;\n    transition: background 0.15s, border-color 0.15s, color 0.15s;\n  }\n  .session-copy-btn:hover {\n    background: var(--bg);\n    border-color: var(--border-strong);\n    color: var(--text);\n  }\n\n  /* ===== TIME SERIES CHART ===== */\n  .session-timeseries {\n    margin-top: 24px;\n    padding: 16px;\n    background: var(--bg-secondary);\n    border-radius: 8px;\n  }\n  .timeseries-header-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 12px;\n  }\n  .timeseries-controls {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n  }\n  .timeseries-header {\n    font-weight: 600;\n    color: var(--text);\n  }\n  .timeseries-chart {\n    width: 100%;\n    overflow: hidden;\n  }\n  .timeseries-svg {\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n  .timeseries-svg .axis-label {\n    font-size: 10px;\n    fill: var(--muted);\n  }\n  .timeseries-svg .ts-area {\n    fill: #ff4d4d;\n    fill-opacity: 0.1;\n  }\n  .timeseries-svg .ts-line {\n    fill: none;\n    stroke: #ff4d4d;\n    stroke-width: 2;\n  }\n  .timeseries-svg .ts-dot {\n    fill: #ff4d4d;\n    transition: r 0.15s, fill 0.15s;\n  }\n  .timeseries-svg .ts-dot:hover {\n    r: 5;\n  }\n  .timeseries-svg .ts-bar {\n    fill: #ff4d4d;\n    transition: fill 0.15s;\n  }\n  .timeseries-svg .ts-bar:hover {\n    fill: #cc3d3d;\n  }\n  .timeseries-svg .ts-bar.output { fill: #ef4444; }\n  .timeseries-svg .ts-bar.input { fill: #f59e0b; }\n  .timeseries-svg .ts-bar.cache-write { fill: #10b981; }\n  .timeseries-svg .ts-bar.cache-read { fill: #06b6d4; }\n  .timeseries-summary {\n    margin-top: 12px;\n    font-size: 13px;\n    color: var(--muted);\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n  .timeseries-loading {\n    padding: 24px;\n    text-align: center;\n    color: var(--muted);\n  }\n\n  /* ===== SESSION LOGS ===== */\n  .session-logs {\n    margin-top: 24px;\n    background: var(--bg-secondary);\n    border-radius: 8px;\n    overflow: hidden;\n  }\n  .session-logs-header {\n    padding: 10px 14px;\n    font-weight: 600;\n    border-bottom: 1px solid var(--border);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    font-size: 13px;\n    background: var(--bg-secondary);\n  }\n  .session-logs-loading {\n    padding: 24px;\n    text-align: center;\n    color: var(--muted);\n  }\n  .session-logs-list {\n    max-height: 400px;\n    overflow-y: auto;\n  }\n  .session-log-entry {\n    padding: 10px 14px;\n    border-bottom: 1px solid var(--border);\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    background: var(--bg);\n  }\n  .session-log-entry:last-child {\n    border-bottom: none;\n  }\n  .session-log-entry.user {\n    border-left: 3px solid var(--accent);\n  }\n  .session-log-entry.assistant {\n    border-left: 3px solid var(--border-strong);\n  }\n  .session-log-meta {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    font-size: 11px;\n    color: var(--muted);\n    flex-wrap: wrap;\n  }\n  .session-log-role {\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    font-size: 10px;\n    padding: 2px 6px;\n    border-radius: 999px;\n    background: var(--bg-secondary);\n    border: 1px solid var(--border);\n  }\n  .session-log-entry.user .session-log-role {\n    color: var(--accent);\n  }\n  .session-log-entry.assistant .session-log-role {\n    color: var(--muted);\n  }\n  .session-log-content {\n    font-size: 13px;\n    line-height: 1.5;\n    color: var(--text);\n    white-space: pre-wrap;\n    word-break: break-word;\n    background: var(--bg-secondary);\n    border-radius: 8px;\n    padding: 8px 10px;\n    border: 1px solid var(--border);\n    max-height: 220px;\n    overflow-y: auto;\n  }\n\n  /* ===== CONTEXT WEIGHT BREAKDOWN ===== */\n  .context-weight-breakdown {\n    margin-top: 24px;\n    padding: 16px;\n    background: var(--bg-secondary);\n    border-radius: 8px;\n  }\n  .context-weight-breakdown .context-weight-header {\n    font-weight: 600;\n    font-size: 13px;\n    margin-bottom: 4px;\n    color: var(--text);\n  }\n  .context-weight-desc {\n    font-size: 12px;\n    color: var(--muted);\n    margin: 0 0 12px 0;\n  }\n  .context-stacked-bar {\n    height: 24px;\n    background: var(--bg);\n    border-radius: 6px;\n    overflow: hidden;\n    display: flex;\n  }\n  .context-segment {\n    height: 100%;\n    transition: width 0.3s ease;\n  }\n  .context-segment.system {\n    background: #ff4d4d;\n  }\n  .context-segment.skills {\n    background: #8b5cf6;\n  }\n  .context-segment.tools {\n    background: #ec4899;\n  }\n  .context-segment.files {\n    background: #f59e0b;\n  }\n  .context-legend {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n    margin-top: 12px;\n  }\n  .context-total {\n    margin-top: 10px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--muted);\n  }\n  .context-details {\n    margin-top: 12px;\n    border: 1px solid var(--border);\n    border-radius: 6px;\n    overflow: hidden;\n  }\n  .context-details summary {\n    padding: 10px 14px;\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    background: var(--bg);\n    border-bottom: 1px solid var(--border);\n  }\n  .context-details[open] summary {\n    border-bottom: 1px solid var(--border);\n  }\n  .context-list {\n    max-height: 200px;\n    overflow-y: auto;\n  }\n  .context-list-header {\n    display: flex;\n    justify-content: space-between;\n    padding: 8px 14px;\n    font-size: 11px;\n    text-transform: uppercase;\n    color: var(--muted);\n    background: var(--bg-secondary);\n    border-bottom: 1px solid var(--border);\n  }\n  .context-list-item {\n    display: flex;\n    justify-content: space-between;\n    padding: 8px 14px;\n    font-size: 12px;\n    border-bottom: 1px solid var(--border);\n  }\n  .context-list-item:last-child {\n    border-bottom: none;\n  }\n  .context-list-item .mono {\n    font-family: var(--font-mono);\n    color: var(--text);\n  }\n  .context-list-item .muted {\n    color: var(--muted);\n    font-family: var(--font-mono);\n  }\n\n  /* ===== NO CONTEXT NOTE ===== */\n  .no-context-note {\n    margin-top: 24px;\n    padding: 16px;\n    background: var(--bg-secondary);\n    border-radius: 8px;\n    font-size: 13px;\n    color: var(--muted);\n    line-height: 1.5;\n  }\n\n  /* ===== TWO COLUMN LAYOUT ===== */\n  .usage-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 18px;\n    margin-top: 18px;\n    align-items: stretch;\n  }\n  .usage-grid-left {\n    display: flex;\n    flex-direction: column;\n  }\n  .usage-grid-right {\n    display: flex;\n    flex-direction: column;\n  }\n  \n  /* ===== LEFT CARD (Daily + Breakdown) ===== */\n  .usage-left-card {\n    /* inherits background, border, shadow from .card */\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n  }\n  .usage-left-card .daily-chart-bars {\n    flex: 1;\n    min-height: 200px;\n  }\n  .usage-left-card .sessions-panel-title {\n    font-weight: 600;\n    font-size: 14px;\n    margin-bottom: 12px;\n  }\n";

package/dist/ui/src/ui/views/usage-styles/usageStyles-part3.d.ts

@@ -1 +0,0 @@
-export declare const usageStylesPart3 = "\n  \n  /* ===== COMPACT DAILY CHART ===== */\n  .daily-chart-compact {\n    margin-bottom: 16px;\n  }\n  .daily-chart-compact .sessions-panel-title {\n    margin-bottom: 8px;\n  }\n  .daily-chart-compact .daily-chart-bars {\n    height: 100px;\n    padding-bottom: 20px;\n  }\n  \n  /* ===== COMPACT COST BREAKDOWN ===== */\n  .cost-breakdown-compact {\n    padding: 0;\n    margin: 0;\n    background: transparent;\n    border-top: 1px solid var(--border);\n    padding-top: 12px;\n  }\n  .cost-breakdown-compact .cost-breakdown-header {\n    margin-bottom: 8px;\n  }\n  .cost-breakdown-compact .cost-breakdown-legend {\n    gap: 12px;\n  }\n  .cost-breakdown-compact .cost-breakdown-note {\n    display: none;\n  }\n  \n  /* ===== SESSIONS CARD ===== */\n  .sessions-card {\n    /* inherits background, border, shadow from .card */\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n  }\n  .sessions-card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 8px;\n  }\n  .sessions-card-title {\n    font-weight: 600;\n    font-size: 14px;\n  }\n  .sessions-card-count {\n    font-size: 12px;\n    color: var(--muted);\n  }\n  .sessions-card-meta {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    margin: 8px 0 10px;\n    font-size: 12px;\n    color: var(--muted);\n  }\n  .sessions-card-stats {\n    display: inline-flex;\n    gap: 12px;\n  }\n  .sessions-sort {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--muted);\n  }\n  .sessions-sort select {\n    padding: 4px 8px;\n    border-radius: 6px;\n    border: 1px solid var(--border);\n    background: var(--bg);\n    color: var(--text);\n    font-size: 12px;\n  }\n  .sessions-action-btn {\n    height: 28px;\n    padding: 0 10px;\n    border-radius: 8px;\n    font-size: 12px;\n    line-height: 1;\n  }\n  .sessions-action-btn.icon {\n    width: 32px;\n    padding: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .sessions-card-hint {\n    font-size: 11px;\n    color: var(--muted);\n    margin-bottom: 8px;\n  }\n  .sessions-card .session-bars {\n    max-height: 280px;\n    background: var(--bg);\n    border-radius: 6px;\n    border: 1px solid var(--border);\n    margin: 0;\n    overflow-y: auto;\n    padding: 8px;\n  }\n  .sessions-card .session-bar-row {\n    padding: 6px 8px;\n    border-radius: 6px;\n    margin-bottom: 3px;\n    border: 1px solid transparent;\n    transition: all 0.15s;\n  }\n  .sessions-card .session-bar-row:hover {\n    border-color: var(--border);\n    background: var(--bg-hover);\n  }\n  .sessions-card .session-bar-row.selected {\n    border-color: var(--accent);\n    background: var(--accent-subtle);\n    box-shadow: inset 0 0 0 1px rgba(255, 77, 77, 0.15);\n  }\n  .sessions-card .session-bar-label {\n    flex: 1 1 auto;\n    min-width: 140px;\n    font-size: 12px;\n  }\n  .sessions-card .session-bar-value {\n    flex: 0 0 60px;\n    font-size: 11px;\n    font-weight: 600;\n  }\n  .sessions-card .session-bar-track {\n    flex: 0 0 70px;\n    height: 5px;\n    opacity: 0.5;\n  }\n  .sessions-card .session-bar-fill {\n    background: rgba(255, 77, 77, 0.55);\n  }\n  .sessions-clear-btn {\n    margin-left: auto;\n  }\n  \n  /* ===== EMPTY DETAIL STATE ===== */\n  .session-detail-empty {\n    margin-top: 18px;\n    background: var(--bg-secondary);\n    border-radius: 8px;\n    border: 2px dashed var(--border);\n    padding: 32px;\n    text-align: center;\n  }\n  .session-detail-empty-title {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text);\n    margin-bottom: 8px;\n  }\n  .session-detail-empty-desc {\n    font-size: 13px;\n    color: var(--muted);\n    margin-bottom: 16px;\n    line-height: 1.5;\n  }\n  .session-detail-empty-features {\n    display: flex;\n    justify-content: center;\n    gap: 24px;\n    flex-wrap: wrap;\n  }\n  .session-detail-empty-feature {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--muted);\n  }\n  .session-detail-empty-feature .icon {\n    font-size: 16px;\n  }\n  \n  /* ===== SESSION DETAIL PANEL ===== */\n  .session-detail-panel {\n    margin-top: 12px;\n    /* inherits background, border-radius, shadow from .card */\n    border: 2px solid var(--accent) !important;\n  }\n  .session-detail-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--border);\n    cursor: pointer;\n  }\n  .session-detail-header:hover {\n    background: var(--bg-hover);\n  }\n  .session-detail-title {\n    font-weight: 600;\n    font-size: 14px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  .session-detail-header-left {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  .session-close-btn {\n    background: var(--bg);\n    border: 1px solid var(--border);\n    color: var(--text);\n    cursor: pointer;\n    padding: 2px 8px;\n    font-size: 16px;\n    line-height: 1;\n    border-radius: 4px;\n    transition: background 0.15s, color 0.15s;\n  }\n  .session-close-btn:hover {\n    background: var(--bg-hover);\n    color: var(--text);\n    border-color: var(--accent);\n  }\n  .session-detail-stats {\n    display: flex;\n    gap: 10px;\n    font-size: 12px;\n    color: var(--muted);\n  }\n  .session-detail-stats strong {\n    color: var(--text);\n    font-family: var(--font-mono);\n  }\n  .session-detail-content {\n    padding: 12px;\n  }\n  .session-summary-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n    gap: 8px;\n    margin-bottom: 12px;\n  }\n  .session-summary-card {\n    border: 1px solid var(--border);\n    border-radius: 8px;\n    padding: 8px;\n    background: var(--bg-secondary);\n  }\n  .session-summary-title {\n    font-size: 11px;\n    color: var(--muted);\n    margin-bottom: 4px;\n  }\n  .session-summary-value {\n    font-size: 14px;\n    font-weight: 600;\n  }\n  .session-summary-meta {\n    font-size: 11px;\n    color: var(--muted);\n    margin-top: 4px;\n  }\n  .session-detail-row {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 10px;\n    /* Separate \"Usage Over Time\" from the summary + Top Tools/Model Mix cards above. */\n    margin-top: 12px;\n    margin-bottom: 10px;\n  }\n  .session-detail-bottom {\n    display: grid;\n    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);\n    gap: 10px;\n    align-items: stretch;\n  }\n  .session-detail-bottom .session-logs-compact {\n    margin: 0;\n    display: flex;\n    flex-direction: column;\n  }\n  .session-detail-bottom .session-logs-compact .session-logs-list {\n    flex: 1 1 auto;\n    max-height: none;\n  }\n  .context-details-panel {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    background: var(--bg);\n    border-radius: 6px;\n    border: 1px solid var(--border);\n    padding: 12px;\n  }\n  .context-breakdown-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n    gap: 10px;\n    margin-top: 8px;\n  }\n  .context-breakdown-card {\n    border: 1px solid var(--border);\n    border-radius: 8px;\n    padding: 8px;\n    background: var(--bg-secondary);\n  }\n  .context-breakdown-title {\n    font-size: 11px;\n    font-weight: 600;\n    margin-bottom: 6px;\n  }\n  .context-breakdown-list {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    font-size: 11px;\n  }\n  .context-breakdown-item {\n    display: flex;\n    justify-content: space-between;\n    gap: 8px;\n  }\n  .context-breakdown-more {\n    font-size: 10px;\n    color: var(--muted);\n    margin-top: 4px;\n  }\n  .context-breakdown-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n  }\n  .context-expand-btn {\n    border: 1px solid var(--border);\n    background: var(--bg-secondary);\n    color: var(--muted);\n    font-size: 11px;\n    padding: 4px 8px;\n    border-radius: 999px;\n    cursor: pointer;\n    transition: all 0.15s;\n  }\n  .context-expand-btn:hover {\n    color: var(--text);\n    border-color: var(--border-strong);\n    background: var(--bg);\n  }\n  \n  /* ===== COMPACT TIMESERIES ===== */\n  .session-timeseries-compact {\n    background: var(--bg);\n    border-radius: 6px;\n    border: 1px solid var(--border);\n    padding: 12px;\n    margin: 0;\n  }\n  .session-timeseries-compact .timeseries-header-row {\n    margin-bottom: 8px;\n  }\n  .session-timeseries-compact .timeseries-header {\n    font-size: 12px;\n  }\n  .session-timeseries-compact .timeseries-summary {\n    font-size: 11px;\n    margin-top: 8px;\n  }\n  \n  /* ===== COMPACT CONTEXT ===== */\n  .context-weight-compact {\n    background: var(--bg);\n    border-radius: 6px;\n    border: 1px solid var(--border);\n    padding: 12px;\n    margin: 0;\n  }\n  .context-weight-compact .context-weight-header {\n    font-size: 12px;\n    margin-bottom: 4px;\n  }\n  .context-weight-compact .context-weight-desc {\n    font-size: 11px;\n    margin-bottom: 8px;\n  }\n  .context-weight-compact .context-stacked-bar {\n    height: 16px;\n  }\n  .context-weight-compact .context-legend {\n    font-size: 11px;\n    gap: 10px;\n    margin-top: 8px;\n  }\n  .context-weight-compact .context-total {\n    font-size: 11px;\n    margin-top: 6px;\n  }\n  .context-weight-compact .context-details {\n    margin-top: 8px;\n  }\n  .context-weight-compact .context-details summary {\n    font-size: 12px;\n    padding: 6px 10px;\n  }\n  \n  /* ===== COMPACT LOGS ===== */\n  .session-logs-compact {\n    background: var(--bg);\n    border-radius: 10px;\n    border: 1px solid var(--border);\n    overflow: hidden;\n    margin: 0;\n    display: flex;\n    flex-direction: column;\n  }\n  .session-logs-compact .session-logs-header {\n    padding: 10px 12px;\n    font-size: 12px;\n  }\n  .session-logs-compact .session-logs-list {\n    max-height: none;\n    flex: 1 1 auto;\n    overflow: auto;\n  }\n  .session-logs-compact .session-log-entry {\n    padding: 8px 12px;\n  }\n  .session-logs-compact .session-log-content {\n    font-size: 12px;\n    max-height: 160px;\n  }\n  .session-log-tools {\n    margin-top: 6px;\n    border: 1px solid var(--border);\n    border-radius: 8px;\n    background: var(--bg-secondary);\n    padding: 6px 8px;\n    font-size: 11px;\n    color: var(--text);\n  }\n  .session-log-tools summary {\n    cursor: pointer;\n    list-style: none;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-weight: 600;\n  }\n  .session-log-tools summary::-webkit-details-marker {\n    display: none;\n  }\n  .session-log-tools-list {\n    margin-top: 6px;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n  }\n  .session-log-tools-pill {\n    border: 1px solid var(--border);\n    border-radius: 999px;\n    padding: 2px 8px;\n    font-size: 10px;\n    background: var(--bg);\n    color: var(--text);\n  }\n\n  /* ===== RESPONSIVE ===== */\n  @media (max-width: 900px) {\n    .usage-grid {\n      grid-template-columns: 1fr;\n    }\n    .session-detail-row {\n      grid-template-columns: 1fr;\n    }\n  }\n  @media (max-width: 600px) {\n    .session-bar-label {\n      flex: 0 0 100px;\n    }\n    .cost-breakdown-legend {\n      gap: 10px;\n    }\n    .legend-item {\n      font-size: 11px;\n    }\n    .daily-chart-bars {\n      height: 170px;\n      gap: 6px;\n      padding-bottom: 40px;\n    }\n    .daily-bar-label {\n      font-size: 8px;\n      bottom: -30px;\n      transform: rotate(-45deg);\n    }\n    .usage-mosaic-grid {\n      grid-template-columns: 1fr;\n    }\n    .usage-hour-grid {\n      grid-template-columns: repeat(12, minmax(10px, 1fr));\n    }\n    .usage-hour-cell {\n      height: 22px;\n    }\n  }\n\n  /* ===== CHART AXIS ===== */\n  .ts-axis-label {\n    font-size: 5px;\n    fill: var(--muted);\n  }\n\n  /* ===== RANGE SELECTION HANDLES ===== */\n  .chart-handle-zone {\n    position: absolute;\n    top: 0;\n    width: 16px;\n    height: 100%;\n    cursor: col-resize;\n    z-index: 10;\n    transform: translateX(-50%);\n  }\n\n  .timeseries-chart-wrapper {\n    position: relative;\n  }\n\n  .timeseries-reset-btn {\n    background: var(--bg-secondary);\n    border: 1px solid var(--border);\n    border-radius: 999px;\n    padding: 2px 10px;\n    font-size: 11px;\n    color: var(--muted);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    margin-left: 8px;\n  }\n\n  .timeseries-reset-btn:hover {\n    background: var(--bg-hover);\n    color: var(--text);\n    border-color: var(--border-strong);\n  }\n";

package/dist/ui/src/ui/views/usage.d.ts

@@ -1,3 +0,0 @@
-import { SessionLogEntry, SessionLogRole, UsageColumnId, UsageProps } from "./usageTypes.ts";
-export type { UsageColumnId, SessionLogEntry, SessionLogRole };
-export declare function renderUsage(props: UsageProps): import("lit").TemplateResult<1>;

package/dist/ui/src/ui/views/usageStyles.d.ts

@@ -1 +0,0 @@
-export declare const usageStylesString: string;

package/dist/ui/src/ui/views/usageTypes.d.ts

@@ -1,87 +0,0 @@
-import type { CostUsageDailyEntry, SessionsUsageEntry, SessionsUsageResult, SessionsUsageTotals, SessionUsageTimePoint } from "../usage-types.ts";
-export type UsageSessionEntry = SessionsUsageEntry;
-export type UsageTotals = SessionsUsageTotals;
-export type CostDailyEntry = CostUsageDailyEntry;
-export type UsageAggregates = SessionsUsageResult["aggregates"];
-export type UsageColumnId = "channel" | "agent" | "provider" | "model" | "messages" | "tools" | "errors" | "duration";
-export type TimeSeriesPoint = SessionUsageTimePoint;
-export type UsageProps = {
-    loading: boolean;
-    error: string | null;
-    startDate: string;
-    endDate: string;
-    sessions: UsageSessionEntry[];
-    sessionsLimitReached: boolean;
-    totals: UsageTotals | null;
-    aggregates: UsageAggregates | null;
-    costDaily: CostDailyEntry[];
-    selectedSessions: string[];
-    selectedDays: string[];
-    selectedHours: number[];
-    chartMode: "tokens" | "cost";
-    dailyChartMode: "total" | "by-type";
-    timeSeriesMode: "cumulative" | "per-turn";
-    timeSeriesBreakdownMode: "total" | "by-type";
-    timeSeries: {
-        points: TimeSeriesPoint[];
-    } | null;
-    timeSeriesLoading: boolean;
-    timeSeriesCursorStart: number | null;
-    timeSeriesCursorEnd: number | null;
-    sessionLogs: SessionLogEntry[] | null;
-    sessionLogsLoading: boolean;
-    sessionLogsExpanded: boolean;
-    logFilterRoles: SessionLogRole[];
-    logFilterTools: string[];
-    logFilterHasTools: boolean;
-    logFilterQuery: string;
-    query: string;
-    queryDraft: string;
-    sessionSort: "tokens" | "cost" | "recent" | "messages" | "errors";
-    sessionSortDir: "asc" | "desc";
-    recentSessions: string[];
-    sessionsTab: "all" | "recent";
-    visibleColumns: UsageColumnId[];
-    timeZone: "local" | "utc";
-    contextExpanded: boolean;
-    headerPinned: boolean;
-    onStartDateChange: (date: string) => void;
-    onEndDateChange: (date: string) => void;
-    onRefresh: () => void;
-    onTimeZoneChange: (zone: "local" | "utc") => void;
-    onToggleContextExpanded: () => void;
-    onToggleHeaderPinned: () => void;
-    onToggleSessionLogsExpanded: () => void;
-    onLogFilterRolesChange: (next: SessionLogRole[]) => void;
-    onLogFilterToolsChange: (next: string[]) => void;
-    onLogFilterHasToolsChange: (next: boolean) => void;
-    onLogFilterQueryChange: (next: string) => void;
-    onLogFilterClear: () => void;
-    onSelectSession: (key: string, shiftKey: boolean) => void;
-    onChartModeChange: (mode: "tokens" | "cost") => void;
-    onDailyChartModeChange: (mode: "total" | "by-type") => void;
-    onTimeSeriesModeChange: (mode: "cumulative" | "per-turn") => void;
-    onTimeSeriesBreakdownChange: (mode: "total" | "by-type") => void;
-    onTimeSeriesCursorRangeChange: (start: number | null, end: number | null) => void;
-    onSelectDay: (day: string, shiftKey: boolean) => void;
-    onSelectHour: (hour: number, shiftKey: boolean) => void;
-    onClearDays: () => void;
-    onClearHours: () => void;
-    onClearSessions: () => void;
-    onClearFilters: () => void;
-    onQueryDraftChange: (query: string) => void;
-    onApplyQuery: () => void;
-    onClearQuery: () => void;
-    onSessionSortChange: (sort: "tokens" | "cost" | "recent" | "messages" | "errors") => void;
-    onSessionSortDirChange: (dir: "asc" | "desc") => void;
-    onSessionsTabChange: (tab: "all" | "recent") => void;
-    onToggleColumn: (column: UsageColumnId) => void;
-};
-export type SessionLogEntry = {
-    timestamp: number;
-    role: "user" | "assistant" | "tool" | "toolResult";
-    content: string;
-    tokens?: number;
-    cost?: number;
-};
-export type SessionLogRole = SessionLogEntry["role"];