@chrysb/alphaclaw 0.6.2-beta.6 → 0.7.0-beta.0

package/lib/public/css/agents.css

@@ -1,34 +1,63 @@
 /* ── Agents detail layout ────────────────────── */
 
 .app-content-pane.agents-pane {
-  padding: 0;
+  overflow: hidden;
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: 0;
 }
 
 /* ── Detail panel ────────────────────────────── */
 
 .agents-detail-panel {
   height: 100%;
-  overflow-y: auto;
-  padding: 0 32px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.agents-detail-header-area {
+  padding: 8px 32px 16px;
 }
 
-.agents-detail-inner {
+.agents-detail-header-area-inner {
   max-width: 42rem;
   width: 100%;
   margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
 }
 
 .agents-detail-header {
-  padding-top: 16px;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 12px;
 }
 
+.agents-detail-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 32px;
+}
+
+.agents-detail-content {
+  max-width: 42rem;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 0 24px;
+}
+
+@media (max-width: 768px) {
+  .agents-detail-header-area {
+    padding: 16px 14px 0;
+  }
+
+  .agents-detail-body {
+    padding: 0 14px;
+  }
+}
+
 .agents-detail-header-title {
   font-size: 16px;
   font-weight: 600;
@@ -72,11 +101,6 @@
   border-bottom-color: var(--accent);
 }
 
-.agents-detail-content {
-  flex: 1;
-  padding: 16px 0;
-}
-
 /* ── Empty state ─────────────────────────────── */
 
 .agents-empty-state {

package/lib/public/css/cron.css

@@ -1,5 +1,6 @@
 .app-content-pane.cron-pane {
-  padding: 0;
+  padding: 24px 32px 12px;
+  overflow: hidden;
 }
 
 .cron-tab-shell {
@@ -10,8 +11,7 @@
 }
 
 .cron-tab-header {
-  padding: 16px 0 12px;
-  border-bottom: 1px solid var(--border);
+  padding: 0 0 16px;
 }
 
 .cron-tab-header-content {
@@ -33,13 +33,28 @@
 }
 
 .cron-tab-main-content {
-  width: min(100% - 40px, 672px);
+  width: 100%;
+  max-width: 672px;
   margin-left: auto;
   margin-right: auto;
   padding: 0 0 24px;
   min-height: 100%;
 }
 
+.cron-tab-main-content .cron-detail-content {
+  padding-top: 8px;
+}
+
+@media (max-width: 768px) {
+  .app-content-pane.cron-pane {
+    padding: 0 14px 12px;
+  }
+
+  .cron-tab-header {
+    padding: 0 0 12px;
+  }
+}
+
 .cron-tab-selector-shell {
   position: relative;
   width: min(100%, 320px);
@@ -370,6 +385,22 @@
   border-bottom: 1px solid var(--border);
   border-right: 1px solid var(--border);
   background: rgba(0, 0, 0, 0.15);
+  position: sticky;
+  left: 0;
+  z-index: 2;
+}
+
+.cron-calendar-grid-header .cron-calendar-hour-cell {
+  top: 0;
+  z-index: 3;
+}
+
+.cron-calendar-grid-wrap {
+  position: relative;
+}
+
+.cron-calendar-grid-row .cron-calendar-hour-cell {
+  box-shadow: 1px 0 0 var(--border);
 }
 
 .cron-calendar-grid-cell {

package/lib/public/css/shell.css

@@ -63,6 +63,62 @@
   padding: 0;
 }
 
+/* ── Fixed-header pane shell ────────────────────── */
+
+.app-content-pane.ac-fixed-header-pane {
+  overflow: hidden;
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+}
+
+.ac-pane-shell {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.ac-pane-header {
+  padding: 16px 32px 16px;
+}
+
+.ac-pane-header-content {
+  width: 100%;
+  max-width: 672px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.ac-pane-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 32px;
+}
+
+.ac-pane-body-content {
+  width: 100%;
+  max-width: 672px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-bottom: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+@media (max-width: 768px) {
+  .ac-pane-header {
+    padding: 16px 14px 12px;
+  }
+
+  .ac-pane-body {
+    padding: 0 14px;
+  }
+}
+
 /* ── Sidebar ───────────────────────────────────── */
 
 .app-sidebar {
@@ -336,6 +392,7 @@
   }
   .app-content-pane {
     padding: 0 14px 12px;
+    top: 52px;
   }
 
   .sidebar-resizer {
@@ -346,7 +403,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    position: sticky;
+    position: absolute;
+    left: 0;
+    right: 0;
     top: 0;
     z-index: 15;
     background: var(--panel-bg-contrast);
@@ -355,7 +414,7 @@
     border-radius: 0;
     min-height: 52px;
     padding: 8px 14px;
-    margin: 0 -14px 10px;
+    margin: 0;
   }
 
   .mobile-topbar.is-scrolled {

package/lib/public/css/theme.css

@@ -641,7 +641,8 @@ textarea:focus {
 }
 
 .ac-pop-actions-hidden {
-  display: none;
+  visibility: hidden;
+  pointer-events: none;
 }
 
 .ac-pop-actions-in > * {

package/lib/public/js/app.js

@@ -77,6 +77,8 @@ const App = () => {
 
   const isAgentsRoute = location.startsWith("/agents");
   const isCronRoute = location.startsWith("/cron");
+  const isEnvarsRoute = location.startsWith("/envars");
+  const isModelsRoute = location.startsWith("/models");
   const selectedAgentId = (() => {
     const match = location.match(/^\/agents\/([^/]+)/);
     return match ? decodeURIComponent(match[1]) : "";
@@ -211,6 +213,31 @@ const App = () => {
       />
 
       <div class="app-content">
+        <div
+          class=${`mobile-topbar ${shellState.mobileTopbarScrolled ? "is-scrolled" : ""}`}
+        >
+          <button
+            class="mobile-topbar-menu"
+            onclick=${() =>
+              shellActions.setMobileSidebarOpen((open) => !open)}
+            aria-label="Open menu"
+            aria-expanded=${shellState.mobileSidebarOpen ? "true" : "false"}
+          >
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 16 16"
+              fill="currentColor"
+            >
+              <path
+                d="M2 3.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H2.75A.75.75 0 012 3.75zm0 4.25a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H2.75A.75.75 0 012 8zm0 4.25a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z"
+              />
+            </svg>
+          </button>
+          <span class="mobile-topbar-title">
+            <span style="color: var(--accent)">alpha</span>claw
+          </span>
+        </div>
         <div
           class="app-content-pane browse-pane"
           style=${{ display: browseState.isBrowseRoute ? "block" : "none" }}
@@ -265,38 +292,25 @@ const App = () => {
             onSetLocation=${setLocation}
           />
         </div>
+        <div
+          class="app-content-pane ac-fixed-header-pane"
+          style=${{ display: isEnvarsRoute ? "block" : "none" }}
+        >
+          <${EnvarsRoute} onRestartRequired=${controllerActions.setRestartRequired} />
+        </div>
+        <div
+          class="app-content-pane ac-fixed-header-pane"
+          style=${{ display: isModelsRoute ? "block" : "none" }}
+        >
+          <${ModelsRoute} onRestartRequired=${controllerActions.setRestartRequired} />
+        </div>
         <div
           class="app-content-pane"
           onscroll=${shellActions.handlePaneScroll}
-          style=${{ display: browseState.isBrowseRoute || isAgentsRoute || isCronRoute ? "none" : "block" }}
+          style=${{ display: browseState.isBrowseRoute || isAgentsRoute || isCronRoute || isEnvarsRoute || isModelsRoute ? "none" : "block" }}
         >
-          <div
-            class=${`mobile-topbar ${shellState.mobileTopbarScrolled ? "is-scrolled" : ""}`}
-          >
-            <button
-              class="mobile-topbar-menu"
-              onclick=${() =>
-                shellActions.setMobileSidebarOpen((open) => !open)}
-              aria-label="Open menu"
-              aria-expanded=${shellState.mobileSidebarOpen ? "true" : "false"}
-            >
-              <svg
-                width="18"
-                height="18"
-                viewBox="0 0 16 16"
-                fill="currentColor"
-              >
-                <path
-                  d="M2 3.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H2.75A.75.75 0 012 3.75zm0 4.25a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H2.75A.75.75 0 012 8zm0 4.25a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z"
-                />
-              </svg>
-            </button>
-            <span class="mobile-topbar-title">
-              <span style="color: var(--accent)">alpha</span>claw
-            </span>
-          </div>
           <div class="max-w-2xl w-full mx-auto">
-            ${!browseState.isBrowseRoute && !isAgentsRoute && !isCronRoute
+            ${!browseState.isBrowseRoute && !isAgentsRoute && !isCronRoute && !isEnvarsRoute && !isModelsRoute
               ? html`
                   <${Switch}>
                     <${Route} path="/general">
@@ -336,9 +350,6 @@ const App = () => {
                     <${Route} path="/telegram">
                       <${RouteRedirect} to="/telegram/default" />
                     </${Route}>
-                    <${Route} path="/models">
-                      <${ModelsRoute} onRestartRequired=${controllerActions.setRestartRequired} />
-                    </${Route}>
                     <${Route} path="/providers">
                       <${RouteRedirect} to="/models" />
                     </${Route}>
@@ -368,9 +379,6 @@ const App = () => {
                     <${Route} path="/usage">
                       <${UsageRoute} onSetLocation=${setLocation} />
                     </${Route}>
-                    <${Route} path="/envars">
-                      <${EnvarsRoute} onRestartRequired=${controllerActions.setRestartRequired} />
-                    </${Route}>
                     <${Route} path="/webhooks/:hookName">
                       ${(params) => html`
                         <${WebhooksRoute}

package/lib/public/js/components/agents-tab/agent-detail-panel.js

@@ -1,5 +1,5 @@
 import { h } from "https://esm.sh/preact";
-import { useState, useCallback } from "https://esm.sh/preact/hooks";
+import { useState, useCallback, useMemo } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { ActionButton } from "../action-button.js";
 import { Badge } from "../badge.js";
@@ -64,6 +64,12 @@ export const AgentDetailPanel = ({
 
   const isSaving = saving || savingTools;
 
+  const toolsSummary = useMemo(() => ({
+    profile: tools.profile,
+    enabledCount: (tools.toolStates || []).filter((t) => t.enabled).length,
+    totalCount: (tools.toolStates || []).length,
+  }), [tools.profile, tools.toolStates]);
+
   if (!agent) {
     return html`
       <div class="agents-detail-panel">
@@ -76,57 +82,61 @@ export const AgentDetailPanel = ({
 
   return html`
     <div class="agents-detail-panel">
-      <div class="agents-detail-inner">
-        <div class="agents-detail-header">
-          <div class="min-w-0">
-            <div class="flex items-center gap-2 min-w-0">
-              <span class="agents-detail-header-title">
-                ${agent.name || agent.id}
-              </span>
-              <button
-                type="button"
-                class="text-gray-500 hover:text-gray-300 transition-colors p-0.5 -ml-0.5"
-                onclick=${() => onEdit(agent)}
-                title="Edit agent name"
-              >
-                <${PencilIcon} />
-              </button>
-              ${agent.default
-                ? html`<${Badge} tone="cyan">Default</${Badge}>`
-                : null}
-            </div>
-            <div class="mt-1 flex flex-wrap items-center gap-x-1.5 gap-y-1 min-w-0 text-xs text-gray-500">
-              <span class="font-mono">${agent.id}</span>
+      <div class="agents-detail-header-area">
+        <div class="agents-detail-header-area-inner">
+          <div class="agents-detail-header">
+            <div class="min-w-0">
+              <div class="flex items-center gap-2 min-w-0">
+                <span class="agents-detail-header-title">
+                  ${agent.name || agent.id}
+                </span>
+                <button
+                  type="button"
+                  class="text-gray-500 hover:text-gray-300 transition-colors p-0.5 -ml-0.5"
+                  onclick=${() => onEdit(agent)}
+                  title="Edit agent name"
+                >
+                  <${PencilIcon} />
+                </button>
+                ${agent.default
+                  ? html`<${Badge} tone="cyan">Default</${Badge}>`
+                  : null}
+              </div>
+              <div class="mt-1 flex flex-wrap items-center gap-x-1.5 gap-y-1 min-w-0 text-xs text-gray-500">
+                <span class="font-mono">${agent.id}</span>
+              </div>
             </div>
+            <${PopActions} visible=${tools.dirty}>
+              <${ActionButton}
+                onClick=${tools.reset}
+                disabled=${isSaving}
+                tone="secondary"
+                size="sm"
+                idleLabel="Cancel"
+                className="text-xs"
+              />
+              <${ActionButton}
+                onClick=${handleSaveTools}
+                disabled=${isSaving}
+                loading=${isSaving}
+                loadingMode="inline"
+                tone="primary"
+                size="sm"
+                idleLabel="Save changes"
+                loadingLabel="Saving…"
+                className="text-xs"
+              />
+            </${PopActions}>
           </div>
-          <${PopActions} visible=${tools.dirty}>
-            <${ActionButton}
-              onClick=${tools.reset}
-              disabled=${isSaving}
-              tone="secondary"
-              size="sm"
-              idleLabel="Cancel"
-              className="text-xs"
-            />
-            <${ActionButton}
-              onClick=${handleSaveTools}
-              disabled=${isSaving}
-              loading=${isSaving}
-              loadingMode="inline"
-              tone="primary"
-              size="sm"
-              idleLabel="Save changes"
-              loadingLabel="Saving…"
-              className="text-xs"
-            />
-          </${PopActions}>
+          <${PillTabs}
+            tabs=${kDetailTabs}
+            activeTab=${activeTab}
+            onSelectTab=${onSelectTab}
+            className="flex items-center gap-2 pt-6"
+          />
         </div>
-        <${PillTabs}
-          tabs=${kDetailTabs}
-          activeTab=${activeTab}
-          onSelectTab=${onSelectTab}
-          className="flex items-center gap-2 pt-6"
-        />
+      </div>
+      <div class="agents-detail-body">
         <div class="agents-detail-content">
           ${activeTab === "overview"
             ? html`
@@ -134,10 +144,12 @@ export const AgentDetailPanel = ({
                   agent=${agent}
                   agents=${agents}
                   saving=${saving}
+                  toolsSummary=${toolsSummary}
                   onUpdateAgent=${onUpdateAgent}
                   onSetLocation=${onSetLocation}
                   onOpenWorkspace=${onOpenWorkspace}
                   onSwitchToModels=${() => onSetLocation("/models")}
+                  onSwitchToTools=${() => onSelectTab("tools")}
                   onSetDefault=${onSetDefault}
                   onDelete=${onDelete}
                 />

package/lib/public/js/components/agents-tab/agent-overview/index.js

@@ -3,6 +3,7 @@ import htm from "https://esm.sh/htm";
 import { ChannelOperationsPanel } from "../../channel-operations-panel.js";
 import { ManageCard } from "./manage-card.js";
 import { AgentModelCard } from "./model-card.js";
+import { AgentToolsCard } from "./tools-card.js";
 import { WorkspaceCard } from "./workspace-card.js";
 
 const html = htm.bind(h);
@@ -11,10 +12,12 @@ export const AgentOverview = ({
   agent = {},
   agents = [],
   saving = false,
+  toolsSummary = {},
   onUpdateAgent = async () => {},
   onSetLocation = () => {},
   onOpenWorkspace = () => {},
   onSwitchToModels = () => {},
+  onSwitchToTools = () => {},
   onSetDefault = () => {},
   onDelete = () => {},
 }) => {
@@ -33,6 +36,12 @@ export const AgentOverview = ({
         onUpdateAgent=${onUpdateAgent}
         onSwitchToModels=${onSwitchToModels}
       />
+      <${AgentToolsCard}
+        profile=${toolsSummary.profile || "full"}
+        enabledCount=${toolsSummary.enabledCount || 0}
+        totalCount=${toolsSummary.totalCount || 0}
+        onSwitchToTools=${onSwitchToTools}
+      />
       <${ChannelOperationsPanel}
         agent=${agent}
         agents=${agents}

package/lib/public/js/components/agents-tab/agent-overview/tools-card.js

@@ -0,0 +1,54 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { kProfileLabels } from "../agent-tools/tool-catalog.js";
+
+const html = htm.bind(h);
+
+export const AgentToolsCard = ({
+  profile = "full",
+  enabledCount = 0,
+  totalCount = 0,
+  onSwitchToTools = () => {},
+}) => {
+  const profileLabel = kProfileLabels[profile] || profile;
+
+  return html`
+    <div class="bg-surface border border-border rounded-xl p-4">
+      <h2 class="card-label mb-3">Tools</h2>
+      <div
+        class="flex items-center justify-between gap-3 cursor-pointer hover:bg-white/5 -mx-2 px-2 py-1.5 rounded-lg transition-colors"
+        role="button"
+        tabindex="0"
+        onclick=${onSwitchToTools}
+        onKeyDown=${(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onSwitchToTools();
+          }
+        }}
+      >
+        <span class="font-medium text-sm">${profileLabel}</span>
+        <span class="flex items-center gap-2 shrink-0">
+          <span class="text-xs text-gray-500">
+            ${enabledCount}/${totalCount} enabled
+          </span>
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 16 16"
+            fill="none"
+            class="text-gray-600"
+          >
+            <path
+              d="M6 3.5L10.5 8L6 12.5"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </span>
+      </div>
+    </div>
+  `;
+};