@gokulvenkatareddy/cortex 0.1.7

package/apps/octogent/apps/web/src/components/ActiveAgentsSidebar.tsx

@@ -0,0 +1,60 @@
+import { useRef } from "react";
+import type { ReactNode } from "react";
+import type { MouseEvent as ReactMouseEvent } from "react";
+
+import { clampSidebarWidth } from "../app/uiStateNormalizers";
+
+type ActiveAgentsSidebarProps = {
+  sidebarWidth: number;
+  onSidebarWidthChange: (width: number) => void;
+  actionPanel?: ReactNode;
+  bodyContent?: ReactNode;
+};
+
+export const ActiveAgentsSidebar = ({
+  sidebarWidth,
+  onSidebarWidthChange,
+  actionPanel = null,
+  bodyContent,
+}: ActiveAgentsSidebarProps) => {
+  const sidebarRef = useRef<HTMLElement | null>(null);
+
+  const handleResizeMouseDown = (event: ReactMouseEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const sidebarLeft = sidebarRef.current?.getBoundingClientRect().left ?? 0;
+
+    const handleMouseMove = (event: MouseEvent) => {
+      onSidebarWidthChange(clampSidebarWidth(event.clientX - sidebarLeft));
+    };
+
+    const stopResize = () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", stopResize);
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", stopResize);
+  };
+
+  return (
+    <div className="dashboard-deck-shell">
+      <aside
+        aria-label="Active Agents sidebar"
+        className="active-agents-sidebar"
+        ref={sidebarRef}
+        style={{ width: `${sidebarWidth}px` }}
+      >
+        {actionPanel ? (
+          <div className="active-agents-action-panel">{actionPanel}</div>
+        ) : (
+          <div className="active-agents-body">{bodyContent}</div>
+        )}
+        <div
+          className="active-agents-border-resizer"
+          data-testid="active-agents-border-resizer"
+          onMouseDown={handleResizeMouseDown}
+        />
+      </aside>
+    </div>
+  );
+};

package/apps/octogent/apps/web/src/components/ActivityPrimaryView.tsx

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+
+import { GitHubPrimaryView } from "./GitHubPrimaryView";
+import { UsageBarChart } from "./UsageHeatmap";
+
+type ActivityPrimaryViewProps = {
+  usageChartProps: ComponentProps<typeof UsageBarChart>;
+  githubPrimaryViewProps: ComponentProps<typeof GitHubPrimaryView>;
+};
+
+export const ActivityPrimaryView = ({
+  usageChartProps,
+  githubPrimaryViewProps,
+}: ActivityPrimaryViewProps) => {
+  return (
+    <section className="activity-view" aria-label="Activity primary view">
+      <UsageBarChart {...usageChartProps} />
+      <GitHubPrimaryView {...githubPrimaryViewProps} />
+    </section>
+  );
+};

package/apps/octogent/apps/web/src/components/AgentStateBadge.tsx

@@ -0,0 +1,47 @@
+import { type AgentRuntimeState, isAgentRuntimeState } from "@octogent/core";
+import { StatusBadge, type StatusBadgeTone } from "./ui/StatusBadge";
+
+export type { AgentRuntimeState } from "@octogent/core";
+export { isAgentRuntimeState } from "@octogent/core";
+
+type AgentStateBadgeProps = {
+  state: AgentRuntimeState;
+};
+
+const stateLabel = (state: AgentRuntimeState): string => {
+  switch (state) {
+    case "waiting_for_permission":
+      return "PERMISSION";
+    case "waiting_for_user":
+      return "WAITING";
+    default:
+      return state.toUpperCase();
+  }
+};
+
+const stateTone = (state: AgentRuntimeState): StatusBadgeTone => {
+  switch (state) {
+    case "waiting_for_permission":
+    case "waiting_for_user":
+      return "warning";
+    default:
+      return state;
+  }
+};
+
+export const AgentStateBadge = ({ state }: AgentStateBadgeProps) => (
+  <StatusBadge
+    className="terminal-state-badge"
+    label={stateLabel(state)}
+    compactLabel={
+      state === "waiting_for_permission"
+        ? "PERM"
+        : state === "waiting_for_user"
+          ? "WAIT"
+          : state === "processing"
+            ? "PROC"
+            : state.toUpperCase()
+    }
+    tone={stateTone(state)}
+  />
+);