.streamlit/config.toml

@@ -1,15 +1,15 @@
 # Dashboard-only Streamlit settings (doctor dashboard + demo console).
 [theme]
 base = "light"
-primaryColor = "#2A78D6"
+primaryColor = "#285E4E"
-backgroundColor = "#F6F7F9"
+backgroundColor = "#F6F7F3"
 secondaryBackgroundColor = "#FFFFFF"
-textColor = "#1B1F24"
+textColor = "#213B38"
-borderColor = "#E3E6EA"
+borderColor = "#E1E7E3"
 baseRadius = "medium"
 # Falls back to the system sans-serif when offline (ADR-004).
-font = "Inter:https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap, sans-serif"
+font = "sans-serif"
-headingFontWeights = 700
+headingFontWeights = 600
 
 [client]
 toolbarMode = "minimal"

dashboard/components/patient_card.py

@@ -42,7 +42,10 @@ def dose_strip_html(grid: h.DoseGrid, start: date | None) -> str:
         f'<span><i style="border:1.5px dashed var(--grey)"></i>ожидается · {c["pending"]}</span>'
         "</div>"
     )
-    return f'<div class="mt-doses" style="grid-template-columns:{cols}">{"".join(cells)}</div>{legend}'
+    return (
+        f'<div class="mt-dose-scroll"><div class="mt-doses" style="grid-template-columns:{cols}">'
+        f"{''.join(cells)}</div></div>{legend}"
+    )
 
 
 def _tile(label: str, value: str, hint: str = "", tone: str = "blue") -> str:
@@ -181,7 +184,7 @@ def render(card: PatientCard, today: date | None) -> None:
 
     main, side = st.columns([1.75, 1], gap="large")
     with main:
-        with st.container(border=True):
+        with st.container(border=True, key="panel-scales"):
             c1, c2 = st.columns(2)
             for col, scale_id, title in ((c1, "phq9", "PHQ-9"), (c2, "pcl5", "PCL-5")):
                 fig = charts.scale_figure(card.series, scale_id, title, start)
@@ -191,22 +194,22 @@ def render(card: PatientCard, today: date | None) -> None:
                     else:
                         st.plotly_chart(fig, config=theme.PLOTLY_CONFIG, key=f"chart-{scale_id}")
             st.caption("◇ — внеплановое заполнение (по триггеру правил). Полосы — градации тяжести из config/scales.")
-        with st.container(border=True):
+        with st.container(border=True, key="panel-wellbeing"):
             fig = charts.wellbeing_figure(card.series, start)
             if fig is None:
                 st.caption("Ежедневных чек-инов пока нет")
             else:
                 st.plotly_chart(fig, config=theme.PLOTLY_CONFIG, key="chart-wellbeing")
                 st.caption("Красная зона настроения ≤ 3 (3 дня → внеплановый PHQ-9); пунктир — сон 4 ч.")
-        with st.container(border=True):
+        with st.container(border=True, key="panel-doses"):
             st.html('<div class="mt-panel-title">Календарь приёма</div>')
             st.html(dose_strip_html(grid, start))
     with side:
-        with st.container(border=True):
+        with st.container(border=True, key="panel-alerts"):
             _alerts_feed(card.alerts, today)
-        with st.container(border=True):
+        with st.container(border=True, key="panel-summary"):
             _summary(card.summary)
-        with st.container(border=True):
+        with st.container(border=True, key="panel-safety"):
             _safety_plan(card.safety_plan)
-        with st.container(border=True):
+        with st.container(border=True, key="panel-prescriptions"):
             _prescriptions(card)

dashboard/console/playback_ui.py

@@ -51,7 +51,7 @@ def render_playback_panel(persona: dict[str, Any]) -> None:
     token = persona["token"]
     scenario, source = w.scenario_for(persona)
     state = w.playback_state(token)
-    st.subheader("🎬 Сценарий демо")
+    st.subheader("Сценарий демо")
     _scenario_source_controls(persona, source)
     if scenario.errors:
         with st.expander(f"⚠️ Замечания к сценарию: {len(scenario.errors)}", expanded=not scenario.days):

