From 95e3a2dca7ac33bba2f8fdc4f6c1261ee232f7df Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Sat, 18 Apr 2026 19:39:19 -0400
Subject: [PATCH] Phase 2: Refactor Logs cluster to MCP SDK types

Replace string-typed log levels with SDK LoggingLevel across the Logs
group components and LoggingScreen.

- LogControls: type currentLevel, visibleLevels, and all handlers with
  LoggingLevel instead of string; type LOG_LEVELS array and LEVEL_COLORS
  record with LoggingLevel
- LogStreamPanel: type visibleLevels as Record<LoggingLevel, boolean>
  instead of Record<string, boolean>
- LoggingScreen: type currentLevel, onSetLevel, visibleLevels state,
  and toggle handlers with LoggingLevel; extract NO_LEVELS_VISIBLE as
  a module-level constant
- Stories already used LoggingLevel literals; updated type annotations
  to use Record<LoggingLevel, boolean>
- No ConnectedView story changes needed (already passes valid
  LoggingLevel values)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../LogControls/LogControls.stories.tsx       |  3 ++-
 .../groups/LogControls/LogControls.tsx        | 17 ++++++------
 .../groups/LogStreamPanel/LogStreamPanel.tsx  |  5 ++--
 .../screens/LoggingScreen/LoggingScreen.tsx   | 26 ++++++++++++-------
 4 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/clients/web/src/components/groups/LogControls/LogControls.stories.tsx b/clients/web/src/components/groups/LogControls/LogControls.stories.tsx
index 2b21e5d1..b516b6b6 100644
--- a/clients/web/src/components/groups/LogControls/LogControls.stories.tsx
+++ b/clients/web/src/components/groups/LogControls/LogControls.stories.tsx
@@ -1,8 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
 import { fn } from "storybook/test";
 import { LogControls } from "./LogControls";
 
