feat: ClawPal v0.1 — Tauri desktop GUI for OpenClaw

4-page layout (Home, Recipes, Settings, Doctor) with sidebar nav
and integrated Chat panel powered by OpenClaw agent (--local).

- Home: status, agents overview, recommended recipes, recent activity
- Recipes: browse, preview diff, apply with params
- Settings: model profiles CRUD, chat model selection, provider catalog
- Doctor: diagnostics with auto-fix
- Chat: OpenClaw agent integration with session persistence,
  agent selector, read-only advisory context injection
- Progressive data loading to avoid UI blocking
- API key resolution from OpenClaw agent auth-profiles
- Model catalog from openclaw CLI with cache

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/styles.css

@@ -0,0 +1,114 @@
+:root {
+  --bg: #0f1220;
+  --panel: #171b2f;
+  --text: #e6ebff;
+  --accent: #6dd0ff;
+}
+
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  font-family: ui-sans-serif, -apple-system, sans-serif;
+  color: var(--text);
+  background: linear-gradient(120deg, #0f1220, #151935);
+}
+
+.app-shell {
+  display: flex;
+  height: 100vh;
+}
+
+.sidebar {
+  width: 200px;
+  min-width: 200px;
+  background: var(--panel);
+  border-right: 1px solid #29325a;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 0;
+}
+
+.sidebar h1 {
+  font-size: 1.2rem;
+  padding: 0 16px 16px;
+  margin: 0;
+  border-bottom: 1px solid #29325a;
+}
+
+.sidebar nav {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 0;
+  flex: 1;
+}
+
+.sidebar nav button {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 10px 16px;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--text);
+  font-size: 0.95rem;
+  cursor: pointer;
+}
+
+.sidebar nav button:hover {
+  background: rgba(109, 208, 255, 0.08);
+}
+
+.sidebar nav button.active {
+  background: rgba(109, 208, 255, 0.14);
+  color: var(--accent);
+  border-left: 3px solid var(--accent);
+}
+
+.sidebar-divider {
+  height: 1px;
+  background: #29325a;
+  margin: 8px 16px;
+}
+
+button {
+  border: 1px solid #2d3560;
+  background: #1f2750;
+  color: var(--text);
+  padding: 8px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.recipe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
+.recipe-card, .card, .history-item { background: var(--panel); padding: 12px; border-radius: 10px; border: 1px solid #29325a; }
+.diff-viewer { background: #0b0f20; padding: 12px; border-radius: 8px; overflow: auto; max-height: 260px; }
+.param-form label { display: block; margin: 10px 0; }
+.param-form input:not([type="checkbox"]), .param-form textarea { width: 100%; }
+.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
+
+.home-layout {
+  display: flex;
+  gap: 16px;
+  height: 100%;
+}
+
+.home-main {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.home-chat {
+  width: 340px;
+  min-width: 300px;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid #29325a;
+  padding-left: 16px;
+}