dashboard/console/widgets.py

@@ -368,10 +368,9 @@ def render_doctor_panel(highlight_token: str | None, *, key: str = "doc") -> Non
     ]
     for a in fresh_acute[:1]:
         st.markdown(
-            "<div style='background:#c62828;color:#fff;padding:18px 20px;border-radius:12px;"
+            "<div class='mt-banner t-red mt-console-alert'><div>"
-            "font-size:1.35rem;font-weight:700;margin-bottom:8px'>"
             f"🚨 ОСТРЫЙ АЛЕРТ · {_escape(a.get('patient_name', ''))} · {_fmt_ts(a.get('ts'))}<br>"
-            f"<span style='font-size:1.05rem;font-weight:500'>{_escape(a.get('reason', ''))}</span></div>",
+            f"<div class='mt-sub'>{_escape(a.get('reason', ''))}</div></div></div>",
             unsafe_allow_html=True,
         )
         c1, c2 = st.columns(2)

dashboard/pages/1b_Подключить_пациента.py

@@ -68,7 +68,7 @@ def _reset() -> None:
 
 def _result(res: ConnectPatientOut, name: str) -> None:
     link = h.absolute_link(res.deep_link, os.environ.get("DASHBOARD_PUBLIC_URL", "http://localhost:8501"))
-    with st.container(border=True):
+    with st.container(border=True, key="panel-connect-result"):
         st.html(
             f'<div class="mt-kicker">Пациент подключён · {escape(name)}</div>'
             '<div class="mt-sub" style="margin:4px 0 10px">Покажите QR пациенту или продиктуйте код — бот спросит '
@@ -108,7 +108,7 @@ def main() -> None:
     st.button("Заполнить демо-данными (Андрей)", icon=":material/auto_fix_high:", on_click=_fill_demo, args=(today,))
 
     left, right = st.columns(2, gap="large")
-    with left, st.container(border=True):
+    with left, st.container(border=True, key="panel-connect-person"):
         st.html('<div class="mt-panel-title">Пациент</div>')
         st.text_input("Имя и инициал фамилии", key="cp_name", placeholder="Андрей С.", help="Без полного ФИО")
         a, b = st.columns(2)
@@ -128,7 +128,7 @@ def main() -> None:
             key="cp_modules",
             format_func=lambda m: h.MODULE_LABELS[m],
         )
-    with right, st.container(border=True):
+    with right, st.container(border=True, key="panel-connect-prescription"):
         st.html('<div class="mt-panel-title">Назначение</div>')
         d1, d2 = st.columns([1.4, 1])
         with d1:

dashboard/pages/2_Демо-консоль.py

@@ -14,21 +14,31 @@ sys.path.insert(0, str(Path(__file__).resolve().parents[1]))
 from console import widgets as w  # noqa: E402
 from console.playback_ui import render_playback_panel  # noqa: E402
 
+from dashboard import theme  # noqa: E402
+from dashboard.components import ui  # noqa: E402
+
 st.set_page_config(page_title="Демо-консоль", page_icon="🎬", layout="wide")
 
+st.html(theme.CSS)
+st.html(
+    ui.page_header(
+        "Демо-консоль",
+        "Чат пациента и сценарий сопровождения. Прототип на синтетических данных.",
+        kicker="Демонстрация",
+    )
+)
+
 persona = w.select_persona()
 w.render_connect_hero()
 w.show_flash()
 st.sidebar.caption(f"API: {w.get_api().base_url}")
 
-st.title("Демо-консоль")
+with st.container(border=True, key="panel-console-clock"):
-st.caption("Прототип на синтетических данных. Время — виртуальные демо-часы (ADR-005).")
+    w.render_clock_bar(persona, key="console-clock")
-w.render_clock_bar(persona, key="console-clock")
-st.divider()
 
 chat_col, play_col = st.columns([1.05, 1], gap="large")
