feat: finally a halfway working prototype

config/config.exs

@@ -13,8 +13,8 @@ config :bds, BDS.Application, desktop_adapter: :desktop
 
 config :bds, :desktop,
   port: 4010,
-  window_size: {1440, 900},
+  window_size: {1280, 780},
-  window_min_size: {1100, 700},
+  window_min_size: {800, 600},
   title: "Blogging Desktop Server",
   secret_key_base: "bds_desktop_shell_secret_key_base_64_chars_minimum_seed_value_001"
 

lib/bds/application.ex

@@ -48,18 +48,16 @@ defmodule BDS.Application do
     if desktop_automation?() do
       []
     else
+      window_opts =
+        BDS.Desktop.MainWindow.window_options(
+          menubar: BDS.Desktop.MenuBar,
+          icon_menu: BDS.Desktop.Menu,
+          url: &BDS.Desktop.url/0
+        )
+
       [
-        {Desktop.Window,
+        {Desktop.Window, window_opts},
-         [
+        Supervisor.child_spec({BDS.Desktop.MainWindow, []}, id: BDS.Desktop.MainWindow.Watcher)
-           app: :bds,
-           id: BDS.Desktop.MainWindow,
-           title: Application.get_env(:bds, :desktop)[:title] || "Blogging Desktop Server",
-           size: Application.get_env(:bds, :desktop)[:window_size] || {1440, 900},
-           min_size: Application.get_env(:bds, :desktop)[:window_min_size] || {1100, 700},
-           menubar: BDS.Desktop.MenuBar,
-           icon_menu: BDS.Desktop.Menu,
-           url: &BDS.Desktop.url/0
-         ]}
       ]
     end
   end

lib/bds/desktop/main_window.ex

@@ -1,3 +1,224 @@
 defmodule BDS.Desktop.MainWindow do
   @moduledoc false
+
+  use GenServer
+
+  alias Desktop.Window
+
+  @window_id __MODULE__
+  @persist_interval_ms 1_000
+  @default_size {1280, 780}
+  @default_min_size {800, 600}
+  @state_file "window-state.json"
+
+  def start_link(_opts) do
+    GenServer.start_link(__MODULE__, :ok)
+  end
+
+  def window_id, do: @window_id
+
+  def window_options(extra_opts \\ []) do
+    desktop_config = Application.get_env(:bds, :desktop, [])
+    restored = restore_bounds()
+    {default_width, default_height} = Keyword.get(desktop_config, :window_size, @default_size)
+    {min_width, min_height} = Keyword.get(desktop_config, :window_min_size, @default_min_size)
+    startup_bounds = clamp_startup_bounds(restored || %{width: default_width, height: default_height})
+
+    base_opts = [
+      app: :bds,
+      id: window_id(),
+      title: Keyword.get(desktop_config, :title, "Blogging Desktop Server"),
+      size: {startup_bounds.width, startup_bounds.height},
+      min_size: {min_width, min_height}
+    ]
+
+    Keyword.merge(base_opts, extra_opts)
+  end
+
+  def restore_bounds do
+    with path when is_binary(path) <- window_state_path(),
+         true <- File.exists?(path),
+         {:ok, body} <- File.read(path),
+         {:ok, decoded} <- Jason.decode(body),
+         {:ok, bounds} <- normalize_bounds(decoded) do
+      clamp_startup_bounds(bounds)
+    else
+      _ -> nil
+    end
+  end
+
+  def persist_bounds(%{x: _x, y: _y, width: _width, height: _height} = bounds) do
+    path = window_state_path()
+    File.mkdir_p!(Path.dirname(path))
+    File.write(path, Jason.encode!(bounds))
+  end
+
+  @impl true
+  def init(:ok) do
+    Process.flag(:trap_exit, true)
+    send(self(), :attach_window)
+    {:ok, %{frame: nil, last_bounds: restore_bounds()}}
+  end
+
+  @impl true
+  def handle_info(:attach_window, state) do
+    case lookup_frame() do
+      nil ->
+        Process.send_after(self(), :attach_window, 200)
+        {:noreply, state}
+
+      frame ->
+        apply_restored_bounds(frame)
+        schedule_persist()
+        {:noreply, %{state | frame: frame, last_bounds: current_bounds(frame) || state.last_bounds}}
+    end
+  end
+
+  def handle_info(:persist_bounds, %{frame: frame} = state) do
+    next_bounds = current_bounds(frame) || state.last_bounds
+
+    if next_bounds && next_bounds != state.last_bounds do
+      :ok = persist_bounds(next_bounds)
+    end
+
+    schedule_persist()
+    {:noreply, %{state | last_bounds: next_bounds}}
+  end
+
+  @impl true
+  def terminate(_reason, %{frame: frame, last_bounds: last_bounds}) do
+    if bounds = current_bounds(frame) || last_bounds do
+      _ = persist_bounds(bounds)
+    end
+
+    :ok
+  end
+
+  defp schedule_persist do
+    Process.send_after(self(), :persist_bounds, @persist_interval_ms)
+  end
+
+  defp apply_restored_bounds(frame) do
+    case restore_bounds() do
+      %{x: x, y: y, width: width, height: height} ->
+        with_wx_env(fn ->
+          :wxWindow.setSize(frame, {width, height})
+          :wxWindow.move(frame, {x, y})
+        end)
+
+      _ ->
+        :ok
+    end
+  end
+
+  defp lookup_frame do
+    try do
+      Window.frame(window_id())
+    catch
+      :exit, _ -> nil
+    end
+  end
+
+  defp current_bounds(nil), do: nil
+
+  defp current_bounds(frame) do
+    with_wx_env(fn ->
+      cond do
+        not :wxWindow.isShown(frame) -> nil
+        :wxTopLevelWindow.isFullScreen(frame) -> nil
+        :wxTopLevelWindow.isMaximized(frame) -> nil
+        true ->
+          {x, y} = :wxWindow.getPosition(frame)
+          {width, height} = :wxWindow.getSize(frame)
+          %{x: x, y: y, width: width, height: height}
+      end
+    end)
+  end
+
+  defp with_wx_env(fun) do
+    :wx.set_env(Desktop.Env.wx_env())
+    fun.()
+  end
+
+  defp window_state_path do
+    desktop_config = Application.get_env(:bds, :desktop, [])
+
+    Keyword.get_lazy(desktop_config, :window_state_path, fn ->
+      Path.join(config_dir(), @state_file)
+    end)
+  end
+
+  defp config_dir do
+    case :filename.basedir(:user_config, "bds") do
+      path when is_list(path) -> List.to_string(path)
+      path -> path
+    end
+  end
+
+  defp normalize_bounds(%{"x" => x, "y" => y, "width" => width, "height" => height}) do
+    normalize_bounds(%{x: x, y: y, width: width, height: height})
+  end
+
+  defp normalize_bounds(%{x: x, y: y, width: width, height: height})
+       when is_integer(x) and is_integer(y) and is_integer(width) and is_integer(height) and width > 0 and height > 0 do
+    {:ok, %{x: x, y: y, width: width, height: height}}
+  end
+
+  defp normalize_bounds(_value), do: :error
+
+  defp clamp_startup_bounds(bounds) do
+    case client_area() do
+      %{width: area_width, height: area_height} ->
+        %{bounds | width: min(bounds.width, area_width), height: min(bounds.height, area_height)}
+
+      nil ->
+        bounds
+    end
+  end
+
+  defp client_area do
+    desktop_config = Application.get_env(:bds, :desktop, [])
+
+    case Keyword.get(desktop_config, :window_client_area_override) do
+      {x, y, width, height} when is_integer(x) and is_integer(y) and is_integer(width) and is_integer(height) ->
+        %{x: x, y: y, width: width, height: height}
+
+      _ ->
+        read_client_area_from_wx()
+    end
+  end
+
+  defp read_client_area_from_wx do
+    created_wx? = wx_env_undefined?()
+
+    try do
+      if created_wx?, do: :wx.new()
+
+      display = :wxDisplay.new()
+
+      if :wxDisplay.isOk(display) do
+        {x, y, width, height} = :wxDisplay.getClientArea(display)
+        :wxDisplay.destroy(display)
+        %{x: x, y: y, width: width, height: height}
+      else
+        :wxDisplay.destroy(display)
+        nil
+      end
+    rescue
+      _ -> nil
+    after
+      if created_wx?, do: :wx.destroy()
+    end
+  end
+
+  defp wx_env_undefined? do
+    try do
+      case :wx.get_env() do
+        :undefined -> true
+        _ -> false
+      end
+    rescue
+      ErlangError -> true
+    end
+  end
 end

