diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css
index 68f43ac7da4..e1b9cfc382b 100644
--- a/ui/src/styles/components.css
+++ b/ui/src/styles/components.css
@@ -3380,6 +3380,203 @@ td.data-table-key-col {
   gap: 8px;
 }
 
+.md-preview-dialog {
+  width: min(980px, calc(100vw - 32px));
+  max-width: none;
+  max-height: min(88vh, 960px);
+  padding: 0;
+  border: none;
+  border-radius: calc(var(--radius-xl) + 4px);
+  background: transparent;
+  color: inherit;
+  overflow: hidden;
+}
+
+.md-preview-dialog::backdrop {
+  background: rgba(5, 8, 15, 0.72);
+  backdrop-filter: blur(10px);
+}
+
+.md-preview-dialog__panel {
+  display: flex;
+  flex-direction: column;
+  min-height: min(70vh, 720px);
+  max-height: min(88vh, 960px);
+  border: 1px solid var(--border-strong);
+  border-radius: calc(var(--radius-xl) + 4px);
+  background: color-mix(in srgb, var(--panel) 92%, black 8%);
+  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
+  overflow: hidden;
+}
+
+.md-preview-dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--border);
+  background: color-mix(in srgb, var(--panel) 88%, black 12%);
+}
+
+.md-preview-dialog__title {
+  min-width: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.md-preview-dialog__body {
+  flex: 1;
+  overflow: auto;
+  padding: clamp(20px, 3vw, 32px);
+}
+
+.md-preview-dialog__body.sidebar-markdown {
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--text);
+}
+
+.md-preview-dialog__body.sidebar-markdown > * {
+  width: min(100%, 92ch);
+  max-width: 100%;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.md-preview-dialog__body.sidebar-markdown > :first-child {
+  margin-top: 0;
+}
+
+.md-preview-dialog__body.sidebar-markdown > :last-child {
+  margin-bottom: 0;
+}
+
+.md-preview-dialog__body.sidebar-markdown :is(h1, h2, h3, h4, h5, h6) {
+  margin: 0 0 0.9em;
+  line-height: 1.18;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--text);
+}
+
+.md-preview-dialog__body.sidebar-markdown h1 {
+  font-size: clamp(2rem, 4vw, 2.6rem);
+}
+
+.md-preview-dialog__body.sidebar-markdown h2 {
+  margin-top: 2.2rem;
+  padding-top: 1.2rem;
+  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
+  border-top: 1px solid var(--border);
+}
+
+.md-preview-dialog__body.sidebar-markdown h3 {
+  margin-top: 1.8rem;
+  font-size: clamp(1.16rem, 1.8vw, 1.35rem);
+}
+
+.md-preview-dialog__body.sidebar-markdown :is(p, ul, ol, blockquote, pre, table, hr) {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+.md-preview-dialog__body.sidebar-markdown :is(ul, ol) {
+  padding-left: 1.1rem;
+}
+
+.md-preview-dialog__body.sidebar-markdown :is(ul ul, ul ol, ol ul, ol ol) {
+  margin-top: 0.45rem;
+  margin-bottom: 0.45rem;
+  padding-left: 0.95rem;
+}
+
+.md-preview-dialog__body.sidebar-markdown li {
+  padding-left: 0.1rem;
+}
+
+.md-preview-dialog__body.sidebar-markdown li + li {
+  margin-top: 0.35rem;
+}
+
+.md-preview-dialog__body.sidebar-markdown blockquote {
+  padding: 0.85rem 1rem;
+  border-left: 3px solid var(--accent);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  background: color-mix(in srgb, var(--secondary) 60%, transparent);
+  color: var(--text-soft, var(--text));
+}
+
+.md-preview-dialog__body.sidebar-markdown pre {
+  padding: 14px 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: color-mix(in srgb, var(--bg-elevated) 84%, black 16%);
+}
+
+.md-preview-dialog__body.sidebar-markdown :not(pre) > code {
+  padding: 0.16rem 0.42rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--secondary) 62%, transparent);
+  font-size: 0.92em;
+}
+
+.md-preview-dialog__body.sidebar-markdown hr {
+  border: 0;
+  border-top: 1px solid var(--border);
+}
+
+.md-preview-dialog__body.sidebar-markdown table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+}
+
+.md-preview-dialog__body.sidebar-markdown :is(th, td) {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+  text-align: left;
+  vertical-align: top;
+}
+
+.md-preview-dialog__body.sidebar-markdown th {
+  background: color-mix(in srgb, var(--secondary) 56%, transparent);
+  font-weight: 600;
+}
+
+.md-preview-dialog__body.sidebar-markdown tr:last-child td {
+  border-bottom: none;
+}
+
+@media (max-width: 720px) {
+  .md-preview-dialog {
+    width: min(calc(100vw - 12px), 100vw);
+    max-height: calc(100vh - 12px);
+  }
+
+  .md-preview-dialog__panel {
+    min-height: calc(100vh - 12px);
+    max-height: calc(100vh - 12px);
+    border-radius: var(--radius-xl);
+  }
+
+  .md-preview-dialog__header {
+    padding: 12px 14px;
+  }
+
+  .md-preview-dialog__body {
+    padding: 16px;
+  }
+}
+
 .agent-tools-meta {
   display: grid;
   gap: 12px;
diff --git a/ui/src/styles/layout.css b/ui/src/styles/layout.css
index 0993ba5a311..d67843456e0 100644
--- a/ui/src/styles/layout.css
+++ b/ui/src/styles/layout.css
@@ -374,7 +374,7 @@
 }
 
 .sidebar-shell__footer {
-  padding: 12px 8px 0;
+  padding: 12px 0 0;
   border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
 }
 