-with chat_col:
+with chat_col, st.container(border=True, key="panel-console-chat"):
-    st.subheader(f"💬 Чат пациента — {persona.get('display_name') or persona['token']}")
+    st.subheader(f"Чат пациента — {persona.get('display_name') or persona['token']}")
     w.render_chat(persona["token"], height=560, key="console-chat")
-with play_col:
+with play_col, st.container(border=True, key="panel-console-scenario"):
     render_playback_panel(persona)

dashboard/pages/3_Сплит-экран.py

@@ -15,12 +15,12 @@ sys.path.insert(0, str(Path(__file__).resolve().parents[1]))
 
 from console import widgets as w  # noqa: E402
 
+from dashboard import theme  # noqa: E402
+from dashboard.components import ui  # noqa: E402
+
 st.set_page_config(page_title="Сплит-экран", page_icon="🖥️", layout="wide", initial_sidebar_state="collapsed")
-st.markdown(
+st.html(theme.CSS)
-    "<style>.block-container{padding-top:1.2rem;max-width:100%} "
+st.html(ui.page_header("Сплит-экран", "Пациент и врач: сопровождение в реальном времени.", kicker="Демонстрация"))
-    "[data-testid='stMarkdownContainer'] p, [data-testid='stMarkdownContainer'] li{font-size:1.08rem}</style>",
-    unsafe_allow_html=True,
-)
 
 persona = w.select_persona()
 w.show_flash()
@@ -44,15 +44,15 @@ if clicked and nxt is not None:
     st.rerun()
 
 left, right = st.columns([1.1, 1], gap="large")
-with left:
+with left, st.container(border=True, key="panel-split-patient"):
     url = w.patient_web_url()
     if url:
-        st.markdown(f"#### 📱 Пациент — {persona.get('display_name') or token}")
+        st.markdown(f"#### Пациент — {persona.get('display_name') or token}")
         st.iframe(url, height=760)
         st.caption(f"Веб-приложение пациента: {url}")
     else:
-        st.markdown(f"#### 💬 Пациент — {persona.get('display_name') or token}")
+        st.markdown(f"#### Пациент — {persona.get('display_name') or token}")
         w.render_chat(token, height=600, key="split-chat")
-with right:
+with right, st.container(border=True, key="panel-split-doctor"):
-    st.markdown("#### 🩺 Кабинет врача — д-р Смирнова Е. А.")
+    st.markdown("#### Кабинет врача — д-р Смирнова Е. А.")
     w.polled_doctor_panel(token, key="split-doc")

dashboard/theme.py