-const allLevelsVisible: Record<string, boolean> = {
+const allLevelsVisible: Record<LoggingLevel, boolean> = {
   debug: true,
   info: true,
   notice: true,
diff --git a/clients/web/src/components/groups/LogControls/LogControls.tsx b/clients/web/src/components/groups/LogControls/LogControls.tsx
index 780faad1..7e25f3bb 100644
--- a/clients/web/src/components/groups/LogControls/LogControls.tsx
+++ b/clients/web/src/components/groups/LogControls/LogControls.tsx
@@ -8,8 +8,9 @@ import {
   Title,
   UnstyledButton,
 } from "@mantine/core";
+import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
 
-const LOG_LEVELS = [
+const LOG_LEVELS: LoggingLevel[] = [
   "debug",
   "info",
   "notice",
@@ -18,9 +19,9 @@ const LOG_LEVELS = [
   "critical",
   "alert",
   "emergency",
-] as const;
+];
 
-const LEVEL_COLORS: Record<string, { c: string }> = {
+const LEVEL_COLORS: Record<LoggingLevel, { c: string }> = {
   debug: { c: "dimmed" },
   info: { c: "blue" },
   notice: { c: "teal" },
@@ -37,12 +38,12 @@ const SubtleButton = Button.withProps({
 });
 
 export interface LogControlsProps {
-  currentLevel: string;
+  currentLevel: LoggingLevel;
   filterText: string;
-  visibleLevels: Record<string, boolean>;
-  onSetLevel: (level: string) => void;
+  visibleLevels: Record<LoggingLevel, boolean>;
+  onSetLevel: (level: LoggingLevel) => void;
   onFilterChange: (text: string) => void;
-  onToggleLevel: (level: string, visible: boolean) => void;
+  onToggleLevel: (level: LoggingLevel, visible: boolean) => void;
   onToggleAllLevels: () => void;
 }
 
@@ -72,7 +73,7 @@ export function LogControls({
           data={LOG_LEVELS.map((level) => ({ value: level, label: level }))}
           value={currentLevel}
           onChange={(value) => {
-            if (value) onSetLevel(value);
+            if (value) onSetLevel(value as LoggingLevel);
           }}
         />
         <Button size="sm" onClick={() => onSetLevel(currentLevel)}>
diff --git a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
index 876483b4..00b047b8 100644
--- a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
+++ b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
@@ -9,13 +9,14 @@ import {
   Text,
   Title,
 } from "@mantine/core";
+import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
 import { LogEntry } from "../../elements/LogEntry/LogEntry";
 import type { LogEntryData } from "../../elements/LogEntry/LogEntry";
 
 export interface LogStreamPanelProps {
   entries: LogEntryData[];
   filterText: string;
-  visibleLevels: Record<string, boolean>;
+  visibleLevels: Record<LoggingLevel, boolean>;
   autoScroll: boolean;
   onToggleAutoScroll: () => void;
   onCopyAll: () => void;
@@ -50,7 +51,7 @@ function formatData(data: unknown): string {
 function matchesFilters(
   entry: LogEntryData,
   filterText: string,
-  visibleLevels: Record<string, boolean>,
+  visibleLevels: Record<LoggingLevel, boolean>,
 ): boolean {
   if (!visibleLevels[entry.params.level]) return false;
   if (filterText) {
diff --git a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
index 00f9a91f..44ab1209 100644
--- a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
+++ b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
@@ -1,13 +1,14 @@
 import { useState } from "react";
 import { Card, Flex, Stack } from "@mantine/core";
+import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
 import { LogControls } from "../../groups/LogControls/LogControls";
 import { LogStreamPanel } from "../../groups/LogStreamPanel/LogStreamPanel";
 import type { LogEntryData } from "../../elements/LogEntry/LogEntry";
 
 export interface LoggingScreenProps {
   entries: LogEntryData[];
-  currentLevel: string;
-  onSetLevel: (level: string) => void;
+  currentLevel: LoggingLevel;
+  onSetLevel: (level: LoggingLevel) => void;
   onClear: () => void;
   onExport: () => void;
   autoScroll: boolean;
@@ -15,7 +16,7 @@ export interface LoggingScreenProps {
   onCopyAll: () => void;
 }
 
-const ALL_LEVELS_VISIBLE: Record<string, boolean> = {
+const ALL_LEVELS_VISIBLE: Record<LoggingLevel, boolean> = {
   debug: true,
   info: true,
   notice: true,
@@ -26,6 +27,17 @@ const ALL_LEVELS_VISIBLE: Record<string, boolean> = {
   emergency: true,
 };
 
+const NO_LEVELS_VISIBLE: Record<LoggingLevel, boolean> = {
+  debug: false,
+  info: false,
+  notice: false,
+  warning: false,
+  error: false,
+  critical: false,
+  alert: false,
+  emergency: false,
+};
+
 const ScreenLayout = Flex.withProps({
   variant: "screen",
   h: "calc(100vh - var(--app-shell-header-height, 0px))",
@@ -55,16 +67,12 @@ export function LoggingScreen({
 }: LoggingScreenProps) {
   const [filterText, setFilterText] = useState("");
   const [visibleLevels, setVisibleLevels] =
-    useState<Record<string, boolean>>(ALL_LEVELS_VISIBLE);
+    useState<Record<LoggingLevel, boolean>>(ALL_LEVELS_VISIBLE);
 
-  function handleToggleLevel(level: string, visible: boolean) {
+  function handleToggleLevel(level: LoggingLevel, visible: boolean) {
     setVisibleLevels((prev) => ({ ...prev, [level]: visible }));
   }
 
-  const NO_LEVELS_VISIBLE: Record<string, boolean> = Object.fromEntries(
-    Object.keys(ALL_LEVELS_VISIBLE).map((k) => [k, false]),
-  );
-
   function handleToggleAllLevels() {
     const allSelected = Object.values(visibleLevels).every(Boolean);
     setVisibleLevels(allSelected ? NO_LEVELS_VISIBLE : ALL_LEVELS_VISIBLE);