diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index e92b6676..5c09f786 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -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
diff --git a/packages/ui/src/components/session/context-usage-panel.tsx b/packages/ui/src/components/session/context-usage-panel.tsx
index d0fb64b4..ee5e419d 100644
--- a/packages/ui/src/components/session/context-usage-panel.tsx
+++ b/packages/ui/src/components/session/context-usage-panel.tsx
@@ -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>
   )
 }