salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): move context usage pills to right drawer header

Browse Source
This commit is contained in:
Shantur Rathore
2026-02-06 10:34:44 +00:00
parent e2ff758003
commit 6f73adaef6
2 changed files with 41 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
packages/ui/src/components/instance/instance-shell2.tsx
View File

@@ -923,7 +923,6 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
<Show when={activeSessionForInstance()}>
{(activeSession) => (
<>
<ContextUsagePanel instanceId={props.instance.id} sessionId={activeSession().id} />
<div class="session-sidebar-controls px-4 py-4 border-t border-base flex flex-col gap-3">
<AgentSelector
instanceId={props.instance.id}
@@ -1091,35 +1090,46 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
return (
<div class="flex flex-col h-full" ref={setRightDrawerContentEl}>
<div class="relative flex items-center px-4 py-2 border-b border-base text-primary">
<div class="flex items-center gap-2">
<Show when={rightDrawerState() === "floating-open"}>
<IconButton
size="small"
color="inherit"
aria-label={t("instanceShell.rightDrawer.toggle.close")}
title={t("instanceShell.rightDrawer.toggle.close")}
onClick={closeRightDrawer}
>
<MenuOpenIcon fontSize="small" sx={{ transform: "scaleX(-1)" }} />
</IconButton>
</Show>
<Show when={!isPhoneLayout()}>
<IconButton
size="small"
color="inherit"
aria-label={rightPinned() ? t("instanceShell.rightDrawer.unpin") : t("instanceShell.rightDrawer.pin")}
onClick={() => (rightPinned() ? unpinRightDrawer() : pinRightDrawer())}
>
{rightPinned() ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
</IconButton>
</Show>
</div>
<div class="pointer-events-none absolute inset-0 flex items-center justify-center">
<Typography variant="subtitle2" class="uppercase tracking-wide text-xs font-semibold text-primary">
{t("instanceShell.rightPanel.title")}
</Typography>
<div class="border-b border-base text-primary">
<div class="relative flex items-center px-4 py-2">
<div class="flex items-center gap-2">
<Show when={rightDrawerState() === "floating-open"}>
<IconButton
size="small"
color="inherit"
aria-label={t("instanceShell.rightDrawer.toggle.close")}
title={t("instanceShell.rightDrawer.toggle.close")}
onClick={closeRightDrawer}
>
<MenuOpenIcon fontSize="small" sx={{ transform: "scaleX(-1)" }} />
</IconButton>
</Show>
<Show when={!isPhoneLayout()}>
<IconButton
size="small"
color="inherit"
aria-label={rightPinned() ? t("instanceShell.rightDrawer.unpin") : t("instanceShell.rightDrawer.pin")}
onClick={() => (rightPinned() ? unpinRightDrawer() : pinRightDrawer())}
>
{rightPinned() ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
</IconButton>
</Show>
</div>
<div class="pointer-events-none absolute inset-0 flex items-center justify-center">
<span class="session-sidebar-title text-sm font-semibold uppercase text-primary">
{t("instanceShell.rightPanel.title")}
</span>
</div>
</div>
<Show when={activeSessionForInstance()}>
{(activeSession) => (
<ContextUsagePanel
instanceId={props.instance.id}
sessionId={activeSession().id}
class="border-t border-base"
/>
)}
</Show>
</div>
<div class="flex-1 overflow-y-auto">
<Accordion.Root

26
packages/ui/src/components/session/context-usage-panel.tsx
View File

@@ -6,11 +6,11 @@ import { useI18n } from "../../lib/i18n"
interface ContextUsagePanelProps {
instanceId: string
sessionId: string
class?: string
}
const chipClass = "inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary"
const chipLabelClass = "uppercase text-[10px] tracking-wide text-muted"
const headingClass = "text-xs font-semibold text-muted uppercase tracking-wide"
const ContextUsagePanel: Component<ContextUsagePanelProps> = (props) => {
const { t } = useI18n()
@@ -31,26 +31,16 @@ const ContextUsagePanel: Component<ContextUsagePanelProps> = (props) => {
const inputTokens = createMemo(() => info().inputTokens ?? 0)
const outputTokens = createMemo(() => info().outputTokens ?? 0)
const actualUsageTokens = createMemo(() => info().actualUsageTokens ?? 0)
const availableTokens = createMemo(() => info().contextAvailableTokens)
const outputLimit = createMemo(() => info().modelOutputLimit ?? 0)
const costValue = createMemo(() => {
const value = info().isSubscriptionModel ? 0 : info().cost
return value > 0 ? value : 0
})
const formatTokenValue = (value: number | null | undefined) => {
if (value === null || value === undefined) return t("contextUsagePanel.unavailable")
return formatTokenTotal(value)
}
const costDisplay = createMemo(() => `$${costValue().toFixed(2)}`)
return (
<div class="session-context-panel border-r border-base border-b px-3 py-3 space-y-3">
<div class={`session-context-panel px-4 py-2 ${props.class ?? ""}`}>
<div class="flex flex-wrap items-center gap-2 text-xs text-primary">
<div class={headingClass}>{t("contextUsagePanel.headings.tokens")}</div>
<div class={chipClass}>
<span class={chipLabelClass}>{t("contextUsagePanel.labels.input")}</span>
<span class="font-semibold text-primary">{formatTokenTotal(inputTokens())}</span>
@@ -64,18 +54,6 @@ const ContextUsagePanel: Component<ContextUsagePanelProps> = (props) => {
<span class="font-semibold text-primary">{costDisplay()}</span>
</div>
</div>
<div class="flex flex-wrap items-center gap-2 text-xs text-primary">
<div class={headingClass}>{t("contextUsagePanel.headings.context")}</div>
<div class={chipClass}>
<span class={chipLabelClass}>{t("contextUsagePanel.labels.used")}</span>
<span class="font-semibold text-primary">{formatTokenTotal(actualUsageTokens())}</span>
</div>
<div class={chipClass}>
<span class={chipLabelClass}>{t("contextUsagePanel.labels.available")}</span>
<span class="font-semibold text-primary">{formatTokenValue(availableTokens())}</span>
</div>
</div>
</div>
)
}