RubyGems - openclacky - Versions diffs - 1.3.6 → 1.3.8 - Mend

openclacky 1.3.6 → 1.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (112) hide show

checksums.yaml +4 -4
data/CHANGELOG.md +54 -0
data/lib/clacky/agent/hook_manager.rb +10 -1
data/lib/clacky/agent/system_prompt_builder.rb +1 -1
data/lib/clacky/agent.rb +17 -3
data/lib/clacky/agent_profile.rb +124 -53
data/lib/clacky/billing/billing_store.rb +3 -2
data/lib/clacky/brand_config.rb +309 -6
data/lib/clacky/cli.rb +4 -57
data/lib/clacky/default_extensions/coding/agents/coding/avatar.png +0 -0
data/lib/clacky/default_extensions/coding/ext.yml +19 -0
data/lib/clacky/default_extensions/ext-studio/agents/ext-developer/avatar.png +0 -0
data/lib/clacky/default_extensions/ext-studio/agents/ext-developer/system_prompt.md +95 -0
data/lib/clacky/default_extensions/ext-studio/api/handler.rb +254 -0
data/lib/clacky/default_extensions/ext-studio/ext.yml +33 -0
data/lib/clacky/default_extensions/ext-studio/panels/studio/view.js +1288 -0
data/lib/clacky/default_extensions/ext-studio/skills/ext-debug/SKILL.md +71 -0
data/lib/clacky/default_extensions/ext-studio/skills/ext-publish/SKILL.md +74 -0
data/lib/clacky/default_extensions/ext-studio/skills/ext-scaffold/SKILL.md +65 -0
data/lib/clacky/default_extensions/general/agents/general/avatar.png +0 -0
data/lib/clacky/default_extensions/general/ext.yml +19 -0
data/lib/clacky/default_extensions/git/ext.yml +12 -0
data/lib/clacky/{default_agents/_panels/git/panel.js → default_extensions/git/panels/git/view.js} +4 -5
data/lib/clacky/default_extensions/meeting/{handler.rb → api/handler.rb} +78 -26
data/lib/clacky/default_extensions/meeting/ext.yml +15 -0
data/lib/clacky/default_extensions/meeting/{meeting.js → panels/meeting/view.js} +266 -90
data/lib/clacky/default_extensions/meeting/skills/meeting-summarizer/SKILL.md +2 -1
data/lib/clacky/default_extensions/time_machine/ext.yml +12 -0
data/lib/clacky/{default_agents/_panels/time_machine/panel.js → default_extensions/time_machine/panels/time_machine/view.js} +58 -47
data/lib/clacky/default_skills/channel-manager/discord_setup.rb +1 -1
data/lib/clacky/default_skills/extend-openclacky/SKILL.md +83 -18
data/lib/clacky/{api_extension.rb → extension/api_extension.rb} +27 -11
data/lib/clacky/extension/api_loader.rb +136 -0
data/lib/clacky/extension/cli_commands.rb +226 -0
data/lib/clacky/{server/api_extension_dispatcher.rb → extension/dispatcher.rb} +22 -9
data/lib/clacky/extension/hook_loader.rb +77 -0
data/lib/clacky/extension/loader.rb +489 -0
data/lib/clacky/extension/packager.rb +226 -0
data/lib/clacky/{patch_loader.rb → extension/patch_loader.rb} +45 -0
data/lib/clacky/extension/scaffold/template_renderer.rb +64 -0
data/lib/clacky/extension/scaffold/templates/full/README.md.erb +48 -0
data/lib/clacky/extension/scaffold/templates/full/agents/designer.md +5 -0
data/lib/clacky/extension/scaffold/templates/full/api/handler.rb.erb +16 -0
data/lib/clacky/extension/scaffold/templates/full/channels/noop.rb.erb +40 -0
data/lib/clacky/extension/scaffold/templates/full/ext.yml.erb +41 -0
data/lib/clacky/extension/scaffold/templates/full/hooks/audit.rb +9 -0
data/lib/clacky/extension/scaffold/templates/full/panels/dashboard/view.js.erb +194 -0
data/lib/clacky/extension/scaffold/templates/full/patches/audit.rb +15 -0
data/lib/clacky/extension/scaffold/templates/full/skills/__slug__-skill/SKILL.md.erb +8 -0
data/lib/clacky/extension/scaffold/templates/hello/api/handler.rb.erb +9 -0
data/lib/clacky/extension/scaffold/templates/hello/ext.yml.erb +12 -0
data/lib/clacky/extension/scaffold/templates/hello/panels/hello/view.js.erb +31 -0
data/lib/clacky/extension/scaffold.rb +55 -0
data/lib/clacky/extension/verifier.rb +196 -0
data/lib/clacky/identity.rb +70 -0
data/lib/clacky/locales/en.rb +19 -1
data/lib/clacky/locales/zh.rb +19 -1
data/lib/clacky/platform_http_client.rb +18 -15
data/lib/clacky/server/channel/extension_adapter_loader.rb +32 -0
data/lib/clacky/server/channel.rb +6 -0
data/lib/clacky/server/http_server.rb +439 -146
data/lib/clacky/server/session_registry.rb +9 -2
data/lib/clacky/shell_hook_loader.rb +266 -22
data/lib/clacky/skill_loader.rb +28 -1
data/lib/clacky/ui2/components/welcome_banner.rb +1 -1
data/lib/clacky/ui2/ui_controller.rb +9 -6
data/lib/clacky/utils/workspace_rules.rb +2 -2
data/lib/clacky/version.rb +1 -1
data/lib/clacky/web/app.css +1034 -675
data/lib/clacky/web/app.js +63 -15
data/lib/clacky/web/auth.js +2 -0
data/lib/clacky/web/components/notify.js +2 -0
data/lib/clacky/web/components/sidebar.js +1 -5
data/lib/clacky/web/core/ext.js +432 -89
data/lib/clacky/web/features/backup/store.js +1 -0
data/lib/clacky/web/features/backup/view.js +0 -1
data/lib/clacky/web/features/brand/view.js +13 -5
data/lib/clacky/web/features/extensions/store.js +184 -0
data/lib/clacky/web/features/extensions/view.js +390 -0
data/lib/clacky/web/features/new-session/store.js +199 -0
data/lib/clacky/web/features/new-session/view.js +619 -0
data/lib/clacky/web/features/share/view.js +63 -14
data/lib/clacky/web/features/skills/store.js +3 -1
data/lib/clacky/web/features/skills/view.js +1 -1
data/lib/clacky/web/features/tasks/view.js +12 -0
data/lib/clacky/web/features/trash/store.js +24 -6
data/lib/clacky/web/features/trash/view.js +48 -12
data/lib/clacky/web/features/workspace/store.js +2 -0
data/lib/clacky/web/features/workspace/view.js +0 -1
data/lib/clacky/web/i18n.js +152 -106
data/lib/clacky/web/index.html +172 -190
data/lib/clacky/web/sessions.js +67 -272
data/lib/clacky/web/settings.js +1 -1
data/lib/clacky/web/skills.js +88 -48
data/lib/clacky/web/theme.js +5 -0
data/lib/clacky/web/ws-dispatcher.js +12 -2
data/lib/clacky/web/ws.js +2 -0
data/lib/clacky.rb +21 -10
metadata +52 -21
data/benchmark/runner.rb +0 -441
data/lib/clacky/api_extension_loader.rb +0 -168
data/lib/clacky/default_agents/SOUL.md +0 -3
data/lib/clacky/default_agents/USER.md +0 -1
data/lib/clacky/default_agents/coding/profile.yml +0 -5
data/lib/clacky/default_agents/coding/webui/.gitkeep +0 -0
data/lib/clacky/default_agents/general/profile.yml +0 -2
data/lib/clacky/default_extensions/meeting/meta.yml +0 -3
data/lib/clacky/web/features/creator/store.js +0 -81
data/lib/clacky/web/features/creator/view.js +0 -380
/data/lib/clacky/{default_agents → default_extensions/coding/agents}/coding/system_prompt.md +0 -0
/data/lib/clacky/{default_agents → default_extensions/general/agents}/general/system_prompt.md +0 -0
/data/lib/clacky/{default_agents/base_prompt.md → prompts/base.md} +0 -0