@@ -138,8 +138,8 @@ div[class*="st-key-prow-"] {{ border-top:1px solid var(--line); padding:18px 0 4
 .mt-empty p {{ font-size:.85rem; margin:8px 0 0; }}
 
 /* ---------- chips, badges, bars ---------- */
-.mt-chip {{ display:inline-block; font-size:.72rem; padding: 1px 8px; border-radius: 999px; margin-right: 4px;
+.mt-chip {{ display:inline-block; font-size:.72rem; padding: 1px 8px; border-radius: 5px; margin-right: 4px;
-  background: var(--blue-tint); color: var(--blue-ink); font-weight: 500; }}
+  background: #edf3ee; color: #38634b; font-weight: 500; }}
 .mt-badge {{ display:inline-flex; align-items:center; gap:6px; font-size:.7rem; font-weight:550; padding: 5px 8px;
   border-radius: 5px; white-space: normal; }}
 .mt-badge.t-red {{ background: var(--red-tint); color: var(--red-ink); }}
@@ -166,7 +166,7 @@ div[class*="st-key-prow-"] {{ border-top:1px solid var(--line); padding:18px 0 4
 .mt-banner b {{ color: inherit; }}
 .mt-pulse {{ width: 12px; height: 12px; border-radius: 50%; background: var(--red); margin-top: 5px; flex: none;
   box-shadow: 0 0 0 4px #faeeee; }}
-.mt-panel-title {{ font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 650;
+.mt-panel-title {{ font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 550;
   color: var(--ink-3); margin: 2px 0 8px; }}
 .mt-alert {{ border-left: 4px solid var(--grey); padding: 4px 0 4px 12px; }}
 .mt-alert.t-red {{ border-left-color: var(--red); }}
@@ -175,9 +175,9 @@ div[class*="st-key-prow-"] {{ border-top:1px solid var(--line); padding:18px 0 4
 .mt-alert .when {{ color: var(--ink-3); font-size: .78rem; }}
 .mt-alert .why {{ color: var(--ink); font-weight: 600; font-size: .92rem; margin: 2px 0; }}
 .mt-alert.acked .why {{ color: var(--ink-3); font-weight: 500; }}
-.mt-summary {{ background: var(--blue-tint); border-radius: 12px; padding: 14px 16px; color: var(--ink);
+.mt-summary {{ background: #f4f6f2; border:1px solid var(--line); border-radius: 12px; padding: 14px 16px;
-  line-height: 1.5; font-size: .93rem; }}
+  color: var(--ink); line-height: 1.5; font-size: .93rem; }}
-.mt-summary .disc {{ color: var(--blue-ink); font-size: .76rem; margin-top: 8px; }}
+.mt-summary .disc {{ color: var(--ink-2); font-size: .76rem; margin-top: 8px; }}
 .mt-plan ol {{ margin: 0; padding-left: 1.2rem; }}
 .mt-plan li {{ margin: 3px 0; color: var(--ink); font-size: .9rem; }}
 
@@ -195,6 +195,21 @@ div[class*="st-key-prow-"] {{ border-top:1px solid var(--line); padding:18px 0 4
 .mt-legend i {{ display:inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px;
   vertical-align: -1px; }}
 
+/* ---------- internal pages ---------- */
+div[class*="st-key-panel-"] {{ background:var(--surface); border:1px solid var(--line); border-radius:12px;
+  padding:20px; }}
+[data-testid="stExpander"] {{ background:var(--surface); border-color:var(--line); border-radius:12px; }}
+[data-testid="stChatMessage"] {{ background:#f4f6f2; border:1px solid var(--line); border-radius:12px; }}
+[data-testid="stChatInput"] {{ background:var(--surface); border:1px solid var(--line); border-radius:8px; }}
+[data-testid="stNumberInputContainer"], [data-testid="stDateInput"] input {{
+  background:var(--surface); color:var(--ink); border-color:var(--line); border-radius:8px; }}
+[data-testid="stApp"] [data-variant="pills"][data-selected] {{ background:#edf3ee; color:#285e4e;
+  border-color:#b4c6ba; }}
+.mt-console-alert {{ font-size:1.1rem; font-weight:600; }}
+.mt-console-alert .mt-sub {{ color:var(--red-ink); font-weight:400; }}
+.mt-dose-scroll {{ overflow-x:auto; padding-bottom:4px; }}
+.mt-doses {{ min-width:max-content; }}
+
 /* ---------- connect result ---------- */
 .mt-code {{ font-size: 2.4rem; font-weight: 700; letter-spacing: .12em; color: var(--ink);
   font-variant-numeric: tabular-nums; }}
@@ -222,6 +237,8 @@ div[class*="st-key-prow-"] {{ border-top:1px solid var(--line); padding:18px 0 4
   .mt-mobile-label {{ display:block; color:var(--ink-3); font-size:.68rem; margin-bottom:5px; }}
   .mt-row-details {{ grid-template-columns:1fr; gap:12px; }}
   .mt-list-footer {{ flex-wrap:wrap; }}
+  .mt-head .mt-side {{ text-align:left; }}
+  div[class*="st-key-panel-"] {{ padding:16px; }}
   .mt-tip:hover::after, .mt-tip:focus-visible::after {{ display:none; }}
 }}
 @media (prefers-reduced-motion: reduce) {{

web/public/favicon.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="#0a4da2"/><path d="M13 7h6v6h6v6h-6v6h-6v-6H7v-6h6z" fill="#fff"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="9" fill="#285e4e"/><path d="M16 8v16M8 16h16" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>

web/src/components/AppShell.tsx

@@ -3,13 +3,14 @@ import { Link, NavLink } from "react-router-dom";
 
 import { ru } from "../content/ru";
 import { useDialog } from "../dialog/DialogContext";
+import { useSession } from "../session/SessionContext";
 import { HotlineCard, useHelp } from "./HelpSheet";
 import { Icon, LogoMark, type IconName } from "./Icon";
 
 /*
- * Layout from docs/mock (series 2).
+ * Shared patient workspace, following the approved doctor dashboard.
  *  phone:   content → «Экстренная помощь» block → bottom tab bar (signed in)
- *  desktop: navy sidebar | content | right rail (optional `aside` + emergency panel)
+ *  desktop: white sidebar | workspace header | content + emergency panel
  *  bare:    one centred column on every width (questionnaires)
  */
 
@@ -87,6 +88,10 @@ function Sidebar({ signedIn }: { signedIn: boolean }) {
           </li>
         </ul>
       )}
+      <div className="sidebar__note">
+        <strong>{ru.product.supportTitle}</strong>
+        <span>{ru.product.supportText}</span>
+      </div>
     </nav>
   );
 }
@@ -122,6 +127,24 @@ function Rail({ aside }: { aside?: ReactNode }) {
   );
 }
 
+function WorkspaceHeader({ signedIn, bare = false }: { signedIn: boolean; bare?: boolean }) {
+  const { session } = useSession();
+  return (
+    <header className={`workspace${bare ? " workspace--bare" : ""}`}>
+      <div className="workspace__brand">
+        <LogoMark size={30} />
+        <span>{bare ? ru.product.name : signedIn ? ru.product.workspace : ru.nav.signIn}</span>
+      </div>
+      {signedIn && !bare ? (
+        <Link className="workspace__profile" to="/profile">
+          <span className="avatar"><Icon name="user" size={18} /></span>
+          <span>{session?.displayName || ru.nav.profile}</span>
+        </Link>
+      ) : <span className="workspace__tag">{ru.product.tagline}</span>}
+    </header>
+  );
+}
+
 export function AppShell({
   children,
   signedIn = true,
@@ -144,6 +167,7 @@ export function AppShell({
     return (
       <div className="app app--bare">
         <div className="app__main">
+          <WorkspaceHeader signedIn={signedIn} bare />
           <main className="screen" id="main">
             {children}
             {sos && <EmergencyBlock />}
@@ -155,6 +179,7 @@ export function AppShell({
     <div className={`app${signedIn && !focus ? " app--tabs" : ""}`}>
       <Sidebar signedIn={signedIn} />
       <div className="app__main">
+        <WorkspaceHeader signedIn={signedIn} />
         <main className="screen" id="main">
           {children}
           {sos && <EmergencyBlock />}

web/src/components/Icon.tsx

@@ -163,8 +163,8 @@ export function Icon({ name, size = 22, label }: { name: IconName; size?: number
 export function LogoMark({ size = 32 }: { size?: number }) {
   return (
     <svg width={size} height={size} viewBox="0 0 32 32" aria-hidden="true" focusable="false">
-      <rect width="32" height="32" rx="9" fill="var(--c-teal)" />
+      <rect width="32" height="32" rx="9" fill="var(--c-primary)" />
-      <path d="M13 7h6v6h6v6h-6v6h-6v-6H7v-6h6z" fill="#fff" />
+      <path d="M16 8v16M8 16h16" stroke="#fff" strokeWidth="2" strokeLinecap="round" />
     </svg>
   );
 }

web/src/content/ru.ts

@@ -6,6 +6,9 @@ export const ru = {
   product: {
     name: "Сопровождение пациента",
     tagline: "между визитами к врачу",
+    workspace: "Личный кабинет",
+    supportTitle: "Рядом между визитами",
+    supportText: "Наблюдение за самочувствием и поддержка назначенного лечения.",
   },
   nav: {
     today: "Сегодня",

web/src/main.tsx

@@ -1,7 +1,3 @@
-import "@fontsource/golos-text/400.css";
-import "@fontsource/golos-text/500.css";
-import "@fontsource/golos-text/600.css";
-import "@fontsource/golos-text/700.css";
 import "./theme/tokens.css";
 import "./theme/global.css";
 

web/src/theme/tokens.css

@@ -1,45 +1,45 @@
 /*
- * Design tokens — single source of colours, type and spacing (docs/mock, series 2).
+ * Shared visual language with dashboard/theme.py and the approved doctor workspace.
  * Capacitor wraps this same bundle; a React Native port maps these 1:1 to a theme object.
  */
 :root {
   /* Ink & surfaces */
-  --c-navy: #0f2747; /* primary buttons, headings, desktop sidebar */
+  --c-primary: #285e4e; /* primary buttons and active navigation */
-  --c-navy-hover: #0a1d37;
+  --c-primary-hover: #204b3e;
-  --c-navy-soft: #e8eef6;
+  --c-primary-soft: #edf3ee;
-  --c-text: #13294b;
+  --c-text: #213b38;
-  --c-text-2: #4d5d73;
+  --c-text-2: #526660;
-  --c-text-3: #7a889b;
+  --c-text-3: #63736f;
-  --c-page: #ffffff;
+  --c-page: #f6f7f3;
-  --c-page-desk: #f4f7fb; /* desktop canvas behind white panels */
+  --c-page-desk: #f6f7f3; /* desktop canvas behind white panels */
   --c-surface: #ffffff;
-  --c-tile: #f3f7fb; /* soft card fill */
+  --c-tile: #f4f6f2; /* soft card fill */
-  --c-border: #e2e9f1;
+  --c-border: #e1e7e3;
-  --c-border-strong: #c9d4e1;
+  --c-border-strong: #b4c6ba;
 
-  /* Selection & positive: teal */
+  /* Selection & positive */
-  --c-teal: #17a08f;
+  --c-teal: #527f61;
-  --c-teal-strong: #0e7e71;
+  --c-teal-strong: #38634b;
-  --c-teal-soft: #e3f5f2;
+  --c-teal-soft: #eef4ee;
 
-  /* Info: blue */
+  /* Informational surfaces */
-  --c-blue: #2f7fdb;
+  --c-blue: #38634b;
-  --c-blue-soft: #eaf3fd;
+  --c-blue-soft: #edf3ee;
 
   /* Help & crisis: red */
-  --c-red: #e2383b;
+  --c-red: #a83236;
-  --c-red-strong: #c62b2e;
+  --c-red-strong: #a83236;
-  --c-red-soft: #fdeded;
+  --c-red-soft: #faeeee;
-  --c-red-line: #f7d3d3;
+  --c-red-line: #e7cbcb;
 
   /* Warning */
-  --c-amber: #e69a12;
+  --c-amber: #805714;
-  --c-amber-soft: #fff4dd;
+  --c-amber-soft: #fbf3e4;
 
-  --c-focus: #2f7fdb;
+  --c-focus: #598d7a;
 
-  /* Type: Golos Text (OFL), bundled locally — works offline. */
+  /* Same offline system stack as the doctor workspace. */
-  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
   --fs-12: 0.75rem;
   --fs-13: 0.8125rem;
   --fs-14: 0.875rem;
@@ -63,14 +63,14 @@
   --s-12: 48px;
 
   /* Radii: tiles > buttons > chips */
-  --r-tile: 16px;
+  --r-tile: 12px;
-  --r-btn: 12px;
+  --r-btn: 8px;
-  --r-chip: 999px;
+  --r-chip: 5px;
 
   --tap: 52px;
   --nav-h: 64px;
-  --sidebar-w: 232px;
+  --sidebar-w: 228px;
-  --rail-w: 300px;
+  --rail-w: 264px;
 
   --safe-top: env(safe-area-inset-top, 0px);
   --safe-bottom: env(safe-area-inset-bottom, 0px);