lib/bds/desktop/menu.ex

@@ -22,7 +22,7 @@ defmodule BDS.Desktop.Menu do
 
   @impl true
   def handle_event("open", menu) do
-    Window.show(BDS.Desktop.MainWindow)
+    Window.show(BDS.Desktop.MainWindow.window_id())
     {:noreply, menu}
   end
 

lib/bds/ui/shell_page.ex

@@ -48,7 +48,7 @@ defmodule BDS.UI.ShellPage do
   end
 
   defp bootstrap do
-    workbench = Workbench.new(panel_visible: true, assistant_sidebar_visible: true)
+    workbench = Workbench.new()
 
     %{
       title: Application.get_env(:bds, :desktop)[:title] || "Blogging Desktop Server",

priv/ui/app.css

@@ -1,20 +1,35 @@
 :root {
-  --bg: #11161d;
+  --vscode-editor-background: #1e1e1e;
-  --panel: #171d25;
+  --vscode-sideBar-background: #252526;
-  --panel-2: #1d2530;
+  --vscode-activityBar-background: #333333;
-  --panel-3: #202a36;
+  --vscode-panel-background: #1e1e1e;
-  --ink: #edf2f7;
+  --vscode-titleBar-activeBackground: #252526;
-  --muted: #95a2b3;
+  --vscode-titleBar-activeForeground: #cccccc;
-  --line: rgba(173, 189, 204, 0.14);
+  --vscode-statusBar-background: #007acc;
-  --accent: #4fb3ff;
+  --vscode-statusBar-foreground: #ffffff;
-  --accent-soft: rgba(79, 179, 255, 0.16);
+  --vscode-tab-activeBackground: #1e1e1e;
-  --success: #6ecb8b;
+  --vscode-tab-inactiveBackground: #2d2d2d;
-  --status: #10151b;
+  --vscode-tab-activeForeground: #ffffff;
-  --shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
+  --vscode-tab-inactiveForeground: #969696;
+  --vscode-editorGroupHeader-tabsBackground: #252526;
+  --vscode-editorGroupHeader-tabsBorder: #1e1e1e;
+  --vscode-toolbar-hoverBackground: rgba(90, 93, 94, 0.31);
+  --vscode-toolbar-activeBackground: rgba(99, 102, 103, 0.31);
+  --vscode-foreground: #cccccc;
+  --vscode-descriptionForeground: #858585;
+  --vscode-panel-border: #80808059;
+  --vscode-sideBar-border: #80808059;
+  --vscode-tab-border: #252526;
+  --vscode-focusBorder: #007fd4;
+  --vscode-list-hoverBackground: #2a2d2e;
+  --vscode-list-activeSelectionBackground: #094771;
+  --vscode-list-activeSelectionForeground: #ffffff;
+  --vscode-activityBarBadge-background: #007acc;
+  --vscode-activityBarBadge-foreground: #ffffff;
   --sidebar-width: 280px;
   --assistant-width: 360px;
   color-scheme: dark;
-  font-family: "Avenir Next", "Segoe UI", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
 * {
@@ -26,15 +41,13 @@ body {
   margin: 0;
   width: 100%;
   height: 100%;
-  background:
+  background: var(--vscode-editor-background);
-    radial-gradient(circle at top left, rgba(79, 179, 255, 0.12), transparent 26%),
+  color: var(--vscode-foreground);
-    radial-gradient(circle at bottom right, rgba(110, 203, 139, 0.12), transparent 24%),
-    linear-gradient(180deg, #0b1016 0%, #121922 100%);
-  color: var(--ink);
 }
 
 body {
   overflow: hidden;
+  user-select: none;
 }
 
 button {
@@ -46,118 +59,249 @@ button {
   height: 100%;
   display: flex;
   flex-direction: column;
-  background: rgba(17, 22, 29, 0.96);
+  background-color: var(--vscode-editor-background);
+}
+
+.app-main {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.app-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
 }
 
 .window-titlebar {
-  height: 38px;
+  position: relative;
+  height: 34px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent), var(--panel);
+  background-color: var(--vscode-editorGroupHeader-tabsBackground);
-  border-bottom: 1px solid var(--line);
+  border-bottom: 1px solid var(--vscode-editorGroupHeader-tabsBorder);
-  -webkit-app-region: drag;
+  flex-shrink: 0;
   app-region: drag;
+  -webkit-app-region: drag;
+  padding-right: 10px;
 }
 
-.window-titlebar-menu-bar,
+.window-titlebar-menu-bar {
-.window-titlebar-actions {
   display: flex;
   align-items: center;
-  gap: 6px;
+  height: 100%;
-  padding: 0 10px;
+  margin-left: 6px;
-  -webkit-app-region: no-drag;
+  gap: 2px;
   app-region: no-drag;
+  -webkit-app-region: no-drag;
+  z-index: 2;
+}
+
+.window-titlebar-menu-button {
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: var(--vscode-titleBar-activeForeground);
+  padding: 0 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.window-titlebar-menu-button:hover,
+.window-titlebar-action-button:hover {
+  background-color: var(--vscode-toolbar-hoverBackground);
+}
+
+.window-titlebar-drag-region {
+  flex: 1;
+  height: 100%;
 }
 
 .window-titlebar-title {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  font-size: 12px;
+  max-width: 45%;
-  letter-spacing: 0.04em;
+  height: 100%;
-  color: var(--muted);
-}
-
-.window-titlebar-menu-button,
-.window-titlebar-action-button,
-.panel-tab,
-.tab,
-.sidebar-item,
-.activity-bar-item {
-  border: none;
-  cursor: pointer;
-}
-
-.window-titlebar-menu-button,
-.window-titlebar-action-button {
-  min-height: 26px;
-  padding: 0 10px;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--muted);
-}
-
-.window-titlebar-menu-button:hover,
-.window-titlebar-action-button:hover {
-  background: rgba(255, 255, 255, 0.06);
-  color: var(--ink);
-}
-
-.app-main {
-  flex: 1;
   display: flex;
-  min-height: 0;
+  align-items: center;
+  justify-content: center;
+  color: var(--vscode-titleBar-activeForeground);
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
+  pointer-events: none;
+}
+
+.window-titlebar-actions {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin-right: 6px;
+  app-region: no-drag;
+  -webkit-app-region: no-drag;
+}
+
+.window-titlebar-action-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  line-height: 0;
+  background: transparent;
+  border: none;
+  color: var(--vscode-foreground);
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.window-titlebar-sidebar-icon,
+.window-titlebar-panel-icon,
+.window-titlebar-assistant-icon {
+  width: 14px;
+  height: 14px;
+  border: 1.5px solid currentColor;
+  border-radius: 2px;
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+
+.window-titlebar-sidebar-icon::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 33.3333%;
+  width: 1.5px;
+  transform: translateX(-50%);
+  background-color: currentColor;
+}
+
+.window-titlebar-panel-icon::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 66.6667%;
+  height: 1.5px;
+  transform: translateY(-50%);
+  background-color: currentColor;
+}
+
+.window-titlebar-assistant-icon::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 66.6667%;
+  width: 1.5px;
+  transform: translateX(-50%);
+  background-color: currentColor;
+}
+
+.window-titlebar-sidebar-pane,
+.window-titlebar-panel-pane,
+.window-titlebar-assistant-pane {
+  position: absolute;
+  background-color: currentColor;
+  transition: opacity 120ms ease;
+}
+
+.window-titlebar-sidebar-pane {
+  left: 0;
+  top: 0;
+  width: 33.3333%;
+  height: 100%;
+}
+
+.window-titlebar-panel-pane {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 33.3333%;
+}
+
+.window-titlebar-assistant-pane {
+  right: 0;
+  top: 0;
+  width: 33.3333%;
+  height: 100%;
+}
+
+.window-titlebar-sidebar-icon.is-inactive .window-titlebar-sidebar-pane,
+.window-titlebar-panel-icon.is-inactive .window-titlebar-panel-pane,
+.window-titlebar-assistant-icon.is-inactive .window-titlebar-assistant-pane {
+  opacity: 0;
 }
 
 .activity-bar {
-  width: 56px;
+  width: 48px;
+  height: 100%;
+  background-color: var(--vscode-activityBar-background);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  background: #0d1319;
+  border-right: 1px solid var(--vscode-panel-border);
-  border-right: 1px solid var(--line);
 }
 
-.activity-bar-group {
+.activity-bar-top,
+.activity-bar-bottom {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 8px 0;
+  padding: 4px 0;
-  gap: 4px;
 }
 
 .activity-bar-item {
-  width: 42px;
+  width: 48px;
-  height: 42px;
+  height: 48px;
-  display: grid;
+  display: flex;
-  place-items: center;
+  align-items: center;
+  justify-content: center;
   background: transparent;
-  color: var(--muted);
+  border: none;
-  border-radius: 12px;
+  color: var(--vscode-titleBar-activeForeground);
+  opacity: 0.6;
+  cursor: pointer;
   position: relative;
+  padding: 0;
+  border-radius: 0;
+}
+
+.activity-bar-item:hover {
+  opacity: 1;
 }
 
-.activity-bar-item:hover,
 .activity-bar-item.active {
-  color: var(--ink);
+  opacity: 1;
-  background: rgba(255, 255, 255, 0.06);
 }
 
 .activity-bar-item.active::before {
   content: "";
   position: absolute;
-  left: -7px;
+  left: 0;
-  top: 8px;
+  top: 0;
-  bottom: 8px;
+  bottom: 0;
-  width: 3px;
+  width: 2px;
-  border-radius: 999px;
+  background-color: var(--vscode-titleBar-activeForeground);
-  background: var(--accent);
 }
 
-.activity-bar-glyph {
+.activity-bar-item svg,
-  font-size: 12px;
+.tab-icon svg {
-  font-weight: 700;
+  display: block;
 }
 
 .sidebar-shell,
@@ -174,32 +318,22 @@ button {
   width: var(--assistant-width);
 }
 
-.sidebar,
-.assistant-sidebar,
-.panel-shell,
-.editor-shell {
-  background: var(--panel);
-}
-
 .sidebar,
 .assistant-sidebar {
   width: 100%;
+  height: 100%;
+  background: var(--vscode-sideBar-background);
   display: flex;
   flex-direction: column;
   min-width: 0;
 }
 
 .sidebar {
-  border-right: 1px solid var(--line);
+  border-right: 1px solid var(--vscode-sideBar-border);
 }
 
 .assistant-sidebar {
-  border-left: 1px solid var(--line);
+  border-left: 1px solid var(--vscode-sideBar-border);
-}
-
-.resizable-panel-divider {
-  width: 1px;
-  background: var(--line);
 }
 
 .sidebar-shell.is-hidden,
@@ -213,60 +347,184 @@ button {
   display: none;
 }
 
-.app-content {
+.resizable-panel-divider {
-  flex: 1;
+  width: 4px;
+  cursor: col-resize;
+  background: transparent;
+  position: relative;
+}
+
+.resizable-panel-divider:hover::after {
+  background-color: var(--vscode-focusBorder);
+}
+
+.resizable-panel-divider::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 1px;
+  width: 1px;
+  background-color: var(--vscode-panel-border);
+}
+
+.sidebar-header,
+.assistant-header {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--vscode-panel-border);
+}
+
+.sidebar-title-row,
+.assistant-header {
   display: flex;
   flex-direction: column;
-  min-width: 0;
+  gap: 2px;
+}
+
+.sidebar-subtitle,
+.assistant-card span,
+.panel-entry span,
+.editor-meta-row span,
+.editor-subtitle,
+.sidebar-item span {
+  color: var(--vscode-descriptionForeground);
+}
+
+.sidebar-content,
+.assistant-content {
+  flex: 1;
+  overflow: auto;
+  padding: 8px 0;
+}
+
+.sidebar-section {
+  padding-bottom: 10px;
+}
+
+.sidebar-section-header {
+  padding: 0 12px 6px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--vscode-descriptionForeground);
+}
+
+.sidebar-item {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  padding: 7px 12px;
+  border: none;
+  background: transparent;
+  color: var(--vscode-foreground);
+  cursor: pointer;
+  text-align: left;
+}
+
+.sidebar-item:hover {
+  background: var(--vscode-list-hoverBackground);
+}
+
+.sidebar-item.active {
+  background: var(--vscode-list-activeSelectionBackground);
+  color: var(--vscode-list-activeSelectionForeground);
+}
+
+.sidebar-badge {
+  margin-top: 2px;
+  padding: 1px 6px;
+  border-radius: 10px;
+  font-size: 11px;
+  background: rgba(255, 255, 255, 0.08);
 }
 
 .tab-bar {
-  height: 40px;
   display: flex;
   align-items: center;
-  background: var(--panel-2);
+  background-color: var(--vscode-editorGroupHeader-tabsBackground);
-  border-bottom: 1px solid var(--line);
+  border-bottom: 1px solid var(--vscode-editorGroupHeader-tabsBorder);
-  padding: 0 10px;
+  height: 35px;
+  overflow: hidden;
+  flex-shrink: 0;
+  position: relative;
 }
 
 .tab-bar-tabs {
   display: flex;
-  align-items: stretch;
+  align-items: center;
-  gap: 6px;
+  height: 100%;
   overflow-x: auto;
+  overflow-y: hidden;
+  flex: 1;
+}
+
+.tab-bar-tabs::-webkit-scrollbar {
+  height: 0;
+  display: none;
 }
 
 .tab-bar-empty {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 12px;
+  color: var(--vscode-descriptionForeground);
   font-size: 12px;
-  color: var(--muted);
 }
 
 .tab {
-  min-width: 140px;
-  max-width: 200px;
-  padding: 0 12px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 4px;
-  gap: 10px;
+  padding: 0 10px;
-  background: var(--panel);
+  height: 100%;
-  color: var(--muted);
+  min-width: 100px;
-  border-radius: 10px 10px 0 0;
+  max-width: 180px;
+  cursor: pointer;
+  background-color: var(--vscode-tab-inactiveBackground);
+  border: none;
+  border-right: 1px solid var(--vscode-tab-border);
+  color: var(--vscode-tab-inactiveForeground);
+  font-size: 13px;
+  user-select: none;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.tab:hover {
+  background-color: var(--vscode-list-hoverBackground);
 }
 
 .tab.active {
-  color: var(--ink);
+  background-color: var(--vscode-tab-activeBackground);
-  background: #121922;
+  color: var(--vscode-tab-activeForeground);
-  box-shadow: inset 0 2px 0 var(--accent);
+}
+
+.tab.active::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: var(--vscode-focusBorder);
 }
 
 .tab.transient .tab-title {
   font-style: italic;
 }
 
+.tab-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  opacity: 0.85;
+}
+
 .tab-title,
-.sidebar-item strong,
-.sidebar-item span,
 .status-bar-item {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -274,88 +532,187 @@ button {
 }
 
 .tab-close {
+  margin-left: auto;
   font-size: 11px;
-  color: var(--muted);
+  color: var(--vscode-descriptionForeground);
 }
 
 .editor-shell {
   flex: 1;
   min-height: 0;
-  padding: 22px;
   overflow: auto;
+  background: var(--vscode-editor-background);
 }
 
 .editor-frame {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 280px;
+  grid-template-columns: minmax(0, 1fr) 240px;
-  gap: 20px;
+  gap: 16px;
+  padding: 14px 16px;
 }
 
 .editor-main,
-.editor-meta-card,
+.editor-meta,
-.assistant-card,
+.panel-shell,
-.panel-entry,
+.assistant-card {
-.dashboard-card {
+  min-width: 0;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent), var(--panel-2);
-  border: 1px solid var(--line);
-  border-radius: 18px;
-  box-shadow: var(--shadow);
 }
 
-.editor-main {
+.editor-kicker {
-  padding: 24px;
-}
-
-.editor-kicker,
-.sidebar-eyebrow,
-.sidebar-section-header,
-.assistant-header,
-.panel-header,
-.sidebar-subtitle {
   font-size: 11px;
-  letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--muted);
+  letter-spacing: 0.04em;
+  color: var(--vscode-descriptionForeground);
 }
 
 .editor-title {
-  margin: 10px 0 8px;
+  margin: 10px 0 6px;
-  font-size: 34px;
+  font-size: 24px;
-  line-height: 1.1;
+  font-weight: 600;
 }
 
 .editor-subtitle {
-  margin: 0 0 22px;
+  margin: 0 0 14px;
-  color: var(--muted);
 }
 
-.dashboard-grid {
+.editor-toolbar {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
-  gap: 14px;
+  margin-bottom: 14px;
 }
 
-.dashboard-card {
+.editor-toolbar-button {
-  padding: 18px;
+  border: 1px solid var(--vscode-panel-border);
+  background: transparent;
+  color: var(--vscode-foreground);
+  padding: 4px 8px;
+  border-radius: 3px;
 }
 
-.dashboard-card span,
+.editor-toolbar-button:hover,
-.assistant-card span,
+.panel-tab:hover {
-.panel-entry span,
+  background: var(--vscode-toolbar-hoverBackground);
-.editor-meta-card span,
-.sidebar-item span,
-.sidebar-subtitle {
-  color: var(--muted);
-}
-
-.dashboard-card strong {
-  display: block;
-  margin: 8px 0;
-  font-size: 32px;
 }
 
 .editor-section {
-  margin-top: 22px;
+  padding-top: 4px;
+}
+
+.editor-section h2 {
+  margin: 0 0 8px;
+  font-size: 16px;
+}
+
+.editor-list {
+  margin: 0;
+  padding-left: 18px;
+  line-height: 1.5;
+}
+
+.editor-list.compact li {
+  margin-bottom: 6px;
+}
+
+.editor-meta {
+  border-left: 1px solid var(--vscode-panel-border);
+  padding-left: 16px;
+}
+
+.editor-meta-row {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--vscode-panel-border);
+}
+
+.panel-shell {
+  height: 200px;
+  border-top: 1px solid var(--vscode-panel-border);
+  background: var(--vscode-panel-background);
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-shell.is-hidden {
+  display: none;
+}
+
+.panel-header {
+  height: 35px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--vscode-panel-border);
+}
+
+.panel-tabs {
+  display: flex;
+  align-items: stretch;
+  height: 100%;
+}
+
+.panel-tab {
+  border: none;
+  background: transparent;
+  color: var(--vscode-descriptionForeground);
+  padding: 0 12px;
+  cursor: pointer;
+}
+
+.panel-tab.active {
+  color: var(--vscode-tab-activeForeground);
+}
+
+.panel-content {
+  flex: 1;
+  overflow: auto;
+  padding: 12px 14px;
+}
+
+.panel-entry,
+.assistant-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--vscode-panel-border);
+}
+
+.status-bar {
+  height: 22px;
+  background: var(--vscode-statusBar-background);
+  color: var(--vscode-statusBar-foreground);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.status-bar-left,
+.status-bar-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.status-bar-item.brand {
+  font-weight: 600;
+}
+
+@media (max-width: 960px) {
+  .editor-frame {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .editor-meta {
+    border-left: none;
+    border-top: 1px solid var(--vscode-panel-border);
+    padding-left: 0;
+    padding-top: 10px;
+  }
 }
 
 .editor-section ul {

priv/ui/app.js

@@ -5,9 +5,11 @@ if (!root || !bootstrapNode) {
   throw new Error("Missing shell bootstrap payload");
 }
 
+const SIDEBAR_STORAGE_KEY = "bds-panel-sidebar";
+const ASSISTANT_STORAGE_KEY = "bds-panel-assistant-sidebar";
 const bootstrap = JSON.parse(bootstrapNode.textContent);
 const state = {
-  session: clone(bootstrap.session),
+  session: hydrateSession(clone(bootstrap.session)),
   tabMeta: {},
 };
 
@@ -15,10 +17,7 @@ render();
 
 function render() {
   root.style.setProperty("--sidebar-width", state.session.sidebar_visible ? `${state.session.sidebar_width}px` : "0px");
-  root.style.setProperty(
+  root.style.setProperty("--assistant-width", state.session.assistant_sidebar_visible ? `${state.session.assistant_sidebar_width}px` : "0px");
-    "--assistant-width",
-    state.session.assistant_sidebar_visible ? `${state.session.assistant_sidebar_width}px` : "0px"
-  );
 
   renderTitlebar();
   renderActivityBar();
@@ -39,22 +38,43 @@ function renderTitlebar() {
         .map((group) => `<button class="window-titlebar-menu-button" type="button">${escapeHtml(group.label)}</button>`)
         .join("")}
     </div>
+    <div class="window-titlebar-drag-region"></div>
     <div class="window-titlebar-title" data-testid="window-title">${escapeHtml(bootstrap.title)}</div>
     <div class="window-titlebar-actions">
-      <button class="window-titlebar-action-button" data-command="toggle-sidebar" data-testid="toggle-sidebar" type="button" aria-label="Toggle sidebar">Sidebar</button>
+      ${renderTitlebarAction("toggle-sidebar", "toggle-sidebar", "Toggle sidebar", `
-      <button class="window-titlebar-action-button" data-command="toggle-panel" data-testid="toggle-panel" type="button" aria-label="Toggle panel">Panel</button>
+        <span class="window-titlebar-sidebar-icon ${state.session.sidebar_visible ? "is-active" : "is-inactive"}">
-      <button class="window-titlebar-action-button" data-command="toggle-assistant" data-testid="toggle-assistant" type="button" aria-label="Toggle assistant">Assistant</button>
+          <span class="window-titlebar-sidebar-pane"></span>
+        </span>
+      `)}
+      ${renderTitlebarAction("toggle-panel", "toggle-panel", "Toggle panel", `
+        <span class="window-titlebar-panel-icon ${state.session.panel.visible ? "is-active" : "is-inactive"}">
+          <span class="window-titlebar-panel-pane"></span>
+        </span>
+      `)}
+      ${renderTitlebarAction("toggle-assistant", "toggle-assistant", "Toggle assistant", `
+        <span class="window-titlebar-assistant-icon ${state.session.assistant_sidebar_visible ? "is-active" : "is-inactive"}">
+          <span class="window-titlebar-assistant-pane"></span>
+        </span>
+      `)}
     </div>
   `;
 }
 
+function renderTitlebarAction(command, testId, label, iconMarkup) {
+  return `
+    <button class="window-titlebar-action-button" data-command="${command}" data-testid="${testId}" type="button" aria-label="${label}" title="${label}">
+      ${iconMarkup}
+    </button>
+  `;
+}
+
 function renderActivityBar() {
   const top = sidebarViews().filter((view) => view.activity_group === "top");
   const bottom = sidebarViews().filter((view) => view.activity_group === "bottom");
 
   root.querySelector(".activity-bar").innerHTML = `
-    <div class="activity-bar-group">${top.map(renderActivityButton).join("")}</div>
+    <div class="activity-bar-top">${top.map(renderActivityButton).join("")}</div>
-    <div class="activity-bar-group">${bottom.map(renderActivityButton).join("")}</div>
+    <div class="activity-bar-bottom">${bottom.map(renderActivityButton).join("")}</div>
   `;
 }
 
@@ -71,7 +91,7 @@ function renderActivityButton(view) {
       aria-label="${escapeHtml(view.label)}"
       title="${escapeHtml(view.label)}"
     >
-      <span class="activity-bar-glyph">${escapeHtml(view.label.slice(0, 1))}</span>
+      ${activityIcon(view.id)}
     </button>
   `;
 }
@@ -82,11 +102,10 @@ function renderSidebar() {
 
   root.querySelector(".sidebar").innerHTML = `
     <div class="sidebar-header">
-      <div>
+      <div class="sidebar-title-row">
-        <div class="sidebar-eyebrow">${escapeHtml(view.label)}</div>
         <strong>${escapeHtml(data.title)}</strong>
+        <span class="sidebar-subtitle">${escapeHtml(data.subtitle)}</span>
       </div>
-      <span class="sidebar-subtitle">${escapeHtml(data.subtitle)}</span>
     </div>
     <div class="sidebar-content">
       ${data.sections
@@ -95,7 +114,6 @@ function renderSidebar() {
             <section class="sidebar-section">
               <div class="sidebar-section-header">
                 <span data-testid="sidebar-section-title">${escapeHtml(section.title)}</span>
-                <span>${section.items.length}</span>
               </div>
               <div class="sidebar-section-items">
                 ${section.items.map((item) => renderSidebarItem(item, view)).join("")}
@@ -151,6 +169,7 @@ function renderTab(tab) {
 
   return `
     <button class="tab ${active ? "active" : ""} ${tab.is_transient ? "transient" : ""}" data-tab-type="${tab.type}" data-tab-id="${tab.id}" type="button">
+      <span class="tab-icon">${tabIcon(tab.type)}</span>
       <span class="tab-title">${escapeHtml(meta.title)}</span>
       <span class="tab-close" aria-hidden="true">${tab.is_transient ? "Preview" : "Pinned"}</span>
     </button>
@@ -174,7 +193,7 @@ function renderEditor() {
         ${meta
           .map(
             (item) => `
-              <section class="editor-meta-card">
+              <section class="editor-meta-row">
                 <strong data-testid="editor-meta-label">${escapeHtml(item.label)}</strong>
                 <span>${escapeHtml(item.value)}</span>
               </section>
@@ -190,34 +209,28 @@ function renderEditorBody(route) {
   if (route === "dashboard") {
     const dashboard = bootstrap.content.dashboard;
     return `
-      <div class="dashboard-grid">
+      <section class="editor-section">
-        ${dashboard.summary_cards
+        <ul class="editor-list compact">
-          .map(
+          ${dashboard.summary_cards
-            (card) => `
+            .map((card) => `<li><strong>${escapeHtml(card.label)}:</strong> ${escapeHtml(card.value)} <span>${escapeHtml(card.detail)}</span></li>`)
-              <article class="dashboard-card">
+            .join("")}
-                <span>${escapeHtml(card.label)}</span>
+        </ul>
-                <strong>${escapeHtml(card.value)}</strong>
+      </section>
-                <p>${escapeHtml(card.detail)}</p>
+      <section class="editor-section">
-              </article>
-            `
-          )
-          .join("")}
-      </div>
-      <div class="editor-section">
         <h2>Workbench Notes</h2>
-        <ul>
+        <ul class="editor-list">
           ${dashboard.checklist.map((entry) => `<li>${escapeHtml(entry)}</li>`).join("")}
         </ul>
-      </div>
+      </section>
     `;
   }
 
   const active = activeItem();
   return `
     <div class="editor-toolbar">
-      <button type="button">Open</button>
+      <button class="editor-toolbar-button" type="button">Open</button>
-      <button type="button">Preview</button>
+      <button class="editor-toolbar-button" type="button">Preview</button>
-      <button type="button">Metadata</button>
+      <button class="editor-toolbar-button" type="button">Metadata</button>
     </div>
     <div class="editor-section">
       <h2>${escapeHtml(active?.title || routeLabel(route))}</h2>
@@ -240,7 +253,6 @@ function renderPanel() {
           )
           .join("")}
       </div>
-      <span>${state.session.panel.visible ? "Visible" : "Hidden"}</span>
     </div>
     <div class="panel-content">
       <div class="panel-entry">
@@ -255,7 +267,6 @@ function renderAssistant() {
   root.querySelector(".assistant-sidebar").innerHTML = `
     <div class="assistant-header">
       <strong>Assistant</strong>
-      <span>Project context</span>
     </div>
     <div class="assistant-content">
       ${bootstrap.content.assistant_cards
@@ -285,7 +296,7 @@ function renderStatusBar() {
       <span class="status-bar-item">${escapeHtml(status.right.theme_badge)}</span>
       <span class="status-bar-item">${status.right.offline_mode ? "Offline" : "Online"}</span>
       <span class="status-bar-item">${escapeHtml(status.right.ui_language.toUpperCase())}</span>
-      <span class="status-bar-item">${escapeHtml(status.right.brand)}</span>
+      <span class="status-bar-item brand">${escapeHtml(status.right.brand)}</span>
     </div>
   `;
 }
@@ -302,12 +313,14 @@ function bindEvents() {
       const command = button.dataset.command;
       if (command === "toggle-sidebar") {
         state.session.sidebar_visible = !state.session.sidebar_visible;
+        persistSessionWidths();
       }
       if (command === "toggle-panel") {
         state.session.panel.visible = !state.session.panel.visible;
       }
       if (command === "toggle-assistant") {
         state.session.assistant_sidebar_visible = !state.session.assistant_sidebar_visible;
+        persistSessionWidths();
       }
       render();
     };
@@ -316,6 +329,29 @@ function bindEvents() {
   root.querySelectorAll("[data-activity]").forEach((button) => {
     button.onclick = () => {
       const next = button.dataset.activity;
+
+  bindResizeHandle("sidebar", {
+    key: SIDEBAR_STORAGE_KEY,
+    min: 200,
+    max: 500,
+    get: () => state.session.sidebar_width,
+    set: (value) => {
+      state.session.sidebar_width = value;
+      state.session.sidebar_visible = true;
+    },
+  });
+
+  bindResizeHandle("assistant", {
+    key: ASSISTANT_STORAGE_KEY,
+    min: 280,
+    max: 640,
+    get: () => state.session.assistant_sidebar_width,
+    set: (value) => {
+      state.session.assistant_sidebar_width = value;
+      state.session.assistant_sidebar_visible = true;
+    },
+    invert: true,
+  });
       if (state.session.active_view === next && state.session.sidebar_visible) {
         state.session.sidebar_visible = false;
       } else {
@@ -477,6 +513,86 @@ function clone(value) {
   return JSON.parse(JSON.stringify(value));
 }
 
+function hydrateSession(session) {
+  const next = session;
+  next.sidebar_width = readStoredSize(SIDEBAR_STORAGE_KEY, next.sidebar_width, 200, 500);
+  next.assistant_sidebar_width = readStoredSize(ASSISTANT_STORAGE_KEY, next.assistant_sidebar_width, 280, 640);
+  return next;
+}
+
+function bindResizeHandle(name, options) {
+  const handle = root.querySelector(`[data-resize='${name}']`);
+  if (!handle) {
+    return;
+  }
+
+  handle.onmousedown = (event) => {
+    event.preventDefault();
+    const startX = event.clientX;
+    const startWidth = options.get();
+
+    const onMouseMove = (moveEvent) => {
+      const delta = options.invert ? startX - moveEvent.clientX : moveEvent.clientX - startX;
+      const width = clamp(startWidth + delta, options.min, options.max);
+      options.set(width);
+      persistSessionWidths();
+      render();
+    };
+
+    const onMouseUp = () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+  };
+}
+
+function persistSessionWidths() {
+  localStorage.setItem(SIDEBAR_STORAGE_KEY, String(state.session.sidebar_width));
+  localStorage.setItem(ASSISTANT_STORAGE_KEY, String(state.session.assistant_sidebar_width));
+}
+
+function readStoredSize(key, fallback, min, max) {
+  const raw = localStorage.getItem(key);
+  if (!raw) {
+    return fallback;
+  }
+
+  const parsed = Number.parseInt(raw, 10);
+  if (Number.isNaN(parsed)) {
+    return fallback;
+  }
+
+  return clamp(parsed, min, max);
+}
+
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+
+function activityIcon(id) {
+  const icons = {
+    posts: '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"></path><path d="M8 12h8v2H8zm0 4h8v2H8z"></path></svg>',
+    pages: '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M4 4h10v4h6v12H4V4zm10 1.5V9h4.5L14 5.5zM7 12h10v1.5H7V12zm0 3h10v1.5H7V15z"></path></svg>',
+    media: '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"></path></svg>',
+    scripts: '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M20 3H4a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h7v2H8v2h8v-2h-3v-2h7a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM5 14V5h14v9H5zm2-7.5L9.5 9 7 11.5l1.4 1.4L12.3 9 8.4 5.1 7 6.5zm6.5 5.5h4v-2h-4v2z"></path></svg>',
+    templates: '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M4 4h7v7H4V4zm9 0h7v7h-7V4zM4 13h7v7H4v-7zm9 0h7v7h-7v-7zM5.5 5.5v4h4v-4h-4zm9 0v4h4v-4h-4zm-9 9v4h4v-4h-4zm9 0v4h4v-4h-4z"></path></svg>',
+    tags: '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58s1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41s-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"></path></svg>',
+    chat: '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"></path><circle cx="8" cy="10" r="1.5"></circle><circle cx="12" cy="10" r="1.5"></circle><circle cx="16" cy="10" r="1.5"></circle></svg>',
+    import: '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path></svg>',
+    git: '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M22 11.73L12.27 2a1 1 0 0 0-1.41 0L8.84 4.02l2.56 2.56a1.2 1.2 0 0 1 1.52 1.53l2.47 2.47a1.2 1.2 0 1 1-.72.67l-2.3-2.3v6.06a1.2 1.2 0 1 1-.85 0V8.9a1.2 1.2 0 0 1-.66-1.59L8.35 4.8 2 11.16a1 1 0 0 0 0 1.41L11.73 22a1 1 0 0 0 1.41 0L22 13.14a1 1 0 0 0 0-1.41z"></path></svg>',
+    settings: '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"></path></svg>',
+  };
+
+  return icons[id] || icons.posts;
+}
+
+function tabIcon(type) {
+  return activityIcon(type === "post" ? "posts" : type);
+}
+
 function escapeHtml(value) {
   return String(value)
     .replaceAll("&", "&amp;")

priv/ui/index.html

@@ -53,9 +53,9 @@
           "sidebar_visible": true,
           "sidebar_width": 280,
           "active_view": "posts",
-          "assistant_sidebar_visible": true,
+          "assistant_sidebar_visible": false,
-          "assistant_sidebar_width": 320,
+          "assistant_sidebar_width": 360,
-          "panel": { "visible": true, "active_tab": "tasks" },
+          "panel": { "visible": false, "active_tab": "tasks" },
           "tabs": [],
           "active_tab": null,
           "dirty_tabs": []

test/bds/desktop/main_window_test.exs

@@ -0,0 +1,58 @@
+defmodule BDS.Desktop.MainWindowTest do
+  use ExUnit.Case, async: false
+
+  alias BDS.Desktop.MainWindow
+
+  setup do
+    path = Path.join(System.tmp_dir!(), "bds-main-window-state-#{System.unique_integer([:positive])}.json")
+    previous = Application.get_env(:bds, :desktop, [])
+    updated =
+      previous
+      |> Keyword.put(:window_state_path, path)
+      |> Keyword.put(:window_client_area_override, {0, 33, 1470, 851})
+
+    Application.put_env(:bds, :desktop, updated)
+
+    on_exit(fn ->
+      Application.put_env(:bds, :desktop, previous)
+      File.rm(path)
+    end)
+
+    %{path: path}
+  end
+
+  test "window options use a smaller safe default and restore persisted size and position", %{path: path} do
+    opts = MainWindow.window_options()
+
+    assert opts[:size] == {1280, 780}
+    assert opts[:min_size] == {800, 600}
+
+    :ok = MainWindow.persist_bounds(%{x: 120, y: 80, width: 1260, height: 820})
+
+    assert File.exists?(path)
+
+    restored = MainWindow.window_options()
+    assert restored[:size] == {1260, 820}
+    assert MainWindow.restore_bounds() == %{x: 120, y: 80, width: 1260, height: 820}
+  end
+
+  test "window options clamp oversized startup bounds to the visible client area" do
+    desktop = Application.get_env(:bds, :desktop, [])
+
+    Application.put_env(
+      :bds,
+      :desktop,
+      desktop
+      |> Keyword.put(:window_size, {1600, 950})
+      |> Keyword.put(:window_client_area_override, {0, 33, 1200, 700})
+    )
+
+    on_exit(fn ->
+      Application.put_env(:bds, :desktop, desktop)
+    end)
+
+    opts = MainWindow.window_options()
+
+    assert opts[:size] == {1200, 700}
+  end
+end

test/bds/desktop_test.exs

@@ -9,6 +9,7 @@ defmodule BDS.DesktopTest do
 
   test "desktop child specs include the local shell server and desktop window in non-test environments" do
     children = BDS.Application.desktop_children(:dev)
+    child_ids = Enum.map(children, &Supervisor.child_spec(&1, []).id)
 
     assert Enum.any?(children, fn child ->
              match?({BDS.Desktop.Server, _opts}, child)
@@ -18,6 +19,8 @@ defmodule BDS.DesktopTest do
              match?({Desktop.Window, opts} when is_list(opts), child) and
                Keyword.fetch!(elem(child, 1), :id) == BDS.Desktop.MainWindow
            end)
+
+    assert Enum.uniq(child_ids) == child_ids
   end
 
   test "desktop children stay disabled in test so command-line tests do not spawn wx windows" do
@@ -61,4 +64,4 @@ defmodule BDS.DesktopTest do
     assert conn.status == 200
     assert conn.resp_body =~ ~s(class="app")
   end
-end
+end

test/bds/ui/shell_test.exs

@@ -107,4 +107,21 @@ defmodule BDS.UI.ShellTest do
     assert File.exists?("/Users/gb/Projects/bDS2/priv/ui/app.css")
     assert File.exists?("/Users/gb/Projects/bDS2/priv/ui/app.js")
   end
+
+  test "static shell bundle keeps the old compact frame metrics and icon-based controls" do
+    css = File.read!("/Users/gb/Projects/bDS2/priv/ui/app.css")
+    js = File.read!("/Users/gb/Projects/bDS2/priv/ui/app.js")
+
+    assert css =~ ".window-titlebar"
+    assert css =~ "height: 34px"
+    assert css =~ "width: 48px"
+    assert css =~ "height: 35px"
+    assert css =~ "height: 22px"
+
+    assert js =~ "window-titlebar-sidebar-icon"
+    assert js =~ "window-titlebar-panel-icon"
+    assert js =~ "window-titlebar-assistant-icon"
+    assert js =~ "activity-bar-top"
+    assert js =~ "activity-bar-bottom"
+  end
 end