data/lib/clacky/web/app.css CHANGED Viewed

@@ -221,6 +221,7 @@ html { font-size: 16px; }
   100% { background-position: -200% 0; }
 }
 .skel {
+  display: inline-block;
   border-radius: 6px;
   background: linear-gradient(90deg,
     #e8e8e8 25%,
@@ -607,6 +608,21 @@ body {
 }
 #session-list { padding: 4px 0 0; min-height: 6.75rem; }
+/* ── Extension nav slots (top / mid / bottom) ───────────────────────────── */
+[id^="ext-slot-sidebar-nav"] { display: block; }
+[id^="ext-slot-sidebar-nav"]:empty { display: none; }
+#ext-slot-sidebar-nav-top {
+  padding: 8px 0 10px;
+  margin-bottom: 6px;
+  border-bottom: 1px solid var(--color-border-secondary);
+}
+#ext-slot-sidebar-nav      { padding: 6px 0 4px; }
+#ext-slot-sidebar-nav-bottom {
+  padding: 8px 0 10px;
+  margin-top: 6px;
+  border-top: 1px solid var(--color-border-secondary);
+}
 /* ── Sidebar divider (Section Labels) ───────────────────────────────────── */
 .sidebar-divider {
   display: flex;
@@ -645,19 +661,12 @@ body {
   gap: 4px;
 }
-/* ── Split button [+ ▾] ─────────────────────────────────────────────────── */
-.btn-split-wrap {
-  position: relative;
-  display: flex;
-  align-items: center;
-  border-radius: 6px;
-  overflow: visible;
-}
+/* ── New Session button ──────────────────────────────────────────────────── */
 .btn-split-main {
   height: 1.5rem;
   padding: 0 0.625rem;
   border: none;
-  border-radius: 6px 0 0 6px;
+  border-radius: 6px;
   background: var(--color-accent-primary);
   color: #fff;
   font-size: 0.75rem;
@@ -671,51 +680,6 @@ body {
   background: var(--color-button-primary-hover);
   box-shadow: 0 2px 6px rgba(0,0,0,0.15);
 }
-.btn-split-arrow {
-  height: 1.5rem;
-  padding: 0 0.35rem;
-  border: none;
-  border-left: 1px solid rgba(255,255,255,0.3);
-  border-radius: 0 6px 6px 0;
-  background: var(--color-accent-primary);
-  color: #fff;
-  font-size: 0.75rem;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-.btn-split-arrow:hover {
-  background: var(--color-button-primary-hover);
-}
-/* ── Dropdown menu ───────────────────────────────────────────────────────── */
-.new-session-dropdown {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  min-width: 11.25rem;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border-primary);
-  border-radius: 7px;
-  box-shadow: var(--shadow-md);
-  z-index: 200;
-  padding: 0.375rem 0 0.25rem;
-  overflow: hidden;
-}
-.new-session-dropdown[hidden] { display: none; }
-.dropdown-item {
-  padding: 0.4rem 0.875rem;
-  font-size: 0.8125rem;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  white-space: nowrap;
-  transition: all 0.12s;
-  display: flex;
-  align-items: center;
-}
-.dropdown-item:hover {
-  background: var(--color-bg-hover);
-  color: var(--color-accent-primary);
-}
 /* ── Session source badge ────────────────────────────────────────────────── */
 /* Design: compact neutral chips — the visual weight is carried by the
@@ -769,6 +733,21 @@ body {
 .session-item.active .session-badge--coding {
   color: var(--color-text-tertiary);
 }
+/* Agent profile: extension / custom agents — same hollow neutral base as
+   coding, but a subtle accent tint keeps user-defined agents visually
+   distinct from the built-in "coding" tag. */
+.session-badge--agent   {
+  background: transparent;
+  color: var(--color-accent-primary);
+  border-color: var(--color-accent-soft);
+  max-width: 8rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.session-item.active .session-badge--agent {
+  border-color: var(--color-accent-primary);
+}
 /* ── Sidebar divider actions group ───────────────────────────────────────── */
@@ -1516,6 +1495,23 @@ body {
   background: var(--color-accent-primary);
 }
+/* Extension nav mounts are wrapped by ext.js; the Router stamps .active on the
+   wrapper, so the highlight is forwarded to the inner nav item. */
+[data-ext-workspace].active > .task-item {
+  background: var(--color-accent-soft);
+}
+[data-ext-workspace].active > .task-item::before {
+  content: "";
+  position: absolute;
+  left: -10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 17px;
+  border-radius: 0 3px 3px 0;
+  background: var(--color-accent-primary);
+}
 .task-row {
   display: flex;
   align-items: center;
@@ -1839,6 +1835,14 @@ body {
   background: var(--color-bg-secondary);
   transition: background-color var(--transition-base);
 }
+/* Extension workspace slot: give any registered workspace the same page
+   chrome as built-in pages (padding + scroll) so extensions don't reinvent it. */
+#ext-slot-main-workspace {
+  flex: 1;
+  overflow-y: auto;
+  padding: 2rem 2rem 1.5rem;
+}
 .centered {
   flex: 1;
   display: flex;
@@ -1849,143 +1853,439 @@ body {
   color: var(--color-text-secondary);
 }
-/* ── Empty / welcome state — agent "standing by" cockpit ─────────────────── */
-.ce-mark {
-  width: 3.25rem;
-  height: 3.25rem;
-  border-radius: 0.875rem;
-  background: var(--color-accent-soft);
-  display: grid;
-  place-items: center;
+/* ── New Session landing page (#new) ─────────────────────────────────────── */
+.new-session-page {
+  justify-content: flex-start;
+  padding: 0;
+  overflow: hidden;
+  gap: 0;
+}
+.new-session-inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
 }
-.ce-mark svg { width: 1.625rem; height: 1.625rem; color: var(--color-accent-primary); }
-.ce-head {
+.new-session-body {
+  flex: 1 1 auto;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
-  align-items: center;
+  gap: 1.25rem;
+  width: 100%;
+  max-width: 60rem;
+  margin: 0 auto;
+  padding: 5.5rem 1.5rem 1rem;
+}
+.new-session-composer {
+  position: relative;
+  flex: none;
+  padding: 0.75rem 1.5rem 1.25rem;
 }
-.ce-title {
-  font-size: 1.3125rem;
+.new-session-title {
+  font-size: 1.5rem;
   font-weight: 680;
   color: var(--color-text-primary);
   letter-spacing: -0.01em;
-  text-align: center;
+  text-align: left;
+  margin: 0;
 }
-.ce-sub {
+.new-session-subtitle {
   color: var(--color-text-tertiary);
-  font-size: 0.84375rem;
-  text-align: center;
+  font-size: 0.875rem;
+  text-align: left;
+  margin: 0;
+}
+.new-session-agents {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+  grid-auto-rows: 1fr;
+  gap: 0.75rem;
 }
-.chips {
+.new-session-agent-panels {
   display: flex;
-  gap: 0.625rem;
   flex-wrap: wrap;
-  justify-content: center;
-  max-width: 34rem;
+  align-items: center;
+  gap: 0.375rem;
+  margin-top: -0.625rem;
+  padding-left: 0.125rem;
 }
-.chip {
-  display: flex;
+.ns-panels-label {
+  width: 100%;
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+  margin-bottom: 0.0625rem;
+}
+.ns-panel-chip {
+  display: inline-flex;
   align-items: center;
-  gap: 0.5625rem;
-  padding: 0.6875rem 0.9375rem;
+  padding: 0.1875rem 0.5rem;
+  border-radius: 0.375rem;
+  font-size: 0.78125rem;
+  font-weight: 500;
+  line-height: 1.3;
+}
+.ns-panel-chip--panel {
+  background: var(--color-accent-soft);
+  color: var(--color-accent-primary);
+}
+.ns-panel-chip--skill {
+  background: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border-primary);
+}
+.agent-card {
+  position: relative;
+  padding: 0.9375rem 1rem;
   border: 1px solid var(--color-border-primary);
-  border-radius: 0.625rem;
+  border-radius: 0.75rem;
   background: var(--color-bg-primary);
   cursor: pointer;
   text-align: left;
-  transition: border-color 0.14s, transform 0.14s;
+  transition: border-color 0.14s, background-color 0.14s, transform 0.14s;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
 }
-.chip:hover {
-  border-color: color-mix(in srgb, var(--color-accent-primary) 45%, var(--color-border-primary));
+.agent-card:hover {
+  border-color: color-mix(in srgb, var(--color-accent-primary) 40%, var(--color-border-primary));
   transform: translateY(-1px);
 }
-.chip .ci {
-  width: 1.875rem;
-  height: 1.875rem;
-  border-radius: 0.5rem;
-  background: var(--color-bg-hover);
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
+.agent-card--selected {
+  border-color: var(--color-accent-primary);
+  background: var(--color-accent-soft);
 }
-.chip .ci svg { width: 1rem; height: 1rem; color: var(--color-text-secondary); }
-.chip .ct-wrap { display: flex; flex-direction: column; gap: 1px; }
-.chip .ct { font-size: 0.8125rem; color: var(--color-text-primary); font-weight: 550; }
-.chip .cd { font-size: 0.71875rem; color: var(--color-text-tertiary); }
-#btn-welcome-new {
-  background: transparent;
-  color: var(--color-text-tertiary);
-  border: none;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.8125rem;
-  cursor: pointer;
-  transition: color var(--transition-fast);
+.agent-card-title {
+  font-size: 0.9375rem;
+  font-weight: 620;
+  color: var(--color-text-primary);
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
 }
-#btn-welcome-new:hover { color: var(--color-text-secondary); text-decoration: underline; }
-/* ── Chat panel ──────────────────────────────────────────────────────────── */
-#chat-panel { flex: 1; display: flex; flex-direction: row; overflow: hidden; position: relative; }
-#chat-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; min-width: 0; }
-/* ── Session extension slots (agent-scoped panels mount here) ───────────────
-   Each slot is laid out by the host; an empty slot collapses to zero so it
-   never reserves space when no panel is mounted for the current agent. */
-/* ── Session aside — one resizable / collapsible right column with tabs ─────
-   The host owns the chrome (resize handle, collapse button, floating opener);
-   Clacky.ext renders the tab bar + bodies into #ext-slot-session-aside. When
-   the slot has no panels for the current agent it stays empty and the whole
-   column collapses to zero width. */
-#session-aside {
-  --session-aside-width: 16rem;
-  width: var(--session-aside-width);
-  flex-shrink: 0;
-  position: relative;
+.agent-card-header {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  gap: 0.625rem;
+  margin-bottom: 0.125rem;
+}
+.agent-card-avatar {
+  flex: none;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 50%;
   overflow: hidden;
-  border-left: 1px solid var(--color-border-primary);
-  background: var(--color-bg-secondary);
-  transition: width var(--transition-base);
+  background: var(--color-bg-hover);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-#session-aside.collapsed { width: 0; border-left: none; }
-/* Empty slot (no panels for this agent) → collapse the whole column. */
-#session-aside:has(.session-aside-slot:empty) { width: 0; border-left: none; }
-#session-aside:has(.session-aside-slot:empty) .session-aside-resize,
-#session-aside:has(.session-aside-slot:empty) .session-aside-collapse { display: none; }
-.session-aside-resize {
-  position: absolute;
-  top: 0;
-  left: -6px;
-  bottom: 0;
-  width: 12px;
-  cursor: col-resize;
-  z-index: 10;
-  background: transparent;
+.agent-card-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
 }
-.session-aside-resize::after {
-  content: "";
+.agent-card-avatar--fallback {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--color-accent-primary);
+  background: var(--color-accent-soft);
+}
+.agent-card-new {
+  font-size: 0.6rem;
+  font-weight: 700;
+  line-height: 1;
+  padding: 2px 5px;
+  border-radius: 4px;
+  background: color-mix(in srgb, #16a34a 18%, transparent);
+  color: #16a34a;
+  letter-spacing: 0.04em;
+}
+.agent-card-desc {
+  font-size: 0.78125rem;
+  color: var(--color-text-tertiary);
+  line-height: 1.4;
+}
+.agent-card-badge {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 6px;
-  width: 1px;
-  background: transparent;
-  transition: background-color var(--transition-base);
+  top: 0.5rem;
+  right: 0.5rem;
+  font-size: 0.65rem;
+  font-weight: 600;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: var(--color-bg-hover);
+  color: var(--color-text-secondary);
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+.agent-card-badge--custom {
+  background: color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
+  color: var(--color-accent-primary);
+}
+.agent-card-author {
+  margin-top: 0.25rem;
+  font-size: 0.72rem;
+  color: var(--color-text-tertiary);
+  opacity: 0.8;
 }
-.session-aside-resize:hover::after,
-.session-aside-resize.active::after { background: transparent; }
-.session-aside-collapse {
-  position: absolute;
-  top: 7px;
-  right: 8px;
-  z-index: 11;
-  display: inline-flex;
+.new-session-input-bar {
+  margin: 0;
+  padding: 10px 12px;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 13px;
+  background: var(--color-bg-primary);
+  display: flex;
   align-items: center;
-  justify-content: center;
+  gap: 8px;
+  box-shadow: var(--shadow-card);
+  transition: border-color .14s;
+}
+.new-session-input-bar:focus-within {
+  border-color: color-mix(in srgb, var(--color-accent-primary) 50%, var(--color-border-primary));
+}
+.new-session-composer-btn {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  transition: background .12s, color .12s;
+}
+.new-session-composer-btn:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-hover);
+}
+.new-session-composer-btn.active {
+  color: var(--color-accent-primary);
+  background: var(--color-accent-soft);
+}
+.new-session-composer-btn > span {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
+}
+.new-session-textarea {
+  flex: 1;
+  border: none;
+  outline: none;
+  resize: none;
+  background: transparent;
+  color: var(--color-text-primary);
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  line-height: 1.55;
+  padding: 4px 6px;
+  margin: 0;
+  max-height: 12.5rem;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+.new-session-textarea::-webkit-scrollbar { display: none; }
+.new-session-advanced-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: flex-start;
+  margin-top: -0.75rem;
+}
+.new-session-advanced-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  border: none;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+  transition: color var(--transition-fast), background-color var(--transition-fast);
+}
+.new-session-advanced-toggle:hover {
+  color: var(--color-text-secondary);
+}
+.new-session-advanced-caret {
+  transition: transform 0.15s;
+}
+.new-session-advanced-toggle.is-open .new-session-advanced-caret {
+  transform: rotate(180deg);
+}
+.new-session-send {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border: none;
+  border-radius: 9px;
+  background: var(--color-accent-primary);
+  color: #fff;
+  cursor: pointer;
+  transition: background .12s, opacity .12s;
+}
+.new-session-send svg {
+  width: 15px;
+  height: 15px;
+}
+.new-session-send:disabled {
+  background: var(--color-border-primary);
+  color: var(--color-text-tertiary);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.new-session-send:not(:disabled):hover {
+  background: color-mix(in srgb, var(--color-accent-primary) 85%, #fff);
+}
+.new-session-advanced {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0.9375rem;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 0.75rem;
+  background: var(--color-bg-secondary);
+  align-self: stretch;
+}
+.new-session-advanced[hidden] {
+  display: none;
+}
+.new-session-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3125rem;
+}
+.new-session-label {
+  font-size: 0.78125rem;
+  color: var(--color-text-secondary);
+  font-weight: 540;
+}
+.new-session-input,
+.new-session-select {
+  width: 100%;
+  padding: 0.4375rem 0.625rem;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 0.4375rem;
+  background: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  font-size: 0.8125rem;
+  font-family: inherit;
+}
+.new-session-input:focus,
+.new-session-select:focus {
+  outline: none;
+  border-color: var(--color-accent-primary);
+}
+.new-session-input-row {
+  display: flex;
+  gap: 0.375rem;
+}
+.new-session-input-row .new-session-input {
+  flex: 1;
+}
+.new-session-browse-btn {
+  padding: 0 0.625rem;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 0.4375rem;
+  background: var(--color-bg-primary);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  transition: border-color var(--transition-fast), color var(--transition-fast);
+}
+.new-session-browse-btn:hover {
+  border-color: var(--color-accent-primary);
+  color: var(--color-accent-primary);
+}
+.new-session-checkbox-field {
+  display: flex;
+  align-items: center;
+}
+.new-session-checkbox-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+.new-session-checkbox {
+  cursor: pointer;
+}
+/* ── Chat panel ──────────────────────────────────────────────────────────── */
+#chat-panel { flex: 1; display: flex; flex-direction: row; overflow: hidden; position: relative; }
+#chat-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; min-width: 0; }
+/* ── Session extension slots (agent-scoped panels mount here) ───────────────
+   Each slot is laid out by the host; an empty slot collapses to zero so it
+   never reserves space when no panel is mounted for the current agent. */
+/* ── Session aside — one resizable / collapsible right column with tabs ─────
+   The host owns the chrome (resize handle, collapse button, floating opener);
+   Clacky.ext renders the tab bar + bodies into #ext-slot-session-aside. When
+   the slot has no panels for the current agent it stays empty and the whole
+   column collapses to zero width. */
+#session-aside {
+  --session-aside-width: 16rem;
+  width: var(--session-aside-width);
+  flex-shrink: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-left: 1px solid var(--color-border-primary);
+  background: var(--color-bg-secondary);
+  transition: width var(--transition-base);
+}
+#session-aside.collapsed { width: 0; border-left: none; }
+/* Empty slot (no panels for this agent) → collapse the whole column. */
+#session-aside:has(.session-aside-slot:empty) { width: 0; border-left: none; }
+#session-aside:has(.session-aside-slot:empty) .session-aside-resize,
+#session-aside:has(.session-aside-slot:empty) .session-aside-collapse { display: none; }
+.session-aside-resize {
+  position: absolute;
+  top: 0;
+  left: -6px;
+  bottom: 0;
+  width: 12px;
+  cursor: col-resize;
+  z-index: 10;
+  background: transparent;
+}
+.session-aside-resize::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 6px;
+  width: 1px;
+  background: transparent;
+  transition: background-color var(--transition-base);
+}
+.session-aside-resize:hover::after,
+.session-aside-resize.active::after { background: transparent; }
+.session-aside-collapse {
+  position: absolute;
+  top: 7px;
+  right: 8px;
+  z-index: 11;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 1.625rem;
   height: 1.625rem;
   border: none;
@@ -2069,7 +2369,15 @@ body {
 .session-banner:empty,
 .session-composer:empty { display: none; }
 .session-banner { flex-shrink: 0; }
-.session-composer { flex-shrink: 0; }
+.session-composer {
+  flex-shrink: 0;
+  margin-bottom: -9px;
+  display: flex;
+  padding-inline: 12px;
+}
+.session-composer > * {
+  justify-content: flex-start !important;
+}
 /* ── File tree (used inside the Files tab) ──────────────────────────────── */
 .wt-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
@@ -3852,6 +4160,12 @@ body {
   box-shadow: var(--shadow-card);
   margin-bottom: -1px;
 }
+#ns-image-preview-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.25rem 0 0.5rem;
+}
 /* Square off the top corners of the input-bar when the preview strip sits above it */
 #input-area:has(#image-preview-strip:not([style*="display:none"])):not(:has(#image-preview-strip[style*="display: none"])) #input-bar {
   border-top-left-radius: 0;
@@ -3950,7 +4264,8 @@ body {
 .pdf-preview-remove:hover { background: var(--color-error); }
 /* ── Skill autocomplete dropdown ─────────────────────────────────────────── */
-#skill-autocomplete {
+#skill-autocomplete,
+.skill-autocomplete {
   position: absolute;
   bottom: 100%;
   left: 0;
@@ -3968,7 +4283,8 @@ body {
   z-index: 1000;
 }
-#skill-autocomplete-list {
+#skill-autocomplete-list,
+#ns-skill-autocomplete-list {
   padding: 0.25rem 0;
 }
@@ -5780,24 +6096,7 @@ body {
   border-color: var(--color-accent-primary);
 }
-/* New Session Modal */
-.new-session-modal {
-  max-width: 32.5rem;
-  padding: 1.25rem 1.25rem 1rem;
-}
-.new-session-modal .modal-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.875rem;
-}
-.new-session-modal .modal-title {
-  font-size: 1rem;
-  font-weight: 600;
-  margin: 0;
-  padding: 0;
-  border: none;
-  color: var(--color-text-primary);
-}
 .modal-box .modal-header {
   display: flex;
   align-items: center;
@@ -5922,13 +6221,6 @@ body {
   cursor: pointer;
   accent-color: var(--color-accent-primary);
 }
-.new-session-modal .modal-body {
-  gap: 0.75rem;
-}
-.new-session-modal .modal-footer {
-  margin-top: 1rem;
-  padding-top: 1rem;
-}
 .modal-footer {
   display: flex;
   gap: 0.625rem;
@@ -6287,7 +6579,7 @@ body {
   transition: transform 0.18s;
 }
 .skills-filter-toggle input:checked ~ .skills-filter-toggle-track {
-  background: var(--color-accent, #6c63ff);
+  background: var(--color-accent-primary);
 }
 .skills-filter-toggle input:checked ~ .skills-filter-toggle-track::after {
   transform: translateX(0.875rem);
@@ -6310,7 +6602,7 @@ body {
   color: var(--color-text-secondary);
   font-size: 0.8125rem;
 }
-/* Guided CTA card in the empty-skills state — mirrors .creator-new-card */
+/* Guided CTA card in the empty-skills state */
 .skills-empty-create-btn {
   display: flex;
   align-items: center;
@@ -6777,28 +7069,280 @@ body {
   margin-bottom: 0.625rem;
 }
-/* Brand Skill card */
-.brand-skill-card {
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border-primary);
-  border-radius: 8px;
-  padding: 0.875rem 1rem;
-  transition: border-color .15s;
-}
-.brand-skill-card:hover { border-color: var(--color-text-muted); }
-.brand-skill-card-main {
+/* ── Extension Market ─────────────────────────────────────────────────── */
+#extensions-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.75rem 2.25rem;
   display: flex;
-  align-items: center;
-  gap: 0.75rem;
+  flex-direction: column;
+  gap: 1.25rem;
 }
-.brand-skill-info { flex: 1; min-width: 0; }
-.brand-skill-title {
+.extensions-toolbar {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
-  margin-bottom: 0.25rem;
+  gap: 0.5rem;
 }
-.brand-skill-name {
+.extensions-search {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.8125rem;
+  padding: 0.4375rem 0.75rem;
+  border-radius: 6px;
+  border: 1px solid var(--color-border-primary);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+}
+.extensions-search:focus {
+  outline: none;
+  border-color: var(--color-accent, #6366f1);
+}
+.extensions-sort {
+  flex-shrink: 0;
+  font-size: 0.8125rem;
+  padding: 0.4375rem 2rem 0.4375rem 0.75rem;
+  border-radius: 6px;
+  border: 1px solid var(--color-border-primary);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.625rem center;
+}
+.extensions-sort:focus {
+  outline: none;
+  border-color: var(--color-accent, #6366f1);
+}
+#extensions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-top: 0.25rem;
+}
+.extensions-empty {
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+  text-align: center;
+  padding: 1.5rem 0;
+}
+.extension-card {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
+  padding: 0.875rem 1rem;
+  transition: border-color .15s;
+}
+.extension-card:hover { border-color: var(--color-text-muted); }
+.extension-card-main {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+.extension-emoji {
+  font-size: 1.5rem;
+  line-height: 1.4;
+  flex-shrink: 0;
+}
+.extension-info { flex: 1; min-width: 0; }
+.extension-title {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-bottom: 0.25rem;
+  flex-wrap: wrap;
+}
+.extension-name {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+.extension-version {
+  font-size: 0.6875rem;
+  color: var(--color-text-secondary);
+  background: var(--color-bg-tertiary, rgba(255,255,255,0.05));
+  border-radius: 4px;
+  padding: 0.0625rem 0.375rem;
+}
+.extension-units {
+  font-size: 0.6875rem;
+  color: var(--color-text-muted);
+}
+.extension-installed {
+  font-size: 0.6875rem;
+  color: var(--color-success, #16a34a);
+  background: var(--color-success-bg, rgba(22,163,74,0.12));
+  border-radius: 4px;
+  padding: 0.0625rem 0.375rem;
+}
+.extension-desc {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+  margin-bottom: 0.375rem;
+}
+.extension-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.extension-homepage {
+  font-size: 0.6875rem;
+  color: var(--color-accent, #6366f1);
+  text-decoration: none;
+}
+.extension-homepage:hover { text-decoration: underline; }
+/* Clickable catalog card + detail view */
+.extension-card-clickable { cursor: pointer; }
+.extension-detail {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.75rem 2.25rem;
+}
+.extension-detail-head { margin-bottom: 1rem; }
+.extension-detail-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: transparent;
+  border: none;
+  color: var(--color-text-secondary);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  padding: 0.3rem 0.6rem;
+  border-radius: 6px;
+  margin-left: -0.6rem;
+  transition: background 0.15s, color 0.15s;
+}
+.extension-detail-back:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-hover);
+}
+.extension-detail-hero {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.875rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--color-border-primary);
+}
+.extension-detail-heading { flex: 1; min-width: 0; }
+.extension-emoji-lg { font-size: 2.25rem; }
+.extension-name-lg { font-size: 1.0625rem; }
+.extension-detail-block { margin-top: 1.25rem; }
+.extension-detail-block-title {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0 0 0.625rem;
+}
+.extension-detail-section { margin-bottom: 0.875rem; }
+.extension-detail-section-title {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--color-text-muted);
+  margin: 0 0 0.375rem;
+}
+.extension-contrib-list,
+.extension-version-list { list-style: none; margin: 0; padding: 0; }
+.extension-contrib-item {
+  padding: 0.5rem 0.75rem;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 6px;
+  margin-bottom: 0.375rem;
+}
+.extension-contrib-title {
+  display: block;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+.extension-contrib-desc {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+  margin-top: 0.125rem;
+}
+.extension-version-item {
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--color-border-primary);
+}
+.extension-version-item:last-child { border-bottom: none; }
+.extension-version-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.extension-version-date {
+  font-size: 0.6875rem;
+  color: var(--color-text-muted);
+}
+.extension-version-notes {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+  margin-top: 0.25rem;
+  white-space: pre-wrap;
+}
+.extension-detail-loading { display: flex; flex-direction: column; gap: 0.5rem; }
+.extension-detail-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+.extension-disabled {
+  font-size: 0.6875rem;
+  color: var(--color-text-secondary);
+  background: var(--color-surface-hover, rgba(0,0,0,0.06));
+  border-radius: 4px;
+  padding: 0.0625rem 0.375rem;
+}
+.extension-action {
+  font-size: 0.75rem;
+  padding: 0.3125rem 0.75rem;
+  border-radius: 6px;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text);
+  cursor: pointer;
+}
+.extension-action:hover { background: var(--color-surface-hover, rgba(0,0,0,0.04)); }
+.extension-action-remove {
+  color: var(--color-danger, #dc2626);
+  border-color: var(--color-danger-border, rgba(220,38,38,0.4));
+}
+.extension-action-remove:hover { background: var(--color-danger-bg, rgba(220,38,38,0.08)); }
+/* Brand Skill card */
+.brand-skill-card {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
+  padding: 0.875rem 1rem;
+  transition: border-color .15s;
+}
+.brand-skill-card:hover { border-color: var(--color-text-muted); }
+.brand-skill-card-main {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.brand-skill-info { flex: 1; min-width: 0; }
+.brand-skill-title {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-bottom: 0.25rem;
+}
+.brand-skill-name {
   font-size: 0.8125rem;
   font-weight: 600;
   color: var(--color-text-primary);
@@ -8184,6 +8728,8 @@ body.setup-mode[data-theme="dark"] {
   flex-shrink: 0;
 }
+.brand-warning-bar > span { flex: 1; }
 .brand-warning-bar button {
   background: transparent;
   border: none;
@@ -8194,6 +8740,20 @@ body.setup-mode[data-theme="dark"] {
   opacity: 0.7;
 }
+.brand-warning-bar .brand-warning-renew-btn {
+  background: transparent;
+  border: 1px solid currentColor;
+  border-radius: var(--radius-sm, 4px);
+  color: var(--color-warning);
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.2rem 0.6rem;
+  opacity: 0.9;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
 .brand-warning-bar button:hover { opacity: 1; }
 /* ── Brand activation banner (top info bar, replaces full-screen panel) ──── */
@@ -9353,449 +9913,88 @@ body.setup-mode[data-theme="dark"] {
   display: inline-flex;
   align-items: center;
   gap: 0.3125rem;
-  transition: background 0.15s, border-color 0.15s, color 0.15s;
-}
-.btn-memory-curate:hover,
-.btn-memory-edit:hover {
-  border-color: var(--color-text-primary);
-  background: var(--color-bg-hover);
-}
-.btn-memory-delete {
-  color: var(--color-text-primary);
-}
-.btn-memory-delete:hover {
-  border-color: var(--color-error);
-  color: var(--color-error);
-  background: var(--color-error-bg);
-}
-.btn-memory-expand {
-  min-width: 1.75rem;
-  justify-content: center;
-  color: var(--color-text-muted);
-}
-.btn-memory-expand:hover { color: var(--color-text-primary); }
-.btn-memory-expand.expanded svg { transform: rotate(180deg); }
-.btn-memory-expand svg           { transition: transform 0.2s; }
-.memory-card-body {
-  padding: 0.25rem 1rem 0.875rem 1rem;
-  border-top: 1px solid var(--color-border-primary);
-  background: var(--color-bg-secondary);
-  font-size: 0.8125rem;
-  line-height: 1.6;
-  color: var(--color-text-primary);
-}
-.memory-card-body h1,
-.memory-card-body h2,
-.memory-card-body h3 {
-  margin: 0.625rem 0 0.375rem;
-  font-weight: 600;
-}
-.memory-card-body p  { margin: 0.375rem 0; }
-.memory-card-body ul,
-.memory-card-body ol { margin: 0.25rem 0 0.5rem 1.25rem; padding: 0; }
-.memory-card-body li { margin: 2px 0; }
-.memory-card-body code {
-  background: var(--color-bg-hover);
-  padding: 1px 0.3125rem;
-  border-radius: 4px;
-  font-family: ui-monospace, "SF Mono", Menlo, monospace;
-  font-size: 0.75rem;
-}
-.memory-card-loading {
-  padding: 0.625rem 0;
-  text-align: center;
-  color: var(--color-text-muted);
-  font-size: 0.75rem;
-  font-style: italic;
-}
-/* ── Mobile responsive (≤48rem) ─────────────────────────────────────────── */
-/* ══════════════════════════════════════════════════════════════════════════
-   Creator Hub — Creator Center
-   ══════════════════════════════════════════════════════════════════════════ */
-#creator-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-#creator-body {
-  flex: 1;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  padding: 2rem 2rem 3.75rem;
-  gap: 1.75rem;
-}
-/* ── Section blocks ────────────────────────────────────────────────────── */
-.creator-section-block {
-  display: flex;
-  flex-direction: column;
-  gap: 0.625rem;
-}
-.creator-section-header {
-  display: flex;
-  align-items: baseline;
-  gap: 0.625rem;
-  padding-bottom: 0.375rem;
-  border-bottom: 1px solid var(--color-border-primary);
-  margin-bottom: 2px;
-}
-.creator-section-label {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--color-text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-.creator-section-hint {
-  font-size: 0.6875rem;
-  color: var(--color-text-muted);
-}
-.creator-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-/* ── Skill Card base ───────────────────────────────────────────────────── */
-.creator-skill-card {
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border-primary);
-  border-radius: 8px;
-  padding: 0.875rem 1rem;
-  margin-bottom: 0.75rem;
-  transition: border-color .15s;
-}
-.creator-skill-card:last-child {
-  margin-bottom: 0;
-}
-.creator-skill-card:hover { border-color: var(--color-text-muted); }
-.creator-card-main {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-.creator-card-info { flex: 1; min-width: 0; }
-.creator-card-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-shrink: 0;
-}
-.creator-card-title {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.25rem;
-  flex-wrap: wrap;
-}
-.creator-skill-name {
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-.creator-card-desc {
-  font-size: 0.75rem;
-  color: var(--color-text-tertiary);
-  line-height: 1.5;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-/* ── Card meta row (version + download count) ──────────────────────────── */
-.creator-card-meta {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-top: 0.3125rem;
-}
-.creator-version {
-  font-size: 0.6875rem;
-  color: var(--color-text-muted);
-}
-.creator-dl-count {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 0.6875rem;
-  color: var(--color-text-muted);
-}
-/* ── Badges ────────────────────────────────────────────────────────────── */
-.creator-badge {
-  font-size: 0.625rem;
-  font-weight: 600;
-  padding: 2px 0.4375rem;
-  border-radius: 10px;
-  letter-spacing: 0.3px;
-  flex-shrink: 0;
-}
-.creator-badge-published {
-  background: var(--color-success-bg);
-  color: var(--color-success);
-  border: 1px solid var(--color-success-border);
-}
-.creator-badge-local {
-  background: rgba(250, 173, 20, 0.1);
-  color: #b8860b;
-  border: 1px solid rgba(250, 173, 20, 0.3);
-}
-[data-theme="dark"] .creator-badge-local {
-  color: #f5c842;
-  background: rgba(245, 200, 66, 0.1);
-  border-color: rgba(245, 200, 66, 0.25);
-}
-/* "Has local changes" badge — orange dot */
-.creator-changes-badge {
-  font-size: 0.6875rem;
-  font-weight: 500;
-  color: #d97706;
-  flex-shrink: 0;
-}
-[data-theme="dark"] .creator-changes-badge {
-  color: #fbbf24;
-}
-/* Local-overrides-brand badge */
-.creator-shadow-badge {
-  font-size: 0.625rem;
-  font-weight: 600;
-  padding: 2px 0.4375rem;
-  border-radius: 10px;
-  background: rgba(168, 85, 247, 0.1);
-  color: #8b5cf6;
-  border: 1px solid rgba(168, 85, 247, 0.3);
-  cursor: help;
-}
-[data-theme="dark"] .creator-shadow-badge {
-  background: rgba(139, 92, 246, 0.15);
-  color: #a78bfa;
-  border-color: rgba(139, 92, 246, 0.3);
-}
-/* ── Publish / Update button ───────────────────────────────────────────── */
-.creator-upload-wrap { position: relative; }
-.btn-creator-publish {
-  display: flex;
-  align-items: center;
-  gap: 0.3125rem;
-  padding: 0.375rem 0.75rem;
-  border-radius: 7px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  cursor: pointer;
-  background: var(--color-accent-primary);
-  color: #fff;
-  border: none;
-  transition: background-color 0.2s, opacity 0.2s;
-  white-space: nowrap;
-}
-.btn-creator-publish:hover:not(:disabled) {
-  background: var(--color-accent-hover);
-}
-.btn-creator-publish:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-.btn-creator-publish[data-state="success"] { background: var(--color-success, #22c55e); }
-.btn-creator-publish[data-state="error"]   { background: var(--color-error, #ef4444); }
-/* Progress bar (reuse skill-upload-progress-* classes) */
-.creator-upload-wrap .skill-upload-progress-wrap {
-  position: absolute;
-  bottom: -0.1875rem;
-  left: 0; right: 0;
-  height: 2px;
-  background: var(--color-border-primary);
-  border-radius: 1px;
-  overflow: hidden;
-}
-.creator-upload-wrap .skill-upload-progress-bar {
-  height: 100%;
-  background: var(--color-accent-primary);
-  border-radius: 1px;
-  transition: width 0.15s ease;
-}
-.creator-upload-wrap .skill-upload-progress-bar[data-state="success"] { background: var(--color-success, #22c55e); }
-.creator-upload-wrap .skill-upload-progress-bar[data-state="error"]   { background: var(--color-error, #ef4444); }
-/* Iterate button */
-.btn-creator-iterate {
-  display: flex;
-  align-items: center;
-  gap: 0.3125rem;
-  padding: 0.375rem 0.75rem;
-  border-radius: 7px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  cursor: pointer;
-  background: transparent;
-  color: var(--color-text-secondary);
-  border: 1px solid var(--color-border-primary);
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
-  white-space: nowrap;
-}
-.btn-creator-iterate:hover {
-  background: var(--color-bg-hover);
-  color: var(--color-text-primary);
-  border-color: var(--color-border-secondary);
-}
-/* Up-to-date (disabled) button */
-.btn-creator-up-to-date {
-  display: flex;
-  align-items: center;
-  gap: 0.3125rem;
-  padding: 0.375rem 0.75rem;
-  border-radius: 7px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  cursor: not-allowed;
-  background: transparent;
-  color: var(--color-text-disabled, var(--color-text-muted));
-  border: 1px solid var(--color-border-muted, var(--color-border-primary));
-  opacity: 0.55;
-  white-space: nowrap;
-}
-/* ── Promo banner (non-licensed users) ─────────────────────────────────── */
-#creator-promo-banner {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.625rem 0.875rem;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border-primary);
-  border-radius: 8px;
-  font-size: 0.7812rem;
-  color: var(--color-text-secondary);
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
 }
-#creator-promo-banner svg {
-  flex-shrink: 0;
-  color: var(--color-accent-primary);
-  opacity: 0.8;
+.btn-memory-curate:hover,
+.btn-memory-edit:hover {
+  border-color: var(--color-text-primary);
+  background: var(--color-bg-hover);
 }
-#creator-promo-banner a {
-  margin-left: auto;
-  white-space: nowrap;
-  color: var(--color-accent-primary);
-  text-decoration: none;
-  font-weight: 500;
+.btn-memory-delete {
+  color: var(--color-text-primary);
 }
-#creator-promo-banner a:hover {
-  text-decoration: underline;
+.btn-memory-delete:hover {
+  border-color: var(--color-error);
+  color: var(--color-error);
+  background: var(--color-error-bg);
 }
-/* ── Cloud skills lock (non-licensed users) ─────────────────────────────── */
-#creator-cloud-lock {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 0.875rem;
-  border: 1px dashed var(--color-border-primary);
-  border-radius: 8px;
-  font-size: 0.7812rem;
+.btn-memory-expand {
+  min-width: 1.75rem;
+  justify-content: center;
   color: var(--color-text-muted);
 }
-#creator-cloud-lock svg {
-  flex-shrink: 0;
-  opacity: 0.5;
-}
-#creator-cloud-lock a {
-  margin-left: auto;
-  white-space: nowrap;
-  color: var(--color-accent-primary);
-  text-decoration: none;
-  font-weight: 500;
-  opacity: 0.85;
-}
-#creator-cloud-lock a:hover {
-  text-decoration: underline;
-}
-/* ── Create New Skill entry card ───────────────────────────────────────── */
-.creator-new-card {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  padding: 0.875rem 1rem;
+.btn-memory-expand:hover { color: var(--color-text-primary); }
+.btn-memory-expand.expanded svg { transform: rotate(180deg); }
+.btn-memory-expand svg           { transition: transform 0.2s; }
+.memory-card-body {
+  padding: 0.25rem 1rem 0.875rem 1rem;
+  border-top: 1px solid var(--color-border-primary);
   background: var(--color-bg-secondary);
-  border: 1px dashed var(--color-border-primary);
-  border-radius: 8px;
-  cursor: pointer;
   font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  transition: border-color .15s, color .15s, background .15s;
+  line-height: 1.6;
+  color: var(--color-text-primary);
 }
-.creator-new-card:hover {
-  border-color: var(--color-accent-primary);
-  color: var(--color-accent-primary);
-  background: var(--color-accent-bg, rgba(59,130,246,0.04));
+.memory-card-body h1,
+.memory-card-body h2,
+.memory-card-body h3 {
+  margin: 0.625rem 0 0.375rem;
+  font-weight: 600;
 }
-.creator-new-arrow {
-  margin-left: auto;
-  opacity: 0.5;
-  transition: opacity .15s, transform .15s;
+.memory-card-body p  { margin: 0.375rem 0; }
+.memory-card-body ul,
+.memory-card-body ol { margin: 0.25rem 0 0.5rem 1.25rem; padding: 0; }
+.memory-card-body li { margin: 2px 0; }
+.memory-card-body code {
+  background: var(--color-bg-hover);
+  padding: 1px 0.3125rem;
+  border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 0.75rem;
 }
-.creator-new-card:hover .creator-new-arrow {
-  opacity: 1;
-  transform: translateX(3px);
+.memory-card-loading {
+  padding: 0.625rem 0;
+  text-align: center;
+  color: var(--color-text-muted);
+  font-size: 0.75rem;
+  font-style: italic;
 }
-/* ── State messages ────────────────────────────────────────────────────── */
-.creator-loading,
-.creator-empty {
+/* ── Mobile responsive (≤48rem) ─────────────────────────────────────────── */
+/* ── Trash panel · Recently Deleted ────────────────────────────────── */
+.trash-loading,
+.trash-empty {
   text-align: center;
   color: var(--color-text-tertiary);
   font-size: 0.8125rem;
   padding: 1.5rem 0;
 }
-.creator-error {
+.trash-error {
   text-align: center;
   color: var(--color-error, #ef4444);
   font-size: 0.8125rem;
   padding: 1.5rem 0;
 }
-.creator-notice {
-  font-size: 0.75rem;
-  padding: 0.5rem 0.75rem;
-  border-radius: 6px;
-  margin-bottom: 0.25rem;
-}
-.creator-notice-warn {
-  background: rgba(250, 173, 20, 0.1);
-  color: #b8860b;
-  border: 1px solid rgba(250, 173, 20, 0.3);
-}
-[data-theme="dark"] .creator-notice-warn { color: #f5c842; }
-/* ── Trash panel · Recently Deleted ────────────────────────────────── */
 /* Tab switches (file trash / session trash) — mirrors skills-tabs pattern */
 #trash-tabs {
@@ -9803,7 +10002,7 @@ body.setup-mode[data-theme="dark"] {
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid var(--color-border-primary);
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.25rem;
 }
 .trash-tabs-left {
   display: flex;
@@ -9908,11 +10107,68 @@ body.setup-mode[data-theme="dark"] {
   opacity: .5;
   cursor: not-allowed;
 }
+/* Skeleton card wrapper — uses global .skel for lines + animation */
+.trash-session-skeleton {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 10px;
+  padding: 0.75rem 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.trash-session-skeleton-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.trash-skeleton-actions {
+  display: flex;
+  gap: 0.375rem;
+  flex-shrink: 0;
+}
+.trash-skeleton-btn {
+  width: 3.5rem;
+  height: 1.625rem;
+  border-radius: 5px;
+}
+.trash-session-hint {
+  margin: -0.25rem 0;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
 .trash-summary {
   font-size: 0.6875rem;
   color: var(--color-text-muted);
   margin-right: auto;
 }
+.trash-filter-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+.trash-filter-chip {
+  font-size: 0.6875rem;
+  padding: 0.2rem 0.55rem;
+  border-radius: 5px;
+  border: 1px solid var(--color-border-primary);
+  background: transparent;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: background 0.14s, color 0.14s, border-color 0.14s;
+}
+.trash-filter-chip:hover {
+  border-color: var(--color-accent-primary);
+  color: var(--color-text-primary);
+}
+.trash-filter-chip.active {
+  background: var(--color-accent-primary);
+  border-color: var(--color-accent-primary);
+  color: #fff;
+}
 .trash-actions {
   display: flex;
   align-items: center;
@@ -11634,16 +11890,16 @@ body.setup-mode[data-theme="dark"] {
 .share-modal {
   position: relative;
   width: 100%;
-  max-width: 660px;
+  max-width: 780px;
   max-height: 90vh;
   overflow-y: auto;
   background: var(--color-bg-card);
   border: 1px solid var(--color-border-primary);
   border-radius: var(--radius-lg, 14px);
-  box-shadow: 0 18px 48px rgba(15, 18, 28, 0.22);
-  padding: 24px;
-  transform: translateY(8px) scale(.98);
-  transition: transform .18s ease;
+  box-shadow: 0 24px 64px rgba(15, 18, 28, 0.28);
+  padding: 28px;
+  transform: translateY(10px) scale(.97);
+  transition: transform .22s ease;
 }
 .share-overlay.open .share-modal { transform: translateY(0) scale(1); }
@@ -11657,59 +11913,81 @@ body.setup-mode[data-theme="dark"] {
   line-height: 1;
   color: var(--color-text-muted);
   cursor: pointer;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+.share-close:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-hover, rgba(0,0,0,0.07));
 }
-.share-close:hover { color: var(--color-text-primary); }
 .share-title {
   margin: 0 0 4px;
-  font-size: 1.0625rem;
+  font-size: 1.125rem;
   font-weight: 700;
   color: var(--color-text-primary);
 }
 .share-subtitle {
-  margin: 0 0 16px;
+  margin: 0 0 20px;
   font-size: 0.8125rem;
   color: var(--color-text-tertiary);
 }
 .share-body {
   display: flex;
-  gap: 20px;
-  align-items: flex-start;
+  gap: 24px;
+  align-items: stretch;
 }
 .share-controls {
   flex: 1;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.share-actions {
+  margin-top: auto;
 }
 .share-poster-wrap {
-  display: flex;
-  justify-content: center;
   flex-shrink: 0;
+  display: flex;
 }
 .share-poster-img {
-  width: 220px;
+  width: 250px;
+  object-fit: cover;
   border-radius: var(--radius-md, 10px);
-  box-shadow: 0 6px 18px rgba(15, 18, 28, 0.16);
+  box-shadow: 0 8px 28px rgba(15, 18, 28, 0.22);
+  cursor: pointer;
+  transition: box-shadow .2s ease;
+}
+.share-poster-img:hover {
+  box-shadow: 0 12px 36px rgba(15, 18, 28, 0.3);
 }
-@media (max-width: 560px) {
+@media (max-width: 620px) {
   .share-body { flex-direction: column; align-items: stretch; }
   .share-poster-wrap { margin-bottom: 4px; }
-  .share-poster-img { width: 180px; }
+  .share-poster-img { width: 100%; height: 200px; }
 }
 .share-row-label {
-  font-size: 0.75rem;
+  font-size: 0.6875rem;
   font-weight: 600;
-  color: var(--color-text-tertiary);
+  letter-spacing: .04em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
 }
 .share-theme-row {
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  margin-bottom: 14px;
+  gap: 8px;
+  margin-bottom: 16px;
 }
 .share-theme-chips {
   display: flex;
@@ -11717,29 +11995,46 @@ body.setup-mode[data-theme="dark"] {
 }
 .share-theme-chip {
   flex: 1;
-  height: 34px;
+  height: 40px;
   border: 2px solid transparent;
-  border-radius: var(--radius-sm, 6px);
+  border-radius: var(--radius-sm, 8px);
   cursor: pointer;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: border-color .12s ease, transform .12s ease;
+  gap: 6px;
+  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
+  box-shadow: 0 2px 6px rgba(0,0,0,.08);
+}
+.share-theme-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.14); }
+.share-theme-chip.is-active {
+  border-color: var(--color-button-primary);
+  box-shadow: 0 0 0 3px rgba(var(--color-button-primary-rgb, 124,58,237), .18);
 }
-.share-theme-chip:hover { transform: translateY(-1px); }
-.share-theme-chip.is-active { border-color: var(--color-button-primary); }
 .share-theme-name {
   font-size: 0.6875rem;
   font-weight: 700;
-  color: rgba(0,0,0,.55);
-  text-shadow: 0 1px 0 rgba(255,255,255,.4);
   pointer-events: none;
 }
+.share-theme-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  pointer-events: none;
+  box-shadow: 0 0 0 1.5px rgba(255,255,255,.3);
+}
 .share-theme-chip[data-theme="geek"] .share-theme-name {
   color: rgba(255,255,255,.92);
   text-shadow: 0 1px 2px rgba(0,0,0,.4);
 }
+.share-theme-chip[data-theme="light"] .share-theme-name {
+  color: rgba(15,23,42,.72);
+}
+.share-theme-chip[data-theme="warm"] .share-theme-name {
+  color: rgba(124,45,18,.85);
+}
 .share-periods {
   display: inline-flex;
@@ -11771,7 +12066,7 @@ body.setup-mode[data-theme="dark"] {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 8px;
-  margin-bottom: 14px;
+  margin-bottom: 16px;
 }
 .share-platform {
   padding: 9px 4px;
@@ -11779,22 +12074,31 @@ body.setup-mode[data-theme="dark"] {
   border-radius: var(--radius-sm, 6px);
   background: var(--color-bg-primary);
   color: var(--color-text-secondary);
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
   font-weight: 600;
   cursor: pointer;
-  transition: background .12s ease, border-color .12s ease, color .12s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
 }
 .share-platform:hover {
   background: var(--color-bg-hover);
   border-color: var(--color-border-strong);
+  transform: translateY(-1px);
 }
 .share-platform.is-active {
   background: var(--color-button-primary);
   color: var(--color-button-primary-text);
   border-color: var(--color-button-primary);
 }
+.share-platform-icon {
+  font-size: 1.125rem;
+  line-height: 1;
+}
-.share-editor { margin-bottom: 14px; }
+.share-editor { margin-bottom: 16px; }
 .share-editor-head {
   display: flex;
   align-items: center;
@@ -11809,25 +12113,29 @@ body.setup-mode[data-theme="dark"] {
   font-weight: 600;
   cursor: pointer;
   padding: 2px 4px;
+  border-radius: 4px;
+  transition: background .1s ease;
 }
-.share-shuffle:hover { text-decoration: underline; }
+.share-shuffle:hover { background: var(--color-bg-hover); }
 .share-text {
   width: 100%;
   box-sizing: border-box;
   resize: vertical;
-  min-height: 72px;
+  min-height: 80px;
   padding: 10px 12px;
   border: 1px solid var(--color-border-primary);
   border-radius: var(--radius-sm, 6px);
   background: var(--color-bg-primary);
   color: var(--color-text-primary);
   font-size: 0.8125rem;
-  line-height: 1.5;
+  line-height: 1.6;
   font-family: inherit;
+  transition: border-color .12s ease;
 }
 .share-text:focus {
   outline: none;
   border-color: var(--color-button-primary);
+  box-shadow: 0 0 0 2px rgba(var(--color-button-primary-rgb, 124,58,237), .12);
 }
 .share-actions {
@@ -11835,28 +12143,44 @@ body.setup-mode[data-theme="dark"] {
   flex-wrap: wrap;
   gap: 8px;
 }
-.share-btn-primary, .share-btn-secondary {
-  padding: 10px;
-  border-radius: var(--radius-sm, 6px);
-  font-size: 0.8125rem;
-  font-weight: 600;
-  cursor: pointer;
-  border: 1px solid var(--color-border-primary);
-}
 .share-btn-primary {
   flex: 1 1 100%;
+  padding: 12px 16px;
+  border-radius: var(--radius-sm, 8px);
+  font-size: 0.9375rem;
+  font-weight: 700;
+  cursor: pointer;
+  border: none;
   background: var(--color-button-primary);
   color: var(--color-button-primary-text);
-  border-color: var(--color-button-primary);
+  letter-spacing: .01em;
+  transition: background .14s ease, transform .1s ease, box-shadow .14s ease;
+  box-shadow: 0 2px 8px rgba(var(--color-button-primary-rgb, 124,58,237), .3);
 }
-.share-btn-primary:hover { background: var(--color-button-primary-hover); }
+.share-btn-primary:hover {
+  background: var(--color-button-primary-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 14px rgba(var(--color-button-primary-rgb, 124,58,237), .4);
+}
+.share-btn-primary:active { transform: translateY(0); }
 .share-btn-secondary {
-  flex: 1 1 calc(50% - 4px);
-  min-width: 90px;
+  flex: 1 1 calc(33% - 6px);
+  min-width: 80px;
+  padding: 9px 8px;
+  border-radius: var(--radius-sm, 6px);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+  border: 1px solid var(--color-border-primary);
   background: var(--color-bg-primary);
   color: var(--color-text-secondary);
+  transition: background .12s ease, border-color .12s ease, color .12s ease;
+}
+.share-btn-secondary:hover {
+  background: var(--color-bg-hover);
+  border-color: var(--color-border-strong);
+  color: var(--color-text-primary);
 }
-.share-btn-secondary:hover { background: var(--color-bg-hover); }
 #share-toggle-header svg { display: block; }
@@ -12136,10 +12460,9 @@ body.setup-mode[data-theme="dark"] {
     gap: 0.75rem;
   }
-  /* ── Billing / Trash / Creator pages ── */
+  /* ── Billing / Trash pages ── */
   #billing-body { padding: 1rem 1rem 1rem; }
   #trash-body   { padding: 1rem 1rem 1rem; }
-  #creator-body { padding: 1rem 1rem 1rem; }
   .billing-heatmap-row { grid-template-columns: 1fr; }
@@ -12297,5 +12620,41 @@ body.setup-mode[data-theme="dark"] {
   #workspace-overlay.active {
     display: block;
   }
+  /* ── New-session page: mobile ── */
+  #welcome.new-session-page {
+    position: fixed;
+    top: 3rem;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    padding: 0;
+    justify-content: flex-start;
+    height: auto;
+  }
+  .new-session-inner {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .new-session-spacer {
+    display: none;
+  }
+  .new-session-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 1.25rem 1rem 1rem;
+    max-width: 100%;
+  }
+  .new-session-composer {
+    flex: none;
+    position: static;
+    padding: 0.75rem 1rem 1rem;
+    border-top: 1px solid var(--color-border-subtle);
+    background: var(--color-bg-primary);
+  }
 }