@stigmer/react 3.1.17 → 3.2.0

package/src/session/useSessionFileChanges.ts

@@ -1,23 +1,17 @@
 "use client";
 
 import { useMemo } from "react";
-import { create } from "@bufbuild/protobuf";
 import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
 import type { FileChange } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
-import { FileChangeSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
-import {
-  FileChangeCaptureLevel,
-  FileChangeType,
-} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
-import { displayFileChangeSets, toDisplayFileChange } from "@stigmer/sdk";
+import { deriveExecutionFileChanges } from "../execution/deriveExecutionFileChanges.js";
 
 /** Return value of {@link useSessionFileChanges}. */
 export interface UseSessionFileChangesReturn {
   /**
    * One {@link FileChange} per file touched in the session — the *net*
-   * change for that path (see the net-diff note below) — ordered for a
-   * file-list (modified, then created/renamed, then deleted; alphabetical
-   * within each group).
+   * change for that path (see {@link deriveExecutionFileChanges} for the
+   * net-diff semantics) — ordered for a file-list (modified, then
+   * created/renamed, then deleted; alphabetical within each group).
    */
   readonly fileChanges: readonly FileChange[];
   /** `true` when at least one file was changed across all executions. */
@@ -34,39 +28,15 @@ export interface UseSessionFileChangesReturn {
  * file changes in the transcript (stamped edit rows + the per-turn decision
  * bar) and does not consume this hook.
  *
- * **Source (ledger-first).** Under apply-then-review the changes live in the
- * file-review ledger; {@link displayFileChangeSets} reads the server's live
- * projection or folds the durable ledger for a terminal execution (whose
- * projection is nil), and each captured change is projected onto the display
- * {@link FileChange} via {@link toDisplayFileChange}. A pre-capture
- * (legacy) execution has no ledger, so it falls back to the tool-call-coupled
- * `ToolCall.file_changes` (#186; removed in a later slice with that field). The
- * two sources are mutually exclusive per execution, so there is no double count.
- *
- * **Traversal.** The ledger is execution-scoped and already includes sub-agent
- * captures (DD-19), so the primary path is one pass per execution. The legacy
- * fallback walks the same surfaces the server-side approval recompute and
- * `MessageThread` walk: `status.messages[].toolCalls` **and**
- * `status.subAgentExecutions[].messages[].toolCalls`. Executions are visited in
- * chronological order, so each path's change list is chronological.
- *
- * **Net-diff (not latest-wins).** `useSessionWriteBacks`/`useSessionArtifacts`
- * dedup by "latest wins" because each entry is a *snapshot* (a PR; a file's
- * final bytes). A {@link FileChange} is a *delta* — an agent often rewrites the
- * same file several times in a turn, and showing only the last edit's diff
- * would misrepresent what changed. So changes to the same path are reduced to a
- * single net change: `before` from the first change, `after` from the last.
- * Because a WHOLE_FILE `after` is a complete file snapshot, `first.before →
- * last.after` is exactly the net change. A group with one change (the common
- * case) is passed through untouched; multi-edit groups synthesize a net
- * {@link FileChange} so every consumer speaks one proto type (DD-007).
- *
- * Counts and unified diffs for whole-file captures stay derivable by the
- * presentation layer (the runner emits 0/"" sentinels), matching the contract
- * the SDK `tool-view` established.
+ * A thin memoizing wrapper over {@link deriveExecutionFileChanges} — the
+ * shared execution-domain core that also powers the workflow panel's Changes
+ * facet (`useWorkflowExecutionFileChanges`). The source (ledger-first via
+ * `displayFileChangeSets`), the net-diff collapse, and the file-list ordering
+ * are all documented on the core.
  *
  * @param executions - All executions for a session, in chronological order.
- *   Pass both completed and active-stream executions.
+ *   Pass both completed and active-stream executions. Ordering matters: the
+ *   net collapse anchors on each path's first and last change.
  *
  * @example
  * ```tsx
@@ -86,32 +56,7 @@ export function useSessionFileChanges(
   executions: readonly AgentExecution[],
 ): UseSessionFileChangesReturn {
   return useMemo(() => {
-    // Path -> chronological list of raw changes to that path.
-    const groups = new Map<string, FileChange[]>();
-    // Preserve first-seen path order as a stable tiebreaker before sorting.
-    const collect = (change: FileChange) => {
-      const key = change.path || change.absolutePath;
-      if (!key) return;
-      const list = groups.get(key);
-      if (list) list.push(change);
-      else groups.set(key, [change]);
-    };
-
-    for (const execution of executions) {
-      // The file-review ledger is the single source under apply-then-review: the
-      // display seam reads the live projection or folds the durable ledger for a
-      // terminal execution, and the execution-scoped ledger already covers
-      // sub-agent captures (DD-19), so one pass suffices. Each CapturedFileChange
-      // is projected onto the display FileChange the net-collapse + renderer speak.
-      const capturedChanges = displayFileChangeSets(execution.status).flatMap(
-        (set) => set.changes,
-      );
-      for (const captured of capturedChanges) collect(toDisplayFileChange(captured));
-    }
-
-    const fileChanges = Array.from(groups.values(), netChange);
-    fileChanges.sort(fileChangeComparator);
-
+    const fileChanges = deriveExecutionFileChanges(executions);
     return {
       fileChanges,
       hasFileChanges: fileChanges.length > 0,
@@ -119,89 +64,3 @@ export function useSessionFileChanges(
     };
   }, [executions]);
 }
-
-/**
- * Reduces a path's chronological change list to a single net change.
- * A one-change group is returned as-is (the common path, no allocation);
- * multi-edit groups synthesize a net {@link FileChange}.
- */
-function netChange(changes: FileChange[]): FileChange {
-  if (changes.length === 1) return changes[0];
-
-  const first = changes[0];
-  const last = changes[changes.length - 1];
-  const changeType = netChangeType(first, last);
-
-  // Whole-file only when both chosen sides come from whole-file captures;
-  // otherwise fall back to the last change's hunk diff. A path edited by a
-  // single harness won't mix levels — this just stays honest if it ever does.
-  const wholeFile =
-    first.captureLevel === FileChangeCaptureLevel.WHOLE_FILE &&
-    last.captureLevel === FileChangeCaptureLevel.WHOLE_FILE;
-
-  if (wholeFile) {
-    return create(FileChangeSchema, {
-      path: last.path,
-      absolutePath: last.absolutePath,
-      changeType,
-      captureLevel: FileChangeCaptureLevel.WHOLE_FILE,
-      before: first.before,
-      after: last.after,
-      renameFrom: changeType === FileChangeType.RENAME ? first.renameFrom : "",
-    });
-  }
-
-  return create(FileChangeSchema, {
-    path: last.path,
-    absolutePath: last.absolutePath,
-    changeType,
-    captureLevel: FileChangeCaptureLevel.HUNK_ONLY,
-    unifiedDiff: last.unifiedDiff,
-    linesAdded: last.linesAdded,
-    linesRemoved: last.linesRemoved,
-    renameFrom: changeType === FileChangeType.RENAME ? first.renameFrom : "",
-  });
-}
-
-/**
- * Reconciles the net `change_type` of a path from its first and last change.
- *
- * Intent: the badge should describe the file's journey across the *whole*
- * session, anchored on its two endpoints, in this precedence:
- *
- * 1. Ends deleted (`last` is DELETE) → DELETE. The file is gone, regardless of
- *    how it got there — this includes create-then-delete, which we deliberately
- *    surface as DELETE rather than hiding the path. (`before` then comes from
- *    the first change, which for a created-then-deleted file is empty, so the
- *    diff reads as the removal of whatever briefly existed.)
- * 2. Started created (`first` is CREATE) and still exists → CREATE. A file born
- *    this session and later modified is, on net, a new file.
- * 3. Started renamed (`first` is RENAME) and still exists → RENAME, carrying the
- *    original `rename_from` so the move is preserved across later edits.
- * 4. Otherwise → MODIFY (the common multi-edit case).
- */
-function netChangeType(first: FileChange, last: FileChange): FileChangeType {
-  if (last.changeType === FileChangeType.DELETE) return FileChangeType.DELETE;
-  if (first.changeType === FileChangeType.CREATE) return FileChangeType.CREATE;
-  if (first.changeType === FileChangeType.RENAME) return FileChangeType.RENAME;
-  return FileChangeType.MODIFY;
-}
-
-// Most-actionable first (modified), then additions (create/rename), then
-// deletions — mirroring GitHub's file-list convention — alphabetical within
-// each group so the list is stable and scannable.
-const CHANGE_TYPE_ORDER: Readonly<Record<FileChangeType, number>> = {
-  [FileChangeType.MODIFY]: 0,
-  [FileChangeType.CREATE]: 1,
-  [FileChangeType.RENAME]: 1,
-  [FileChangeType.DELETE]: 2,
-  [FileChangeType.UNSPECIFIED]: 3,
-};
-
-function fileChangeComparator(a: FileChange, b: FileChange): number {
-  const order =
-    (CHANGE_TYPE_ORDER[a.changeType] ?? 3) -
-    (CHANGE_TYPE_ORDER[b.changeType] ?? 3);
-  if (order !== 0) return order;
-  return a.path.localeCompare(b.path, undefined, { sensitivity: "base" });
-}

package/src/session/useSessionPanel.ts

@@ -4,14 +4,13 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import type { ExecutionArtifact } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
 import { isTerminalPhase } from "../execution/execution-phases.js";
-import type { SelectedThreadItem } from "../internal/store/selection-store.js";
 import {
   useWorkspaceEditorsStoreRef,
   type OpenFileOptions,
   type WorkspaceEditorsStore,
 } from "../internal/store/index.js";
 import { PLAN_DOCUMENT_ENTRY_ID, PLAN_DOCUMENT_PATH } from "./plan-document.js";
-import { ARTIFACT_DOCUMENT_ENTRY_ID } from "./artifact-document.js";
+import { ARTIFACT_DOCUMENT_ENTRY_ID } from "../execution/artifact-document.js";
 import { artifactKey } from "./useSessionArtifacts.js";
 
 /** Options for {@link useSessionPanel}. */
@@ -53,8 +52,8 @@ export interface UseSessionPanelOptions {
    * to `"files"` (the Explorer), which suits the session viewer. The launcher
    * passes `"configure"`: pre-session there is no workspace, so the Config
    * facet — carrying the run defaults (harness/model) — is the useful landing
-   * view. Auto-switches (Changes/Inspect) and explicit rail picks still
-   * take over from here exactly as before.
+   * view. Auto-switches (Changes) and explicit rail picks still take over
+   * from here exactly as before.
    *
    * @default "files"
    */
@@ -73,8 +72,8 @@ export interface UseSessionPanelOptions {
  *
  * Owns the {@link WorkspaceEditorsStore} (the open-editor group) and the view
  * FSM ported from the retired inspector tabs: explicit picks are sticky until
- * a meaningful state change (selection cleared, running⇄terminal transition)
- * resets them back to the `defaultView`. Both are decoupled from any store
+ * a meaningful state change (the running⇄terminal transition) resets them
+ * back to the `defaultView`. Both are decoupled from any store
  * subscription at the owner level: callbacks mutate imperatively so a file
  * open/switch re-renders only the subscribing panel subtree, never the
  * streaming conversation column (DD-009/DD-010, invariant 2).
@@ -86,7 +85,7 @@ export interface SessionPanelController {
   readonly isOpen: boolean;
   /** The active rail view id (`"files"`, `"search"`, or an injected facet). */
   readonly view: string;
-  /** Expand the panel, restoring the previous view (or Inspect if a thread item is selected). */
+  /** Expand the panel, restoring the previous view. */
   readonly openPanel: () => void;
   /** Collapse the panel to the chip, preserving editors and view. */
   readonly closePanel: () => void;
@@ -140,15 +139,6 @@ export interface SessionPanelController {
    * no-op if the artifact is not open.
    */
   readonly pinArtifact: (artifact: ExecutionArtifact) => void;
-  /**
-   * Report the current thread-item selection. Called from an effect inside the
-   * panel subtree (the level that subscribes to the selection store), keeping
-   * the owner subscription-free. While the panel is open, a new selection
-   * auto-switches to the Inspect view (unless the user picked one explicitly);
-   * a collapsed panel deliberately ignores selections — Inspect has no
-   * auto-open (it must never pull the user out of the chat).
-   */
-  readonly notifySelection: (item: SelectedThreadItem | null) => void;
 }
 
 /**
@@ -167,14 +157,6 @@ export function useSessionPanel({
   // Sticky explicit pick (rail click) — auto-switching yields to it until a
   // meaningful state change resets it. Same semantics as the retired tab FSM.
   const userPickedViewRef = useRef(false);
-  // Render-synced mirror so imperative callbacks read the current view without
-  // re-binding on every view change.
-  const viewRef = useRef(view);
-  viewRef.current = view;
-  // Last selection reported by the panel subtree; consulted by transitions that
-  // fire at the owner level (open, phase change) where selection state is
-  // deliberately not subscribed.
-  const selectionRef = useRef<SelectedThreadItem | null>(null);
 
   // Running⇄terminal transition → reset the sticky pick and re-derive the view.
   // Adjust-state-during-render (the established ResizableSplit pattern) so it
@@ -186,7 +168,7 @@ export function useSessionPanel({
     setPrevPhase(phase);
     if (wasTerminal !== isNowTerminal) {
       userPickedViewRef.current = false;
-      setViewState(selectionRef.current ? "inspect" : defaultView);
+      setViewState(defaultView);
     }
   }
 
@@ -222,14 +204,7 @@ export function useSessionPanel({
     }
   }, [planKey, openPlanDocument]);
 
-  const openPanel = useCallback(() => {
-    setIsOpen(true);
-    // Re-derive the auto view on entry: a selection made while collapsed
-    // surfaces as Inspect now (the collapsed panel ignored it by design).
-    if (!userPickedViewRef.current && selectionRef.current) {
-      setViewState("inspect");
-    }
-  }, []);
+  const openPanel = useCallback(() => setIsOpen(true), []);
 
   const closePanel = useCallback(() => setIsOpen(false), []);
 
@@ -276,22 +251,6 @@ export function useSessionPanel({
     [editorsStore],
   );
 
-  const notifySelection = useCallback(
-    (item: SelectedThreadItem | null) => {
-      if (item === selectionRef.current) return;
-      selectionRef.current = item;
-      if (item) {
-        if (isOpen && !userPickedViewRef.current) setViewState("inspect");
-      } else if (viewRef.current === "inspect") {
-        // Selection cleared: leave Inspect (its content is gone) and unstick,
-        // returning to the panel's home view.
-        userPickedViewRef.current = false;
-        setViewState(defaultView);
-      }
-    },
-    [isOpen, defaultView],
-  );
-
   return useMemo(
     () => ({
       editorsStore,
@@ -307,7 +266,6 @@ export function useSessionPanel({
       openPlanDocument,
       openArtifact,
       pinArtifact,
-      notifySelection,
     }),
     [
       editorsStore,
@@ -323,7 +281,6 @@ export function useSessionPanel({
       openPlanDocument,
       openArtifact,
       pinArtifact,
-      notifySelection,
     ],
   );
 }

package/src/session/useSessionRailViews.tsx

@@ -3,7 +3,6 @@
 import { useMemo } from "react";
 import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
 import type { SurfaceRailView } from "../workspace/WorkspaceSurface.js";
-import type { SelectedThreadItem } from "../internal/store/selection-store.js";
 import type { ApplyResourceResult } from "../library/useApplyResource.js";
 import { useSessionWriteBacks } from "./useSessionWriteBacks.js";
 import {
@@ -14,7 +13,6 @@ import { SetupTab, type SetupTabProps } from "./facets/SetupTab.js";
 import { ChangesTab } from "./facets/ChangesTab.js";
 import { ArtifactsTab } from "./facets/ArtifactsTab.js";
 import { UsageTab } from "./facets/UsageTab.js";
-import { InspectTab } from "./facets/InspectTab.js";
 
 /** Options for {@link useSessionRailViews}. */
 export interface UseSessionRailViewsOptions {
@@ -24,8 +22,6 @@ export interface UseSessionRailViewsOptions {
   readonly org: string;
   /** Session configuration for the Config facet. */
   readonly sessionConfig: SetupTabProps | undefined;
-  /** Currently selected thread item — surfaces the Inspect facet. */
-  readonly selectedItem: SelectedThreadItem | null;
   /** Called after a resource is applied from the Artifacts facet. */
   readonly onApplied?: (result: ApplyResourceResult) => void;
   /** Implement a plan — the Artifacts facet's preview action for `plan.md`. */
@@ -72,20 +68,19 @@ export interface UseSessionRailViewsOptions {
 }
 
 /**
- * Composes the session facets (Config / Changes / Artifacts / Usage / Inspect)
+ * Composes the session facets (Config / Changes / Artifacts / Usage)
  * as {@link SurfaceRailView}s for the workspace surface's activity rail.
  *
  * This is the session-domain half of the unified panel: the surface stays a
  * domain-pure workspace organism and these views are injected into its rail
  * (DD-004 composition). Contextual visibility mirrors the retired inspector's
  * tab rules — Changes/Artifacts surface only when data exists (with count
- * badges), Inspect only when a thread item is selected.
+ * badges).
  */
 export function useSessionRailViews({
   allExecutions,
   org,
   sessionConfig,
-  selectedItem,
   onApplied,
   onImplementPlan,
   onOpenPlan,
@@ -158,15 +153,6 @@ export function useSessionRailViews({
       });
     }
 
-    if (selectedItem) {
-      views.push({
-        id: "inspect",
-        label: "Inspect",
-        icon: <InspectIcon />,
-        content: <InspectTab selectedItem={selectedItem} />,
-      });
-    }
-
     return views;
   }, [
     sessionConfig,
@@ -184,7 +170,6 @@ export function useSessionRailViews({
     onOpenPlan,
     onOpenArtifact,
     onActivateArtifact,
-    selectedItem,
   ]);
 }
 
@@ -236,13 +221,3 @@ function UsageIcon() {
     </svg>
   );
 }
-
-/** Crosshair glyph — inspecting a selected thread item. */
-function InspectIcon() {
-  return (
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-      <circle cx="12" cy="12" r="7" />
-      <path d="M12 2v4M12 18v4M2 12h4M18 12h4" />
-    </svg>
-  );
-}

package/src/settings/ChannelAppsSection.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import type { ChannelApp } from "@stigmer/protos/ai/stigmer/agentic/channelapp/v1/api_pb";
+import { ChannelAppListPanel } from "../channel-app/ChannelAppListPanel.js";
+import {
+  CreateChannelAppForm,
+  type ChannelAppCreateHandoff,
+} from "../channel-app/CreateChannelAppForm.js";
+import { ChannelAppDetailPanel } from "../channel-app/ChannelAppDetailPanel.js";
+import { useDeploymentMode } from "../deployment-mode.js";
+import { CloudFeatureNotice } from "../internal/CloudFeatureNotice.js";
+import { useActiveOrgSlug } from "../organization/OrgProvider.js";
+
+type FlowState =
+  | { phase: "idle" }
+  | { phase: "creating" }
+  | {
+      phase: "editing";
+      channelApp: ChannelApp;
+      /**
+       * Once-visible create-flow values (the WhatsApp verify token),
+       * held in memory only for the detail panel's phase-two setup.
+       * Absent when editing reopens from the list later.
+       */
+      createHandoff?: ChannelAppCreateHandoff;
+    };
+
+/**
+ * Settings section for the organization's channel apps — customer-owned
+ * provider apps (Slack apps, Meta WhatsApp apps) that agent channels
+ * install through. For Slack that replaces the shared Stigmer app (bring
+ * your own app: your bot name and icon, and one agent per app per
+ * workspace, so multiple agents can serve one workspace); for WhatsApp a
+ * channel app is the only way — there is no platform Meta app (DD-WA-2).
+ *
+ * After registering an app here, the connect dialog on any agent's
+ * Channels tab offers it as the serving app.
+ */
+export function ChannelAppsSection() {
+  const org = useActiveOrgSlug();
+  // Channel installs (the consumer of these credentials) are cloud-only;
+  // gate the whole section the way the Channels tab gates connects.
+  const installsAvailable = useDeploymentMode() === "cloud";
+
+  const [flow, setFlow] = useState<FlowState>({ phase: "idle" });
+  const listRefetchRef = useRef<(() => void) | null>(null);
+
+  const handleRefetchRef = useCallback((refetch: () => void) => {
+    listRefetchRef.current = refetch;
+  }, []);
+
+  const handleCreated = useCallback(
+    (app: ChannelApp, createHandoff: ChannelAppCreateHandoff) => {
+      listRefetchRef.current?.();
+      // Creation lands on the detail panel deliberately: phase two of the
+      // setup (the events webhook URL — plus, for WhatsApp, the verify
+      // token carried in the handoff) only exists now.
+      setFlow({ phase: "editing", channelApp: app, createHandoff });
+    },
+    [],
+  );
+
+  const handleUpdated = useCallback(() => {
+    listRefetchRef.current?.();
+    setFlow({ phase: "idle" });
+  }, []);
+
+  const handleDeleted = useCallback(() => {
+    listRefetchRef.current?.();
+    setFlow({ phase: "idle" });
+  }, []);
+
+  return (
+    <section aria-labelledby="channel-apps-heading">
+      <div className="mb-3 flex items-center justify-between">
+        <h2
+          id="channel-apps-heading"
+          className="text-foreground text-sm font-semibold"
+        >
+          Channel Apps
+        </h2>
+
+        {installsAvailable && org && flow.phase === "idle" && (
+          <button
+            type="button"
+            onClick={() => setFlow({ phase: "creating" })}
+            className="text-primary hover:text-foreground text-xs font-medium transition-colors"
+          >
+            + New channel app
+          </button>
+        )}
+      </div>
+      <p className="text-muted-foreground mb-4 text-xs">
+        Your own provider apps for serving agent channels. A Slack app
+        gives the bot your name and icon, and lets multiple agents serve
+        the same workspace — one per app. A Meta app is how WhatsApp
+        channels connect — every WhatsApp channel installs through one.
+      </p>
+
+      {!installsAvailable ? (
+        <CloudFeatureNotice>
+          Channel apps are not available in local mode. Channel installs
+          require Stigmer Cloud.
+        </CloudFeatureNotice>
+      ) : flow.phase === "creating" ? (
+        <div className="border-border bg-card rounded-lg border p-4">
+          <CreateChannelAppForm
+            org={org}
+            onCreated={handleCreated}
+            onCancel={() => setFlow({ phase: "idle" })}
+          />
+        </div>
+      ) : flow.phase === "editing" ? (
+        <div className="border-border bg-card rounded-lg border p-4">
+          <ChannelAppDetailPanel
+            channelApp={flow.channelApp}
+            createHandoff={flow.createHandoff}
+            onUpdated={handleUpdated}
+            onDeleted={handleDeleted}
+            onBack={() => setFlow({ phase: "idle" })}
+          />
+        </div>
+      ) : (
+        <ChannelAppListPanel
+          org={org}
+          onEdit={(app) => setFlow({ phase: "editing", channelApp: app })}
+          onRefetchRef={handleRefetchRef}
+        />
+      )}
+    </section>
+  );
+}

package/src/settings/index.ts

@@ -12,4 +12,5 @@ export { IdentityProvidersSection } from "./IdentityProvidersSection.js";
 export type { IdentityProvidersSectionProps } from "./IdentityProvidersSection.js";
 export { PlatformClientsSection } from "./PlatformClientsSection.js";
 export { OAuthAppsSection } from "./OAuthAppsSection.js";
+export { ChannelAppsSection } from "./ChannelAppsSection.js";
 export { UsageSection } from "./UsageSection.js";

package/src/settings/settings-nav.ts

@@ -7,6 +7,7 @@ import {
   CreditCard,
   KeyRound,
   Link,
+  MessageSquare,
   Plug,
   ShieldCheck,
   Users,
@@ -65,6 +66,11 @@ export const SETTINGS_NAV_GROUPS: readonly SettingsNavGroup[] = [
       },
       { href: "/settings/environments", label: "Environments", icon: Box },
       { href: "/settings/oauth-apps", label: "OAuth Apps", icon: AppWindow },
+      {
+        href: "/settings/channel-apps",
+        label: "Channel Apps",
+        icon: MessageSquare,
+      },
     ],
   },
   {