diff --git a/ui/src/styles/usage.css b/ui/src/styles/usage.css
index 03b03065e23..95b043c4d96 100644
--- a/ui/src/styles/usage.css
+++ b/ui/src/styles/usage.css
@@ -58,6 +58,7 @@
 .usage-header {
   position: relative;
   overflow: visible;
+  z-index: 2;
 }
 
 .usage-header.pinned {
@@ -351,7 +352,6 @@ details.usage-filter-select summary::-webkit-details-marker,
 .usage-filter-popover,
 .usage-export-popover {
   position: absolute;
-  right: 0;
   top: calc(100% + 8px);
   width: min(320px, calc(100vw - 48px));
   padding: 12px;
@@ -363,7 +363,12 @@ details.usage-filter-select summary::-webkit-details-marker,
   z-index: 12;
 }
 
+.usage-filter-popover {
+  left: 0;
+}
+
 .usage-export-popover {
+  right: 0;
   width: 220px;
 }
 
diff --git a/ui/src/ui/views/agents-panels-status-files.ts b/ui/src/ui/views/agents-panels-status-files.ts
index bff74f0523b..f1be9715df0 100644
--- a/ui/src/ui/views/agents-panels-status-files.ts
+++ b/ui/src/ui/views/agents-panels-status-files.ts
@@ -18,9 +18,14 @@ import type {
   CronStatus,
 } from "../types.ts";
 import { formatBytes, type AgentContext } from "./agents-utils.ts";
+import type { AgentsPanel } from "./agents.ts";
 import { resolveChannelExtras as resolveChannelExtrasFromConfig } from "./channel-config-extras.ts";
 
-function renderAgentContextCard(context: AgentContext, subtitle: string) {
+function renderAgentContextCard(
+  context: AgentContext,
+  subtitle: string,
+  onSelectPanel: (panel: AgentsPanel) => void,
+) {
   return html`
     <section class="card">
       <div class="card-title">Agent Context</div>
@@ -28,7 +33,14 @@ function renderAgentContextCard(context: AgentContext, subtitle: string) {
       <div class="agents-overview-grid" style="margin-top: 16px;">
         <div class="agent-kv">
           <div class="label">Workspace</div>
-          <div class="mono">${context.workspace}</div>
+          <div>
+            <button
+              type="button"
+              class="workspace-link mono"
+              @click=${() => onSelectPanel("files")}
+              title="Open Files tab"
+            >${context.workspace}</button>
+          </div>
         </div>
         <div class="agent-kv">
           <div class="label">Primary Model</div>
@@ -140,6 +152,7 @@ export function renderAgentChannels(params: {
   error: string | null;
   lastSuccess: number | null;
   onRefresh: () => void;
+  onSelectPanel: (panel: AgentsPanel) => void;
 }) {
   const entries = resolveChannelEntries(params.snapshot);
   const lastSuccessLabel = params.lastSuccess
@@ -147,7 +160,7 @@ export function renderAgentChannels(params: {
     : "never";
   return html`
     <section class="grid grid-cols-2">
-      ${renderAgentContextCard(params.context, "Workspace, identity, and model configuration.")}
+      ${renderAgentContextCard(params.context, "Workspace, identity, and model configuration.", params.onSelectPanel)}
       <section class="card">
         <div class="row" style="justify-content: space-between;">
           <div>
@@ -247,11 +260,12 @@ export function renderAgentCron(params: {
   error: string | null;
   onRefresh: () => void;
   onRunNow: (jobId: string) => void;
+  onSelectPanel: (panel: AgentsPanel) => void;
 }) {
   const jobs = params.jobs.filter((job) => job.agentId === params.agentId);
   return html`
     <section class="grid grid-cols-2">
-      ${renderAgentContextCard(params.context, "Workspace and scheduling targets.")}
+      ${renderAgentContextCard(params.context, "Workspace and scheduling targets.", params.onSelectPanel)}
       <section class="card">
         <div class="row" style="justify-content: space-between;">
           <div>
diff --git a/ui/src/ui/views/agents.ts b/ui/src/ui/views/agents.ts
index 4e8b9a065ba..eeb33b8b82c 100644
--- a/ui/src/ui/views/agents.ts
+++ b/ui/src/ui/views/agents.ts
@@ -318,6 +318,7 @@ export function renderAgents(props: AgentsProps) {
                         error: props.channels.error,
                         lastSuccess: props.channels.lastSuccess,
                         onRefresh: props.onChannelsRefresh,
+                        onSelectPanel: props.onSelectPanel,
                       })
                     : nothing
                 }
@@ -338,6 +339,7 @@ export function renderAgents(props: AgentsProps) {
                         error: props.cron.error,
                         onRefresh: props.onCronRefresh,
                         onRunNow: props.onCronRunNow,
+                        onSelectPanel: props.onSelectPanel,
                       })
                     : nothing
                 }
diff --git a/ui/src/ui/views/config.ts b/ui/src/ui/views/config.ts
index fd60c4a5d41..5351c88581a 100644
--- a/ui/src/ui/views/config.ts
+++ b/ui/src/ui/views/config.ts
@@ -422,7 +422,7 @@ const SECTION_CATEGORIES: SectionCategory[] = [
     id: "appearance",
     label: "Appearance",
     sections: [
-      { key: "__appearance__", label: "Appearance" },
+      { key: "__appearance__", label: "Theme" },
       { key: "ui", label: "UI" },
       { key: "wizard", label: "Setup Wizard" },
     ],