mirror of
https://github.com/claude-code-best/claude-code.git
synced 2026-06-18 06:15:51 +00:00
更新大量 tsx 原始文件; 已经迁移 login panel; 部分 (#121)
* style(B1-1): 格式化 ink/buddy/cli/context/screens/tasks/services/keybindings/state (43 files) 纯格式化：移除分号、React Compiler import、import 多行展开。 修复了 Box.tsx 和 ScrollBox.tsx 中无效的 global.d.ts import。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * style(B1-2): 格式化 commands (79 files) 纯格式化：移除分号、React Compiler import、import 多行展开。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * style(B1-3): 格式化 components/messages,permissions,mcp,sandbox,shell (104 files) 纯格式化：移除分号、React Compiler import、import 多行展开。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * style(B1-4): 格式化 components/PromptInput,FeedbackSurvey,tasks,agents,skills,design-system,wizard (73 files) 纯格式化：移除分号、React Compiler import、import 多行展开。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * style(B1-5): 格式化 components其余 + hooks + tools (232 files) 纯格式化：移除分号、React Compiler import、import 多行展开。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * style(B1-6): 格式化 main/entrypoints/utils/moreright (21 files) 纯格式化：移除分号、React Compiler import、import 多行展开。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs: 更新 README，新增 Run.ps1/TODO.md，删除 V6.md - README.md: 大幅重写，更详细版本历史和配置示例 - Run.ps1: 新增 Windows 启动脚本 - TODO.md: 新增包完成清单 - V6.md: 删除（架构重构规划已不适用） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: 修复以前的问题 * fix: 修复 login 面板的问题 --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
claude-code-best
File diff suppressed because it is too large
Load Diff
@@ -1,136 +1,136 @@
|
||||
import { c as _c } from "react/compiler-runtime";
|
||||
// biome-ignore-all assist/source/organizeImports: ANT-ONLY import markers must not be reordered
|
||||
import * as React from 'react';
|
||||
import { Suspense, useState } from 'react';
|
||||
import { useKeybinding } from '../../keybindings/useKeybinding.js';
|
||||
import { useExitOnCtrlCDWithKeybindings } from '../../hooks/useExitOnCtrlCDWithKeybindings.js';
|
||||
import { useTerminalSize } from '../../hooks/useTerminalSize.js';
|
||||
import { useIsInsideModal, useModalOrTerminalSize } from '../../context/modalContext.js';
|
||||
import { Pane } from '../design-system/Pane.js';
|
||||
import { Tabs, Tab } from '../design-system/Tabs.js';
|
||||
import { Status, buildDiagnostics } from './Status.js';
|
||||
import { Config } from './Config.js';
|
||||
import { Usage } from './Usage.js';
|
||||
import type { LocalJSXCommandContext, CommandResultDisplay } from '../../commands.js';
|
||||
import * as React from 'react'
|
||||
import { Suspense, useState } from 'react'
|
||||
import { useKeybinding } from '../../keybindings/useKeybinding.js'
|
||||
import { useExitOnCtrlCDWithKeybindings } from '../../hooks/useExitOnCtrlCDWithKeybindings.js'
|
||||
import { useTerminalSize } from '../../hooks/useTerminalSize.js'
|
||||
import {
|
||||
useIsInsideModal,
|
||||
useModalOrTerminalSize,
|
||||
} from '../../context/modalContext.js'
|
||||
import { Pane } from '../design-system/Pane.js'
|
||||
import { Tabs, Tab } from '../design-system/Tabs.js'
|
||||
import { Status, buildDiagnostics } from './Status.js'
|
||||
import { Config } from './Config.js'
|
||||
import { Usage } from './Usage.js'
|
||||
import type {
|
||||
LocalJSXCommandContext,
|
||||
CommandResultDisplay,
|
||||
} from '../../commands.js'
|
||||
|
||||
type Props = {
|
||||
onClose: (result?: string, options?: {
|
||||
display?: CommandResultDisplay;
|
||||
}) => void;
|
||||
context: LocalJSXCommandContext;
|
||||
defaultTab: 'Status' | 'Config' | 'Usage' | 'Gates';
|
||||
};
|
||||
export function Settings(t0) {
|
||||
const $ = _c(25);
|
||||
const {
|
||||
onClose,
|
||||
context,
|
||||
defaultTab
|
||||
} = t0;
|
||||
const [selectedTab, setSelectedTab] = useState(defaultTab);
|
||||
const [tabsHidden, setTabsHidden] = useState(false);
|
||||
const [configOwnsEsc, setConfigOwnsEsc] = useState(false);
|
||||
const [gatesOwnsEsc, setGatesOwnsEsc] = useState(false);
|
||||
const insideModal = useIsInsideModal();
|
||||
const {
|
||||
rows
|
||||
} = useModalOrTerminalSize(useTerminalSize());
|
||||
const contentHeight = insideModal ? rows + 1 : Math.max(15, Math.min(Math.floor(rows * 0.8), 30));
|
||||
const [diagnosticsPromise] = useState(_temp2);
|
||||
useExitOnCtrlCDWithKeybindings();
|
||||
let t1;
|
||||
if ($[0] !== onClose || $[1] !== tabsHidden) {
|
||||
t1 = () => {
|
||||
if (tabsHidden) {
|
||||
return;
|
||||
}
|
||||
onClose("Status dialog dismissed", {
|
||||
display: "system"
|
||||
});
|
||||
};
|
||||
$[0] = onClose;
|
||||
$[1] = tabsHidden;
|
||||
$[2] = t1;
|
||||
} else {
|
||||
t1 = $[2];
|
||||
}
|
||||
const handleEscape = t1;
|
||||
const t2 = !tabsHidden && !(selectedTab === "Config" && configOwnsEsc) && !(selectedTab === "Gates" && gatesOwnsEsc);
|
||||
let t3;
|
||||
if ($[3] !== t2) {
|
||||
t3 = {
|
||||
context: "Settings",
|
||||
isActive: t2
|
||||
};
|
||||
$[3] = t2;
|
||||
$[4] = t3;
|
||||
} else {
|
||||
t3 = $[4];
|
||||
}
|
||||
useKeybinding("confirm:no", handleEscape, t3);
|
||||
let t4;
|
||||
if ($[5] !== context || $[6] !== diagnosticsPromise) {
|
||||
t4 = <Tab key="status" title="Status"><Status context={context} diagnosticsPromise={diagnosticsPromise} /></Tab>;
|
||||
$[5] = context;
|
||||
$[6] = diagnosticsPromise;
|
||||
$[7] = t4;
|
||||
} else {
|
||||
t4 = $[7];
|
||||
}
|
||||
let t5;
|
||||
if ($[8] !== contentHeight || $[9] !== context || $[10] !== onClose) {
|
||||
t5 = <Tab key="config" title="Config"><Suspense fallback={null}><Config context={context} onClose={onClose} setTabsHidden={setTabsHidden} onIsSearchModeChange={setConfigOwnsEsc} contentHeight={contentHeight} /></Suspense></Tab>;
|
||||
$[8] = contentHeight;
|
||||
$[9] = context;
|
||||
$[10] = onClose;
|
||||
$[11] = t5;
|
||||
} else {
|
||||
t5 = $[11];
|
||||
}
|
||||
let t6;
|
||||
if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
|
||||
t6 = <Tab key="usage" title="Usage"><Usage /></Tab>;
|
||||
$[12] = t6;
|
||||
} else {
|
||||
t6 = $[12];
|
||||
}
|
||||
let t7;
|
||||
if ($[13] !== contentHeight) {
|
||||
t7 = [];
|
||||
$[13] = contentHeight;
|
||||
$[14] = t7;
|
||||
} else {
|
||||
t7 = $[14];
|
||||
}
|
||||
let t8;
|
||||
if ($[15] !== t4 || $[16] !== t5 || $[17] !== t7) {
|
||||
t8 = [t4, t5, t6, ...t7];
|
||||
$[15] = t4;
|
||||
$[16] = t5;
|
||||
$[17] = t7;
|
||||
$[18] = t8;
|
||||
} else {
|
||||
t8 = $[18];
|
||||
}
|
||||
const tabs = t8;
|
||||
const t9 = defaultTab !== "Config" && defaultTab !== "Gates";
|
||||
const t10 = tabsHidden || insideModal ? undefined : contentHeight;
|
||||
let t11;
|
||||
if ($[19] !== selectedTab || $[20] !== t10 || $[21] !== t9 || $[22] !== tabs || $[23] !== tabsHidden) {
|
||||
t11 = <Pane color="permission"><Tabs color="permission" selectedTab={selectedTab} onTabChange={setSelectedTab} hidden={tabsHidden} initialHeaderFocused={t9} contentHeight={t10}>{tabs}</Tabs></Pane>;
|
||||
$[19] = selectedTab;
|
||||
$[20] = t10;
|
||||
$[21] = t9;
|
||||
$[22] = tabs;
|
||||
$[23] = tabsHidden;
|
||||
$[24] = t11;
|
||||
} else {
|
||||
t11 = $[24];
|
||||
}
|
||||
return t11;
|
||||
onClose: (
|
||||
result?: string,
|
||||
options?: { display?: CommandResultDisplay },
|
||||
) => void
|
||||
context: LocalJSXCommandContext
|
||||
defaultTab: 'Status' | 'Config' | 'Usage' | 'Gates'
|
||||
}
|
||||
function _temp2() {
|
||||
return buildDiagnostics().catch(_temp);
|
||||
}
|
||||
function _temp() {
|
||||
return [];
|
||||
|
||||
export function Settings({
|
||||
onClose,
|
||||
context,
|
||||
defaultTab,
|
||||
}: Props): React.ReactNode {
|
||||
const [selectedTab, setSelectedTab] = useState<string>(defaultTab)
|
||||
const [tabsHidden, setTabsHidden] = useState(false)
|
||||
// True while Config's own Esc handler is active (search mode with content
|
||||
// focused). Settings must cede Esc so search can clear/exit first.
|
||||
const [configOwnsEsc, setConfigOwnsEsc] = useState(false)
|
||||
const [gatesOwnsEsc, setGatesOwnsEsc] = useState(false)
|
||||
// Fixed content height so switching tabs doesn't shift the pane height.
|
||||
// Outside modals cap at min(80% viewport, 30). Inside a Modal the modal's
|
||||
// innerSize.rows IS the ScrollBox viewport — the 0.8 multiplier over-
|
||||
// shrinks, leaving empty rows while Config shows "↓ N more below".
|
||||
//
|
||||
// Inside-modal math: Config's paneCap-10 chrome estimate was tuned for
|
||||
// marginY={1} (2 rows) which is stripped inside modals → +2 to recover.
|
||||
// Then -2 for Tabs' header row + its marginTop=1. Plus +1 observed gap
|
||||
// from the paneCap-10 estimate being slightly generous. Net: rows + 1.
|
||||
const insideModal = useIsInsideModal()
|
||||
const { rows } = useModalOrTerminalSize(useTerminalSize())
|
||||
const contentHeight = insideModal
|
||||
? rows + 1
|
||||
: Math.max(15, Math.min(Math.floor(rows * 0.8), 30))
|
||||
// Kick off diagnostics once when the pane opens. Status use()s this so
|
||||
// it resolves once per /config invocation — no re-fetch flash when
|
||||
// tabbing back to Status (Tab unmounts children when not selected).
|
||||
const [diagnosticsPromise] = useState(() =>
|
||||
buildDiagnostics().catch(() => []),
|
||||
)
|
||||
|
||||
useExitOnCtrlCDWithKeybindings()
|
||||
|
||||
// Handle escape via keybinding - only when not in submenu
|
||||
const handleEscape = () => {
|
||||
// Don't handle escape when a submenu is showing (tabsHidden means submenu is open)
|
||||
// Let the submenu handle escape to return to the main menu
|
||||
if (tabsHidden) {
|
||||
return
|
||||
}
|
||||
// TODO: Update to "Settings" dialog once we define '/settings'.
|
||||
onClose('Status dialog dismissed', { display: 'system' })
|
||||
}
|
||||
|
||||
// Disable when submenu is open so the submenu's Dialog can handle ESC,
|
||||
// and when Config's search mode is active so its useInput handler
|
||||
// (clear query → exit search) processes Escape first.
|
||||
useKeybinding('confirm:no', handleEscape, {
|
||||
context: 'Settings',
|
||||
isActive:
|
||||
!tabsHidden &&
|
||||
!(selectedTab === 'Config' && configOwnsEsc) &&
|
||||
!(selectedTab === 'Gates' && gatesOwnsEsc),
|
||||
})
|
||||
|
||||
const tabs = [
|
||||
<Tab key="status" title="Status">
|
||||
<Status context={context} diagnosticsPromise={diagnosticsPromise} />
|
||||
</Tab>,
|
||||
<Tab key="config" title="Config">
|
||||
<Suspense fallback={null}>
|
||||
<Config
|
||||
context={context}
|
||||
onClose={onClose}
|
||||
setTabsHidden={setTabsHidden}
|
||||
onIsSearchModeChange={setConfigOwnsEsc}
|
||||
contentHeight={contentHeight}
|
||||
/>
|
||||
</Suspense>
|
||||
</Tab>,
|
||||
<Tab key="usage" title="Usage">
|
||||
<Usage />
|
||||
</Tab>,
|
||||
...(process.env.USER_TYPE === 'ant'
|
||||
? [
|
||||
<Tab key="gates" title="Gates">
|
||||
<Gates
|
||||
onOwnsEscChange={setGatesOwnsEsc}
|
||||
contentHeight={contentHeight}
|
||||
/>
|
||||
</Tab>,
|
||||
]
|
||||
: []),
|
||||
]
|
||||
|
||||
return (
|
||||
<Pane color="permission">
|
||||
<Tabs
|
||||
color="permission"
|
||||
selectedTab={selectedTab}
|
||||
onTabChange={setSelectedTab}
|
||||
hidden={tabsHidden}
|
||||
// Config has interactive content — start with header unfocused so
|
||||
// left/right/tab cycle option values instead of switching tabs.
|
||||
initialHeaderFocused={defaultTab !== 'Config' && defaultTab !== 'Gates'}
|
||||
// Inside a Modal, skip the Tabs-level cap so tall tabs (Status's
|
||||
// MCP list) flow to their natural height for the Modal's ScrollBox
|
||||
// to scroll. Config/Gates still get contentHeight above — they
|
||||
// paginate internally so this only affects Status/Usage.
|
||||
contentHeight={tabsHidden || insideModal ? undefined : contentHeight}
|
||||
>
|
||||
{tabs}
|
||||
</Tabs>
|
||||
</Pane>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,240 +1,192 @@
|
||||
import { c as _c } from "react/compiler-runtime";
|
||||
import figures from 'figures';
|
||||
import * as React from 'react';
|
||||
import { Suspense, use } from 'react';
|
||||
import { getSessionId } from '../../bootstrap/state.js';
|
||||
import type { LocalJSXCommandContext } from '../../commands.js';
|
||||
import { useIsInsideModal } from '../../context/modalContext.js';
|
||||
import { Box, Text, useTheme } from '../../ink.js';
|
||||
import { type AppState, useAppState } from '../../state/AppState.js';
|
||||
import { getCwd } from '../../utils/cwd.js';
|
||||
import { getCurrentSessionTitle } from '../../utils/sessionStorage.js';
|
||||
import { buildAccountProperties, buildAPIProviderProperties, buildIDEProperties, buildInstallationDiagnostics, buildInstallationHealthDiagnostics, buildMcpProperties, buildMemoryDiagnostics, buildSandboxProperties, buildSettingSourcesProperties, type Diagnostic, getModelDisplayLabel, type Property } from '../../utils/status.js';
|
||||
import type { ThemeName } from '../../utils/theme.js';
|
||||
import { ConfigurableShortcutHint } from '../ConfigurableShortcutHint.js';
|
||||
import figures from 'figures'
|
||||
import * as React from 'react'
|
||||
import { Suspense, use } from 'react'
|
||||
import { getSessionId } from '../../bootstrap/state.js'
|
||||
import type { LocalJSXCommandContext } from '../../commands.js'
|
||||
import { useIsInsideModal } from '../../context/modalContext.js'
|
||||
import { Box, Text, useTheme } from '../../ink.js'
|
||||
import { type AppState, useAppState } from '../../state/AppState.js'
|
||||
import { getCwd } from '../../utils/cwd.js'
|
||||
import { getCurrentSessionTitle } from '../../utils/sessionStorage.js'
|
||||
import {
|
||||
buildAccountProperties,
|
||||
buildAPIProviderProperties,
|
||||
buildIDEProperties,
|
||||
buildInstallationDiagnostics,
|
||||
buildInstallationHealthDiagnostics,
|
||||
buildMcpProperties,
|
||||
buildMemoryDiagnostics,
|
||||
buildSandboxProperties,
|
||||
buildSettingSourcesProperties,
|
||||
type Diagnostic,
|
||||
getModelDisplayLabel,
|
||||
type Property,
|
||||
} from '../../utils/status.js'
|
||||
import type { ThemeName } from '../../utils/theme.js'
|
||||
import { ConfigurableShortcutHint } from '../ConfigurableShortcutHint.js'
|
||||
|
||||
type Props = {
|
||||
context: LocalJSXCommandContext;
|
||||
diagnosticsPromise: Promise<Diagnostic[]>;
|
||||
};
|
||||
function buildPrimarySection(): Property[] {
|
||||
const sessionId = getSessionId();
|
||||
const customTitle = getCurrentSessionTitle(sessionId);
|
||||
const nameValue = customTitle ?? <Text dimColor>/rename to add a name</Text>;
|
||||
return [{
|
||||
label: 'Version',
|
||||
value: MACRO.VERSION
|
||||
}, {
|
||||
label: 'Session name',
|
||||
value: nameValue
|
||||
}, {
|
||||
label: 'Session ID',
|
||||
value: sessionId
|
||||
}, {
|
||||
label: 'cwd',
|
||||
value: getCwd()
|
||||
}, ...buildAccountProperties(), ...buildAPIProviderProperties()];
|
||||
context: LocalJSXCommandContext
|
||||
diagnosticsPromise: Promise<Diagnostic[]>
|
||||
}
|
||||
|
||||
function buildPrimarySection(): Property[] {
|
||||
const sessionId = getSessionId()
|
||||
const customTitle = getCurrentSessionTitle(sessionId)
|
||||
const nameValue = customTitle ?? <Text dimColor>/rename to add a name</Text>
|
||||
|
||||
return [
|
||||
{ label: 'Version', value: MACRO.VERSION },
|
||||
{ label: 'Session name', value: nameValue },
|
||||
{ label: 'Session ID', value: sessionId },
|
||||
{ label: 'cwd', value: getCwd() },
|
||||
...buildAccountProperties(),
|
||||
...buildAPIProviderProperties(),
|
||||
]
|
||||
}
|
||||
|
||||
function buildSecondarySection({
|
||||
mainLoopModel,
|
||||
mcp,
|
||||
theme,
|
||||
context
|
||||
context,
|
||||
}: {
|
||||
mainLoopModel: AppState['mainLoopModel'];
|
||||
mcp: AppState['mcp'];
|
||||
theme: ThemeName;
|
||||
context: LocalJSXCommandContext;
|
||||
mainLoopModel: AppState['mainLoopModel']
|
||||
mcp: AppState['mcp']
|
||||
theme: ThemeName
|
||||
context: LocalJSXCommandContext
|
||||
}): Property[] {
|
||||
const modelLabel = getModelDisplayLabel(mainLoopModel);
|
||||
return [{
|
||||
label: 'Model',
|
||||
value: modelLabel
|
||||
}, ...buildIDEProperties(mcp.clients, context.options.ideInstallationStatus, theme), ...buildMcpProperties(mcp.clients, theme), ...buildSandboxProperties(), ...buildSettingSourcesProperties()];
|
||||
}
|
||||
export async function buildDiagnostics(): Promise<Diagnostic[]> {
|
||||
return [...(await buildInstallationDiagnostics()), ...(await buildInstallationHealthDiagnostics()), ...(await buildMemoryDiagnostics())];
|
||||
}
|
||||
function PropertyValue(t0) {
|
||||
const $ = _c(8);
|
||||
const {
|
||||
value
|
||||
} = t0;
|
||||
if (Array.isArray(value)) {
|
||||
let t1;
|
||||
if ($[0] !== value) {
|
||||
let t2;
|
||||
if ($[2] !== value.length) {
|
||||
t2 = (item, i) => <Text key={i}>{item}{i < value.length - 1 ? "," : ""}</Text>;
|
||||
$[2] = value.length;
|
||||
$[3] = t2;
|
||||
} else {
|
||||
t2 = $[3];
|
||||
}
|
||||
t1 = value.map(t2);
|
||||
$[0] = value;
|
||||
$[1] = t1;
|
||||
} else {
|
||||
t1 = $[1];
|
||||
}
|
||||
let t2;
|
||||
if ($[4] !== t1) {
|
||||
t2 = <Box flexWrap="wrap" columnGap={1} flexShrink={99}>{t1}</Box>;
|
||||
$[4] = t1;
|
||||
$[5] = t2;
|
||||
} else {
|
||||
t2 = $[5];
|
||||
}
|
||||
return t2;
|
||||
}
|
||||
if (typeof value === "string") {
|
||||
let t1;
|
||||
if ($[6] !== value) {
|
||||
t1 = <Text>{value}</Text>;
|
||||
$[6] = value;
|
||||
$[7] = t1;
|
||||
} else {
|
||||
t1 = $[7];
|
||||
}
|
||||
return t1;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
export function Status(t0) {
|
||||
const $ = _c(20);
|
||||
const {
|
||||
context,
|
||||
diagnosticsPromise
|
||||
} = t0;
|
||||
const mainLoopModel = useAppState(_temp);
|
||||
const mcp = useAppState(_temp2);
|
||||
const [theme] = useTheme();
|
||||
let t1;
|
||||
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
|
||||
t1 = buildPrimarySection();
|
||||
$[0] = t1;
|
||||
} else {
|
||||
t1 = $[0];
|
||||
}
|
||||
let t2;
|
||||
if ($[1] !== context || $[2] !== mainLoopModel || $[3] !== mcp || $[4] !== theme) {
|
||||
t2 = buildSecondarySection({
|
||||
mainLoopModel,
|
||||
mcp,
|
||||
const modelLabel = getModelDisplayLabel(mainLoopModel)
|
||||
|
||||
return [
|
||||
{ label: 'Model', value: modelLabel },
|
||||
...buildIDEProperties(
|
||||
mcp.clients,
|
||||
context.options.ideInstallationStatus,
|
||||
theme,
|
||||
context
|
||||
});
|
||||
$[1] = context;
|
||||
$[2] = mainLoopModel;
|
||||
$[3] = mcp;
|
||||
$[4] = theme;
|
||||
$[5] = t2;
|
||||
} else {
|
||||
t2 = $[5];
|
||||
}
|
||||
let t3;
|
||||
if ($[6] !== t2) {
|
||||
t3 = [t1, t2];
|
||||
$[6] = t2;
|
||||
$[7] = t3;
|
||||
} else {
|
||||
t3 = $[7];
|
||||
}
|
||||
const sections = t3;
|
||||
const grow = useIsInsideModal() ? 1 : undefined;
|
||||
let t4;
|
||||
if ($[8] !== sections) {
|
||||
t4 = sections.map(_temp4);
|
||||
$[8] = sections;
|
||||
$[9] = t4;
|
||||
} else {
|
||||
t4 = $[9];
|
||||
}
|
||||
let t5;
|
||||
if ($[10] !== diagnosticsPromise) {
|
||||
t5 = <Suspense fallback={null}><Diagnostics promise={diagnosticsPromise} /></Suspense>;
|
||||
$[10] = diagnosticsPromise;
|
||||
$[11] = t5;
|
||||
} else {
|
||||
t5 = $[11];
|
||||
}
|
||||
let t6;
|
||||
if ($[12] !== grow || $[13] !== t4 || $[14] !== t5) {
|
||||
t6 = <Box flexDirection="column" gap={1} flexGrow={grow}>{t4}{t5}</Box>;
|
||||
$[12] = grow;
|
||||
$[13] = t4;
|
||||
$[14] = t5;
|
||||
$[15] = t6;
|
||||
} else {
|
||||
t6 = $[15];
|
||||
}
|
||||
let t7;
|
||||
if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
|
||||
t7 = <Text dimColor={true}><ConfigurableShortcutHint action="confirm:no" context="Settings" fallback="Esc" description="cancel" /></Text>;
|
||||
$[16] = t7;
|
||||
} else {
|
||||
t7 = $[16];
|
||||
}
|
||||
let t8;
|
||||
if ($[17] !== grow || $[18] !== t6) {
|
||||
t8 = <Box flexDirection="column" flexGrow={grow}>{t6}{t7}</Box>;
|
||||
$[17] = grow;
|
||||
$[18] = t6;
|
||||
$[19] = t8;
|
||||
} else {
|
||||
t8 = $[19];
|
||||
}
|
||||
return t8;
|
||||
),
|
||||
...buildMcpProperties(mcp.clients, theme),
|
||||
...buildSandboxProperties(),
|
||||
...buildSettingSourcesProperties(),
|
||||
]
|
||||
}
|
||||
function _temp4(properties, i) {
|
||||
return properties.length > 0 && <Box key={i} flexDirection="column">{properties.map(_temp3)}</Box>;
|
||||
|
||||
export async function buildDiagnostics(): Promise<Diagnostic[]> {
|
||||
return [
|
||||
...(await buildInstallationDiagnostics()),
|
||||
...(await buildInstallationHealthDiagnostics()),
|
||||
...(await buildMemoryDiagnostics()),
|
||||
]
|
||||
}
|
||||
function _temp3(t0, j) {
|
||||
const {
|
||||
label,
|
||||
value
|
||||
} = t0;
|
||||
return <Box key={j} flexDirection="row" gap={1} flexShrink={0}>{label !== undefined && <Text bold={true}>{label}:</Text>}<PropertyValue value={value} /></Box>;
|
||||
}
|
||||
function _temp2(s_0) {
|
||||
return s_0.mcp;
|
||||
}
|
||||
function _temp(s) {
|
||||
return s.mainLoopModel;
|
||||
}
|
||||
function Diagnostics(t0) {
|
||||
const $ = _c(5);
|
||||
const {
|
||||
promise
|
||||
} = t0;
|
||||
const diagnostics = use(promise) as any[];
|
||||
if (diagnostics.length === 0) {
|
||||
return null;
|
||||
|
||||
function PropertyValue({
|
||||
value,
|
||||
}: {
|
||||
value: Property['value']
|
||||
}): React.ReactNode {
|
||||
if (Array.isArray(value)) {
|
||||
return (
|
||||
<Box flexWrap="wrap" columnGap={1} flexShrink={99}>
|
||||
{value.map((item, i) => {
|
||||
return (
|
||||
<Text key={i}>
|
||||
{item}
|
||||
{i < value.length - 1 ? ',' : ''}
|
||||
</Text>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
let t1;
|
||||
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
|
||||
t1 = <Text bold={true}>System Diagnostics</Text>;
|
||||
$[0] = t1;
|
||||
} else {
|
||||
t1 = $[0];
|
||||
|
||||
if (typeof value === 'string') {
|
||||
return <Text>{value}</Text>
|
||||
}
|
||||
let t2;
|
||||
if ($[1] !== diagnostics) {
|
||||
t2 = diagnostics.map(_temp5);
|
||||
$[1] = diagnostics;
|
||||
$[2] = t2;
|
||||
} else {
|
||||
t2 = $[2];
|
||||
}
|
||||
let t3;
|
||||
if ($[3] !== t2) {
|
||||
t3 = <Box flexDirection="column" paddingBottom={1}>{t1}{t2}</Box>;
|
||||
$[3] = t2;
|
||||
$[4] = t3;
|
||||
} else {
|
||||
t3 = $[4];
|
||||
}
|
||||
return t3;
|
||||
|
||||
return value
|
||||
}
|
||||
function _temp5(diagnostic, i) {
|
||||
return <Box key={i} flexDirection="row" gap={1} paddingX={1}><Text color="error">{figures.warning}</Text>{typeof diagnostic === "string" ? <Text wrap="wrap">{diagnostic}</Text> : diagnostic}</Box>;
|
||||
|
||||
export function Status({
|
||||
context,
|
||||
diagnosticsPromise,
|
||||
}: Props): React.ReactNode {
|
||||
const mainLoopModel = useAppState(s => s.mainLoopModel)
|
||||
const mcp = useAppState(s => s.mcp)
|
||||
const [theme] = useTheme()
|
||||
|
||||
// Sections are synchronous — compute in render so they're never empty.
|
||||
// diagnosticsPromise is created once in Settings.tsx so it resolves once
|
||||
// per pane invocation instead of re-fetching on every tab switch (Tab
|
||||
// unmounts children when not selected, which was causing the flash).
|
||||
const sections = React.useMemo(
|
||||
() => [
|
||||
buildPrimarySection(),
|
||||
buildSecondarySection({ mainLoopModel, mcp, theme, context }),
|
||||
],
|
||||
[mainLoopModel, mcp, theme, context],
|
||||
)
|
||||
|
||||
// flexGrow so the "Esc to cancel" footer pins to the bottom of the
|
||||
// Modal's inner ScrollBox when content is short. The ScrollBox content
|
||||
// wrapper has flexGrow:1 (fills at least the viewport), so this stretches
|
||||
// to match. Without it, short Status content floats at the top and the
|
||||
// footer sits mid-modal with 2-3 trailing blank rows below. Outside a
|
||||
// Modal (non-fullscreen), leave layout alone — no ScrollBox to fill.
|
||||
const grow = useIsInsideModal() ? 1 : undefined
|
||||
|
||||
return (
|
||||
<Box flexDirection="column" flexGrow={grow}>
|
||||
<Box flexDirection="column" gap={1} flexGrow={grow}>
|
||||
{sections.map(
|
||||
(properties, i) =>
|
||||
properties.length > 0 && (
|
||||
<Box key={i} flexDirection="column">
|
||||
{properties.map(({ label, value }, j) => (
|
||||
<Box key={j} flexDirection="row" gap={1} flexShrink={0}>
|
||||
{label !== undefined && <Text bold>{label}:</Text>}
|
||||
<PropertyValue value={value} />
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
),
|
||||
)}
|
||||
|
||||
<Suspense fallback={null}>
|
||||
<Diagnostics promise={diagnosticsPromise} />
|
||||
</Suspense>
|
||||
</Box>
|
||||
<Text dimColor>
|
||||
<ConfigurableShortcutHint
|
||||
action="confirm:no"
|
||||
context="Settings"
|
||||
fallback="Esc"
|
||||
description="cancel"
|
||||
/>
|
||||
</Text>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
function Diagnostics({
|
||||
promise,
|
||||
}: {
|
||||
promise: Promise<Diagnostic[]>
|
||||
}): React.ReactNode {
|
||||
const diagnostics = use(promise)
|
||||
if (diagnostics.length === 0) return null
|
||||
return (
|
||||
<Box flexDirection="column" paddingBottom={1}>
|
||||
<Text bold>System Diagnostics</Text>
|
||||
{diagnostics.map((diagnostic, i) => (
|
||||
<Box key={i} flexDirection="row" gap={1} paddingX={1}>
|
||||
<Text color="error">{figures.warning}</Text>
|
||||
{typeof diagnostic === 'string' ? (
|
||||
<Text wrap="wrap">{diagnostic}</Text>
|
||||
) : (
|
||||
diagnostic
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,376 +1,322 @@
|
||||
import { c as _c } from "react/compiler-runtime";
|
||||
import * as React from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { extraUsage as extraUsageCommand } from 'src/commands/extra-usage/index.js';
|
||||
import { formatCost } from 'src/cost-tracker.js';
|
||||
import { getSubscriptionType } from 'src/utils/auth.js';
|
||||
import { useTerminalSize } from '../../hooks/useTerminalSize.js';
|
||||
import { Box, Text } from '../../ink.js';
|
||||
import { useKeybinding } from '../../keybindings/useKeybinding.js';
|
||||
import { type ExtraUsage, fetchUtilization, type RateLimit, type Utilization } from '../../services/api/usage.js';
|
||||
import { formatResetText } from '../../utils/format.js';
|
||||
import { logError } from '../../utils/log.js';
|
||||
import { jsonStringify } from '../../utils/slowOperations.js';
|
||||
import { ConfigurableShortcutHint } from '../ConfigurableShortcutHint.js';
|
||||
import { Byline } from '../design-system/Byline.js';
|
||||
import { ProgressBar } from '../design-system/ProgressBar.js';
|
||||
import { isEligibleForOverageCreditGrant, OverageCreditUpsell } from '../LogoV2/OverageCreditUpsell.js';
|
||||
import * as React from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { extraUsage as extraUsageCommand } from 'src/commands/extra-usage/index.js'
|
||||
import { formatCost } from 'src/cost-tracker.js'
|
||||
import { getSubscriptionType } from 'src/utils/auth.js'
|
||||
import { useTerminalSize } from '../../hooks/useTerminalSize.js'
|
||||
import { Box, Text } from '../../ink.js'
|
||||
import { useKeybinding } from '../../keybindings/useKeybinding.js'
|
||||
import {
|
||||
type ExtraUsage,
|
||||
fetchUtilization,
|
||||
type RateLimit,
|
||||
type Utilization,
|
||||
} from '../../services/api/usage.js'
|
||||
import { formatResetText } from '../../utils/format.js'
|
||||
import { logError } from '../../utils/log.js'
|
||||
import { jsonStringify } from '../../utils/slowOperations.js'
|
||||
import { ConfigurableShortcutHint } from '../ConfigurableShortcutHint.js'
|
||||
import { Byline } from '../design-system/Byline.js'
|
||||
import { ProgressBar } from '../design-system/ProgressBar.js'
|
||||
import {
|
||||
isEligibleForOverageCreditGrant,
|
||||
OverageCreditUpsell,
|
||||
} from '../LogoV2/OverageCreditUpsell.js'
|
||||
|
||||
type LimitBarProps = {
|
||||
title: string;
|
||||
limit: RateLimit;
|
||||
maxWidth: number;
|
||||
showTimeInReset?: boolean;
|
||||
extraSubtext?: string;
|
||||
};
|
||||
function LimitBar(t0) {
|
||||
const $ = _c(34);
|
||||
const {
|
||||
title,
|
||||
limit,
|
||||
maxWidth,
|
||||
showTimeInReset: t1,
|
||||
extraSubtext
|
||||
} = t0;
|
||||
const showTimeInReset = t1 === undefined ? true : t1;
|
||||
const {
|
||||
utilization,
|
||||
resets_at
|
||||
} = limit;
|
||||
title: string
|
||||
limit: RateLimit
|
||||
maxWidth: number
|
||||
showTimeInReset?: boolean
|
||||
extraSubtext?: string
|
||||
}
|
||||
|
||||
function LimitBar({
|
||||
title,
|
||||
limit,
|
||||
maxWidth,
|
||||
showTimeInReset = true,
|
||||
extraSubtext,
|
||||
}: LimitBarProps): React.ReactNode {
|
||||
const { utilization, resets_at } = limit
|
||||
if (utilization === null) {
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
const usedText = `${Math.floor(utilization)}% used`;
|
||||
let subtext;
|
||||
|
||||
// Calculate usage percentage
|
||||
const usedText = `${Math.floor(utilization)}% used`
|
||||
|
||||
let subtext: string | undefined
|
||||
if (resets_at) {
|
||||
let t2;
|
||||
if ($[0] !== resets_at || $[1] !== showTimeInReset) {
|
||||
t2 = formatResetText(resets_at, true, showTimeInReset);
|
||||
$[0] = resets_at;
|
||||
$[1] = showTimeInReset;
|
||||
$[2] = t2;
|
||||
} else {
|
||||
t2 = $[2];
|
||||
}
|
||||
subtext = `Resets ${t2}`;
|
||||
subtext = `Resets ${formatResetText(resets_at, true, showTimeInReset)}`
|
||||
}
|
||||
|
||||
if (extraSubtext) {
|
||||
if (subtext) {
|
||||
subtext = `${extraSubtext} · ${subtext}`;
|
||||
subtext = `${extraSubtext} · ${subtext}`
|
||||
} else {
|
||||
subtext = extraSubtext;
|
||||
subtext = extraSubtext
|
||||
}
|
||||
}
|
||||
if (maxWidth >= 62) {
|
||||
let t2;
|
||||
if ($[3] !== title) {
|
||||
t2 = <Text bold={true}>{title}</Text>;
|
||||
$[3] = title;
|
||||
$[4] = t2;
|
||||
} else {
|
||||
t2 = $[4];
|
||||
}
|
||||
const t3 = utilization / 100;
|
||||
let t4;
|
||||
if ($[5] !== t3) {
|
||||
t4 = <ProgressBar ratio={t3} width={50} fillColor="rate_limit_fill" emptyColor="rate_limit_empty" />;
|
||||
$[5] = t3;
|
||||
$[6] = t4;
|
||||
} else {
|
||||
t4 = $[6];
|
||||
}
|
||||
let t5;
|
||||
if ($[7] !== usedText) {
|
||||
t5 = <Text>{usedText}</Text>;
|
||||
$[7] = usedText;
|
||||
$[8] = t5;
|
||||
} else {
|
||||
t5 = $[8];
|
||||
}
|
||||
let t6;
|
||||
if ($[9] !== t4 || $[10] !== t5) {
|
||||
t6 = <Box flexDirection="row" gap={1}>{t4}{t5}</Box>;
|
||||
$[9] = t4;
|
||||
$[10] = t5;
|
||||
$[11] = t6;
|
||||
} else {
|
||||
t6 = $[11];
|
||||
}
|
||||
let t7;
|
||||
if ($[12] !== subtext) {
|
||||
t7 = subtext && <Text dimColor={true}>{subtext}</Text>;
|
||||
$[12] = subtext;
|
||||
$[13] = t7;
|
||||
} else {
|
||||
t7 = $[13];
|
||||
}
|
||||
let t8;
|
||||
if ($[14] !== t2 || $[15] !== t6 || $[16] !== t7) {
|
||||
t8 = <Box flexDirection="column">{t2}{t6}{t7}</Box>;
|
||||
$[14] = t2;
|
||||
$[15] = t6;
|
||||
$[16] = t7;
|
||||
$[17] = t8;
|
||||
} else {
|
||||
t8 = $[17];
|
||||
}
|
||||
return t8;
|
||||
|
||||
const maxBarWidth = 50
|
||||
const usedLabelSpace = 12
|
||||
if (maxWidth >= maxBarWidth + usedLabelSpace) {
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
<Text bold>{title}</Text>
|
||||
<Box flexDirection="row" gap={1}>
|
||||
<ProgressBar
|
||||
ratio={utilization / 100}
|
||||
width={maxBarWidth}
|
||||
fillColor="rate_limit_fill"
|
||||
emptyColor="rate_limit_empty"
|
||||
/>
|
||||
<Text>{usedText}</Text>
|
||||
</Box>
|
||||
{subtext && <Text dimColor>{subtext}</Text>}
|
||||
</Box>
|
||||
)
|
||||
} else {
|
||||
let t2;
|
||||
if ($[18] !== title) {
|
||||
t2 = <Text bold={true}>{title}</Text>;
|
||||
$[18] = title;
|
||||
$[19] = t2;
|
||||
} else {
|
||||
t2 = $[19];
|
||||
}
|
||||
let t3;
|
||||
if ($[20] !== subtext) {
|
||||
t3 = subtext && <><Text> </Text><Text dimColor={true}>· {subtext}</Text></>;
|
||||
$[20] = subtext;
|
||||
$[21] = t3;
|
||||
} else {
|
||||
t3 = $[21];
|
||||
}
|
||||
let t4;
|
||||
if ($[22] !== t2 || $[23] !== t3) {
|
||||
t4 = <Text>{t2}{t3}</Text>;
|
||||
$[22] = t2;
|
||||
$[23] = t3;
|
||||
$[24] = t4;
|
||||
} else {
|
||||
t4 = $[24];
|
||||
}
|
||||
const t5 = utilization / 100;
|
||||
let t6;
|
||||
if ($[25] !== maxWidth || $[26] !== t5) {
|
||||
t6 = <ProgressBar ratio={t5} width={maxWidth} fillColor="rate_limit_fill" emptyColor="rate_limit_empty" />;
|
||||
$[25] = maxWidth;
|
||||
$[26] = t5;
|
||||
$[27] = t6;
|
||||
} else {
|
||||
t6 = $[27];
|
||||
}
|
||||
let t7;
|
||||
if ($[28] !== usedText) {
|
||||
t7 = <Text>{usedText}</Text>;
|
||||
$[28] = usedText;
|
||||
$[29] = t7;
|
||||
} else {
|
||||
t7 = $[29];
|
||||
}
|
||||
let t8;
|
||||
if ($[30] !== t4 || $[31] !== t6 || $[32] !== t7) {
|
||||
t8 = <Box flexDirection="column">{t4}{t6}{t7}</Box>;
|
||||
$[30] = t4;
|
||||
$[31] = t6;
|
||||
$[32] = t7;
|
||||
$[33] = t8;
|
||||
} else {
|
||||
t8 = $[33];
|
||||
}
|
||||
return t8;
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
<Text>
|
||||
<Text bold>{title}</Text>
|
||||
{subtext && (
|
||||
<>
|
||||
<Text> </Text>
|
||||
<Text dimColor>· {subtext}</Text>
|
||||
</>
|
||||
)}
|
||||
</Text>
|
||||
<ProgressBar
|
||||
ratio={utilization / 100}
|
||||
width={maxWidth}
|
||||
fillColor="rate_limit_fill"
|
||||
emptyColor="rate_limit_empty"
|
||||
/>
|
||||
<Text>{usedText}</Text>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export function Usage(): React.ReactNode {
|
||||
const [utilization, setUtilization] = useState<Utilization | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const {
|
||||
columns
|
||||
} = useTerminalSize();
|
||||
const availableWidth = columns - 2; // 2 for screen padding
|
||||
const maxWidth = Math.min(availableWidth, 80);
|
||||
const [utilization, setUtilization] = useState<Utilization | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const { columns } = useTerminalSize()
|
||||
|
||||
const availableWidth = columns - 2 // 2 for screen padding
|
||||
const maxWidth = Math.min(availableWidth, 80)
|
||||
|
||||
const loadUtilization = React.useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
setIsLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const data = await fetchUtilization();
|
||||
setUtilization(data);
|
||||
const data = await fetchUtilization()
|
||||
setUtilization(data)
|
||||
} catch (err) {
|
||||
logError(err as Error);
|
||||
const axiosError = err as {
|
||||
response?: {
|
||||
data?: unknown;
|
||||
};
|
||||
};
|
||||
const responseBody = axiosError.response?.data ? jsonStringify(axiosError.response.data) : undefined;
|
||||
setError(responseBody ? `Failed to load usage data: ${responseBody}` : 'Failed to load usage data');
|
||||
logError(err as Error)
|
||||
const axiosError = err as { response?: { data?: unknown } }
|
||||
const responseBody = axiosError.response?.data
|
||||
? jsonStringify(axiosError.response.data)
|
||||
: undefined
|
||||
setError(
|
||||
responseBody
|
||||
? `Failed to load usage data: ${responseBody}`
|
||||
: 'Failed to load usage data',
|
||||
)
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setIsLoading(false)
|
||||
}
|
||||
}, []);
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
void loadUtilization();
|
||||
}, [loadUtilization]);
|
||||
useKeybinding('settings:retry', () => {
|
||||
void loadUtilization();
|
||||
}, {
|
||||
context: 'Settings',
|
||||
isActive: !!error && !isLoading
|
||||
});
|
||||
void loadUtilization()
|
||||
}, [loadUtilization])
|
||||
|
||||
useKeybinding(
|
||||
'settings:retry',
|
||||
() => {
|
||||
void loadUtilization()
|
||||
},
|
||||
{ context: 'Settings', isActive: !!error && !isLoading },
|
||||
)
|
||||
|
||||
if (error) {
|
||||
return <Box flexDirection="column" gap={1}>
|
||||
return (
|
||||
<Box flexDirection="column" gap={1}>
|
||||
<Text color="error">Error: {error}</Text>
|
||||
<Text dimColor>
|
||||
<Byline>
|
||||
<ConfigurableShortcutHint action="settings:retry" context="Settings" fallback="r" description="retry" />
|
||||
<ConfigurableShortcutHint action="confirm:no" context="Settings" fallback="Esc" description="cancel" />
|
||||
<ConfigurableShortcutHint
|
||||
action="settings:retry"
|
||||
context="Settings"
|
||||
fallback="r"
|
||||
description="retry"
|
||||
/>
|
||||
<ConfigurableShortcutHint
|
||||
action="confirm:no"
|
||||
context="Settings"
|
||||
fallback="Esc"
|
||||
description="cancel"
|
||||
/>
|
||||
</Byline>
|
||||
</Text>
|
||||
</Box>;
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
if (!utilization) {
|
||||
return <Box flexDirection="column" gap={1}>
|
||||
return (
|
||||
<Box flexDirection="column" gap={1}>
|
||||
<Text dimColor>Loading usage data…</Text>
|
||||
<Text dimColor>
|
||||
<ConfigurableShortcutHint action="confirm:no" context="Settings" fallback="Esc" description="cancel" />
|
||||
<ConfigurableShortcutHint
|
||||
action="confirm:no"
|
||||
context="Settings"
|
||||
fallback="Esc"
|
||||
description="cancel"
|
||||
/>
|
||||
</Text>
|
||||
</Box>;
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
// Only Max and Team plans have a Sonnet limit that differs from the weekly
|
||||
// limit (see rateLimitMessages.ts). For other plans the bar is redundant.
|
||||
// Show for null (unknown plan) to stay consistent with rateLimitMessages.ts,
|
||||
// which labels it "Sonnet limit" in that case.
|
||||
const subscriptionType = getSubscriptionType();
|
||||
const showSonnetBar = subscriptionType === 'max' || subscriptionType === 'team' || subscriptionType === null;
|
||||
const limits = [{
|
||||
title: 'Current session',
|
||||
limit: utilization.five_hour
|
||||
}, {
|
||||
title: 'Current week (all models)',
|
||||
limit: utilization.seven_day
|
||||
}, ...(showSonnetBar ? [{
|
||||
title: 'Current week (Sonnet only)',
|
||||
limit: utilization.seven_day_sonnet
|
||||
}] : [])];
|
||||
return <Box flexDirection="column" gap={1} width="100%">
|
||||
{limits.some(({
|
||||
limit
|
||||
}) => limit) || <Text dimColor>/usage is only available for subscription plans.</Text>}
|
||||
const subscriptionType = getSubscriptionType()
|
||||
const showSonnetBar =
|
||||
subscriptionType === 'max' ||
|
||||
subscriptionType === 'team' ||
|
||||
subscriptionType === null
|
||||
|
||||
{limits.map(({
|
||||
title,
|
||||
limit: limit_0
|
||||
}) => limit_0 && <LimitBar key={title} title={title} limit={limit_0} maxWidth={maxWidth} />)}
|
||||
const limits = [
|
||||
{
|
||||
title: 'Current session',
|
||||
limit: utilization.five_hour,
|
||||
},
|
||||
{
|
||||
title: 'Current week (all models)',
|
||||
limit: utilization.seven_day,
|
||||
},
|
||||
...(showSonnetBar
|
||||
? [
|
||||
{
|
||||
title: 'Current week (Sonnet only)',
|
||||
limit: utilization.seven_day_sonnet,
|
||||
},
|
||||
]
|
||||
: []),
|
||||
]
|
||||
|
||||
{utilization.extra_usage && <ExtraUsageSection extraUsage={utilization.extra_usage} maxWidth={maxWidth} />}
|
||||
return (
|
||||
<Box flexDirection="column" gap={1} width="100%">
|
||||
{limits.some(({ limit }) => limit) || (
|
||||
<Text dimColor>/usage is only available for subscription plans.</Text>
|
||||
)}
|
||||
|
||||
{isEligibleForOverageCreditGrant() && <OverageCreditUpsell maxWidth={maxWidth} />}
|
||||
{limits.map(
|
||||
({ title, limit }) =>
|
||||
limit && (
|
||||
<LimitBar
|
||||
key={title}
|
||||
title={title}
|
||||
limit={limit}
|
||||
maxWidth={maxWidth}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
|
||||
{utilization.extra_usage && (
|
||||
<ExtraUsageSection
|
||||
extraUsage={utilization.extra_usage}
|
||||
maxWidth={maxWidth}
|
||||
/>
|
||||
)}
|
||||
|
||||
{isEligibleForOverageCreditGrant() && (
|
||||
<OverageCreditUpsell maxWidth={maxWidth} />
|
||||
)}
|
||||
|
||||
<Text dimColor>
|
||||
<ConfigurableShortcutHint action="confirm:no" context="Settings" fallback="Esc" description="cancel" />
|
||||
<ConfigurableShortcutHint
|
||||
action="confirm:no"
|
||||
context="Settings"
|
||||
fallback="Esc"
|
||||
description="cancel"
|
||||
/>
|
||||
</Text>
|
||||
</Box>;
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
type ExtraUsageSectionProps = {
|
||||
extraUsage: ExtraUsage;
|
||||
maxWidth: number;
|
||||
};
|
||||
const EXTRA_USAGE_SECTION_TITLE = 'Extra usage';
|
||||
function ExtraUsageSection(t0) {
|
||||
const $ = _c(20);
|
||||
const {
|
||||
extraUsage,
|
||||
maxWidth
|
||||
} = t0;
|
||||
const subscriptionType = getSubscriptionType();
|
||||
const isProOrMax = subscriptionType === "pro" || subscriptionType === "max";
|
||||
extraUsage: ExtraUsage
|
||||
maxWidth: number
|
||||
}
|
||||
|
||||
const EXTRA_USAGE_SECTION_TITLE = 'Extra usage'
|
||||
|
||||
function ExtraUsageSection({
|
||||
extraUsage,
|
||||
maxWidth,
|
||||
}: ExtraUsageSectionProps): React.ReactNode {
|
||||
const subscriptionType = getSubscriptionType()
|
||||
const isProOrMax = subscriptionType === 'pro' || subscriptionType === 'max'
|
||||
if (!isProOrMax) {
|
||||
return false;
|
||||
// Only show to Pro and Max, consistent with claude.ai non-admin usage settings
|
||||
return false
|
||||
}
|
||||
|
||||
if (!extraUsage.is_enabled) {
|
||||
if (extraUsageCommand.isEnabled()) {
|
||||
let t1;
|
||||
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
|
||||
t1 = <Box flexDirection="column"><Text bold={true}>{EXTRA_USAGE_SECTION_TITLE}</Text><Text dimColor={true}>Extra usage not enabled · /extra-usage to enable</Text></Box>;
|
||||
$[0] = t1;
|
||||
} else {
|
||||
t1 = $[0];
|
||||
}
|
||||
return t1;
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
<Text bold>{EXTRA_USAGE_SECTION_TITLE}</Text>
|
||||
<Text dimColor>Extra usage not enabled · /extra-usage to enable</Text>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
return null;
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
if (extraUsage.monthly_limit === null) {
|
||||
let t1;
|
||||
if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
|
||||
t1 = <Box flexDirection="column"><Text bold={true}>{EXTRA_USAGE_SECTION_TITLE}</Text><Text dimColor={true}>Unlimited</Text></Box>;
|
||||
$[1] = t1;
|
||||
} else {
|
||||
t1 = $[1];
|
||||
}
|
||||
return t1;
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
<Text bold>{EXTRA_USAGE_SECTION_TITLE}</Text>
|
||||
<Text dimColor>Unlimited</Text>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
if (typeof extraUsage.used_credits !== "number" || typeof extraUsage.utilization !== "number") {
|
||||
return null;
|
||||
|
||||
if (
|
||||
typeof extraUsage.used_credits !== 'number' ||
|
||||
typeof extraUsage.utilization !== 'number'
|
||||
) {
|
||||
return null
|
||||
}
|
||||
const t1 = extraUsage.used_credits / 100;
|
||||
let t2;
|
||||
if ($[2] !== t1) {
|
||||
t2 = formatCost(t1, 2);
|
||||
$[2] = t1;
|
||||
$[3] = t2;
|
||||
} else {
|
||||
t2 = $[3];
|
||||
}
|
||||
const formattedUsedCredits = t2;
|
||||
const t3 = extraUsage.monthly_limit / 100;
|
||||
let t4;
|
||||
if ($[4] !== t3) {
|
||||
t4 = formatCost(t3, 2);
|
||||
$[4] = t3;
|
||||
$[5] = t4;
|
||||
} else {
|
||||
t4 = $[5];
|
||||
}
|
||||
const formattedMonthlyLimit = t4;
|
||||
let T0;
|
||||
let t5;
|
||||
let t6;
|
||||
let t7;
|
||||
if ($[6] !== extraUsage.utilization) {
|
||||
const now = new Date();
|
||||
const oneMonthReset = new Date(now.getFullYear(), now.getMonth() + 1, 1);
|
||||
T0 = LimitBar;
|
||||
t7 = EXTRA_USAGE_SECTION_TITLE;
|
||||
t5 = extraUsage.utilization;
|
||||
t6 = oneMonthReset.toISOString();
|
||||
$[6] = extraUsage.utilization;
|
||||
$[7] = T0;
|
||||
$[8] = t5;
|
||||
$[9] = t6;
|
||||
$[10] = t7;
|
||||
} else {
|
||||
T0 = $[7];
|
||||
t5 = $[8];
|
||||
t6 = $[9];
|
||||
t7 = $[10];
|
||||
}
|
||||
let t8;
|
||||
if ($[11] !== t5 || $[12] !== t6) {
|
||||
t8 = {
|
||||
utilization: t5,
|
||||
resets_at: t6
|
||||
};
|
||||
$[11] = t5;
|
||||
$[12] = t6;
|
||||
$[13] = t8;
|
||||
} else {
|
||||
t8 = $[13];
|
||||
}
|
||||
const t9 = `${formattedUsedCredits} / ${formattedMonthlyLimit} spent`;
|
||||
let t10;
|
||||
if ($[14] !== T0 || $[15] !== maxWidth || $[16] !== t7 || $[17] !== t8 || $[18] !== t9) {
|
||||
t10 = <T0 title={t7} limit={t8} showTimeInReset={false} extraSubtext={t9} maxWidth={maxWidth} />;
|
||||
$[14] = T0;
|
||||
$[15] = maxWidth;
|
||||
$[16] = t7;
|
||||
$[17] = t8;
|
||||
$[18] = t9;
|
||||
$[19] = t10;
|
||||
} else {
|
||||
t10 = $[19];
|
||||
}
|
||||
return t10;
|
||||
|
||||
const formattedUsedCredits = formatCost(extraUsage.used_credits / 100, 2)
|
||||
const formattedMonthlyLimit = formatCost(extraUsage.monthly_limit / 100, 2)
|
||||
const now = new Date()
|
||||
const oneMonthReset = new Date(now.getFullYear(), now.getMonth() + 1, 1)
|
||||
|
||||
return (
|
||||
<LimitBar
|
||||
title={EXTRA_USAGE_SECTION_TITLE}
|
||||
limit={{
|
||||
utilization: extraUsage.utilization,
|
||||
// Not applicable for enterprises, but for now we don't render this for them
|
||||
resets_at: oneMonthReset.toISOString(),
|
||||
}}
|
||||
showTimeInReset={false}
|
||||
extraSubtext={`${formattedUsedCredits} / ${formattedMonthlyLimit} spent`}
|
||||
maxWidth={maxWidth}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user