feat: tabbed Admin header with drilled Analytics + one standing-context editor

app/src/components/about-me/about-me-view.tsx

@@ -1,8 +1,7 @@
-import { Spinner } from "@houston-ai/core";
 import { useTranslation } from "react-i18next";
-import { InstructionsContent } from "../agent/job-description-parts";
-import { useContextSlot, useContextSlotLabels } from "../context/context-slots";
-import { PageContainer, PageHero } from "../shell/page-shell";
+import { ContextEditorPage } from "../context/context-editor";
+import { useContextSlot } from "../context/context-slots";
+import { PageContainer } from "../shell/page-shell";
 
 /**
  * About me: what every agent knows about the PERSON before it starts a turn.
@@ -29,23 +28,18 @@ import { PageContainer, PageHero } from "../shell/page-shell";
 export function AboutMeView() {
   const { t } = useTranslation("context");
   const editor = useContextSlot("user");
-  const labels = useContextSlotLabels("user");
 
   return (
     <div className="flex-1 overflow-y-auto [scrollbar-gutter:stable]">
-      <PageContainer className="flex flex-col gap-6 py-10">
-        <PageHero title={t("aboutMe.title")} subtitle={t("aboutMe.subtitle")} />
-        {editor.ready ? (
-          <InstructionsContent
-            content={editor.content}
-            onSave={editor.onSave}
-            labels={labels}
-          />
-        ) : (
-          <div className="flex items-center justify-center py-16">
-            <Spinner className="h-5 w-5" />
-          </div>
-        )}
+      <PageContainer className="py-10">
+        <ContextEditorPage
+          title={t("aboutMe.title")}
+          subtitle={t("aboutMe.subtitle")}
+          ready={editor.ready}
+          content={editor.content}
+          onSave={editor.onSave}
+          placeholder={t("editor.user.placeholder")}
+        />
       </PageContainer>
     </div>
   );

app/src/components/agent-settings/agent-settings-section.tsx

@@ -11,10 +11,10 @@ import type {
 import { AgentSettingsPeople } from "./agent-settings-people.tsx";
 
 /**
- * The access bodies (people, apps, models) are deliberately flush (`w-full`) so
- * the mounting surface owns their width. This gives them the SAME column the
- * self-padded bodies (job description, learnings) bring — `max-w-3xl px-6` on
- * one `pt-2` top rhythm — so nothing shifts as the rail switches sections.
+ * The flush bodies (job description, people, apps, models) deliberately own no
+ * width of their own, so the mounting surface does. This gives them the SAME
+ * column the one self-padded body (learnings) brings — `max-w-3xl px-6` on one
+ * `pt-2` top rhythm — so nothing shifts as the rail switches sections.
  */
 function AccessColumn({ children }: { children: ReactNode }) {
   return (
@@ -34,7 +34,11 @@ export function AgentSettingsSectionView({
 }: AgentSectionProps & { section: AgentSettingsSection }) {
   switch (section) {
     case "job-description":
-      return <AgentAdminInstructions agent={agent} readOnly={readOnly} />;
+      return (
+        <AccessColumn>
+          <AgentAdminInstructions agent={agent} readOnly={readOnly} />
+        </AccessColumn>
+      );
     case "learnings":
       return <AgentAdminKnowledge agent={agent} readOnly={readOnly} />;
     case "people":

app/src/components/agent/agent-admin/agent-admin-instructions.tsx

@@ -1,22 +1,43 @@
+import { Spinner } from "@houston-ai/core";
+import { useTranslation } from "react-i18next";
 import { useInstructions, useSaveInstructions } from "../../../hooks/queries";
 import type { AgentSectionProps } from "../../agent-settings/agent-settings-nav.ts";
-import { InstructionsContent } from "../job-description-parts";
+import { ContextEditorBox } from "../../context/context-editor";
 
-/** Instructions (CLAUDE.md) section. Read-only for non-managers. */
+/**
+ * Instructions (CLAUDE.md) section, drawn with the ONE standing-prose box
+ * (`ContextEditorBox`: always open, saves on blur). No heading of its own —
+ * the settings rail row already says "Job description", and no sibling
+ * section titles itself either — just the one-line helper over the box
+ * (explain ONCE). Read-only for non-managers: the same face, locked, so they
+ * still read what the agent is told.
+ */
 export function AgentAdminInstructions({
   agent,
   readOnly = false,
 }: AgentSectionProps) {
+  const { t } = useTranslation("agents");
   const path = agent.folderPath;
   const { data: instructions } = useInstructions(path);
   const saveInstructions = useSaveInstructions(path);
   return (
-    <InstructionsContent
-      content={instructions ?? ""}
-      readOnly={readOnly}
-      onSave={(c) =>
-        saveInstructions.mutateAsync({ name: "CLAUDE.md", content: c })
-      }
-    />
+    <div>
+      <p className="mb-3 text-sm text-ink-muted">{t("instructions.helper")}</p>
+      {instructions === undefined ? (
+        <div className="flex items-center justify-center py-16">
+          <Spinner className="h-5 w-5" />
+        </div>
+      ) : (
+        <ContextEditorBox
+          content={instructions}
+          readOnly={readOnly}
+          onSave={(c) =>
+            saveInstructions.mutateAsync({ name: "CLAUDE.md", content: c })
+          }
+          placeholder={t("instructions.placeholder")}
+          ariaLabel={t("subTabs.instructions")}
+        />
+      )}
+    </div>
   );
 }