@abhinav2203/codeflow-canvas 0.1.0

package/src/components/ide-layout.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useCallback, useMemo } from "react";
+import { Rnd, type RndDragCallback, type RndResizeCallback } from "react-rnd";
+
+import { useBlueprintStore } from "../store/blueprint-store.js";
+
+function getDefaultFloatingGraphBounds() {
+  if (typeof window === "undefined") {
+    return { x: 48, y: 48, width: 420, height: 320 };
+  }
+
+  const width = Math.max(360, Math.round(window.innerWidth * 0.3));
+  const height = Math.max(260, Math.round(window.innerHeight * 0.35));
+  const x = Math.max(24, window.innerWidth - width - 40);
+  const y = Math.max(24, window.innerHeight - height - 120);
+
+  return { x, y, width, height };
+}
+
+type IdeLayoutProps = {
+  explorer: React.ReactNode;
+  mainContent: React.ReactNode;
+  bottomPanel?: React.ReactNode;
+  floatingGraphContent?: React.ReactNode;
+  rightSidebar?: React.ReactNode;
+};
+
+export function IdeLayout({
+  explorer,
+  mainContent,
+  bottomPanel,
+  floatingGraphContent,
+  rightSidebar
+}: IdeLayoutProps) {
+  const { activeFile, floatingGraph, setFloatingGraph } = useBlueprintStore();
+
+  const resolvedFloatingGraph = useMemo(() => {
+    const defaults = getDefaultFloatingGraphBounds();
+    return {
+      x: floatingGraph.x || defaults.x,
+      y: floatingGraph.y || defaults.y,
+      width: floatingGraph.width || defaults.width,
+      height: floatingGraph.height || defaults.height
+    };
+  }, [floatingGraph.height, floatingGraph.width, floatingGraph.x, floatingGraph.y]);
+
+  const handleDragStop: RndDragCallback = useCallback(
+    (_event, data) => {
+      setFloatingGraph({ x: data.x, y: data.y });
+    },
+    [setFloatingGraph]
+  );
+
+  const handleResizeStop: RndResizeCallback = useCallback(
+    (_event, _direction, ref, _delta, position) => {
+      setFloatingGraph({
+        x: position.x,
+        y: position.y,
+        width: parseInt(ref.style.width, 10),
+        height: parseInt(ref.style.height, 10)
+      });
+    },
+    [setFloatingGraph]
+  );
+
+  return (
+    <div className="ide-layout-shell">
+      <aside className="ide-left-sidebar">
+        <div className="ide-pane-header">Explorer</div>
+        <div className="ide-pane-body">{explorer}</div>
+      </aside>
+      <div className="ide-main-stack">
+        <main className="ide-main-area">
+          {mainContent}
+          {activeFile && floatingGraph.visible && floatingGraphContent ? (
+            <Rnd
+              bounds="parent"
+              className="ide-floating-graph"
+              dragHandleClassName="ide-floating-graph-header"
+              minHeight={220}
+              minWidth={320}
+              onDragStop={handleDragStop}
+              onResizeStop={handleResizeStop}
+              position={{ x: resolvedFloatingGraph.x, y: resolvedFloatingGraph.y }}
+              size={{ width: resolvedFloatingGraph.width, height: resolvedFloatingGraph.height }}
+            >
+              <div className="ide-floating-graph-header">
+                <span>Live Graph</span>
+                <span>Drag to reposition</span>
+              </div>
+              <div className="ide-floating-graph-body">{floatingGraphContent}</div>
+            </Rnd>
+          ) : null}
+        </main>
+        <section className="ide-bottom-panel">{bottomPanel}</section>
+      </div>
+      <aside className="ide-right-sidebar">
+        <div className="ide-pane-header">Agent</div>
+        <div className="ide-pane-body">{rightSidebar ?? <div className="ide-agent-slot" />}</div>
+      </aside>
+    </div>
+  );
+}

package/src/components/ide-workbench.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+export function IdeWorkbench({ children }: { children?: React.ReactNode }) {
+  return <>{children}</>;
+}

package/src/components/index.ts

@@ -0,0 +1,12 @@
+export { IdeLayout } from "./ide-layout.js";
+export { FileTree } from "./file-tree.js";
+export { FileTabs } from "./file-tabs.js";
+export { GraphCanvas } from "./graph-canvas.js";
+export { CodeEditor } from "./code-editor.js";
+export { CodeDiffEditor } from "./code-diff-editor.js";
+export { BlueprintWorkbench } from "./blueprint-workbench.js";
+export { PolicyWorkbench } from "./policy-workbench.js";
+export { IdeWorkbench } from "./ide-workbench.js";
+export { OpencodeSettings } from "./opencode-settings.js";
+export { prepareMonaco, toMonacoPath } from "./monaco-setup.js";
+export { TypeScriptLanguageService, getTypeScriptLanguageService } from "./ts-language-service.js";

package/src/components/monaco-setup.ts

@@ -0,0 +1,67 @@
+import type * as Monaco from "monaco-editor";
+
+import { getTypeScriptLanguageService } from "./ts-language-service.js";
+
+type MonacoEnvironmentShape = {
+  getWorker: (_workerId: string, label: string) => Worker;
+};
+
+type MonacoGlobal = typeof globalThis & {
+  MonacoEnvironment?: MonacoEnvironmentShape;
+};
+
+let workersConfigured = false;
+
+export function prepareMonaco(monaco: typeof Monaco): void {
+  if (!workersConfigured) {
+    const monacoGlobal = globalThis as MonacoGlobal;
+    monacoGlobal.MonacoEnvironment = {
+      getWorker(_workerId, label) {
+        if (label === "typescript" || label === "javascript") {
+          return new Worker(
+            new URL("monaco-editor/esm/vs/language/typescript/ts.worker.js", import.meta.url),
+            { type: "module" }
+          );
+        }
+
+        if (label === "json") {
+          return new Worker(
+            new URL("monaco-editor/esm/vs/language/json/json.worker.js", import.meta.url),
+            { type: "module" }
+          );
+        }
+
+        if (label === "css" || label === "scss" || label === "less") {
+          return new Worker(
+            new URL("monaco-editor/esm/vs/language/css/css.worker.js", import.meta.url),
+            { type: "module" }
+          );
+        }
+
+        if (label === "html" || label === "handlebars" || label === "razor") {
+          return new Worker(
+            new URL("monaco-editor/esm/vs/language/html/html.worker.js", import.meta.url),
+            { type: "module" }
+          );
+        }
+
+        return new Worker(
+          new URL("monaco-editor/esm/vs/editor/editor.worker.js", import.meta.url),
+          { type: "module" }
+        );
+      }
+    };
+    workersConfigured = true;
+  }
+
+  getTypeScriptLanguageService(monaco).configureDefaults();
+}
+
+export function toMonacoPath(filePath: string): string {
+  if (filePath.startsWith("file://")) {
+    return filePath;
+  }
+
+  const normalized = filePath.replace(/\\/g, "/").replace(/^\/+/, "");
+  return `file:///${normalized}`;
+}

package/src/components/opencode-settings.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { OpencodeProvider, OpencodeServerInfo } from "../lib/types.js";
+
+const PROVIDERS: { id: OpencodeProvider; label: string }[] = [
+  { id: "anthropic", label: "Anthropic (Claude)" },
+  { id: "openai", label: "OpenAI (GPT)" },
+  { id: "google", label: "Google (Gemini)" },
+  { id: "azure", label: "Azure OpenAI" },
+  { id: "groq", label: "Groq" },
+  { id: "mistral", label: "Mistral" },
+  { id: "cohere", label: "Cohere" },
+  { id: "perplexity", label: "Perplexity" },
+  { id: "openrouter", label: "OpenRouter" },
+  { id: "bedrock", label: "AWS Bedrock" },
+  { id: "local", label: "Local Model" },
+];
+
+type Props = {
+  onClose?: () => void;
+  onStatusChange?: (status: OpencodeServerInfo) => void;
+};
+
+export function OpencodeSettings({ onClose, onStatusChange }: Props) {
+  const [provider, setProvider] = useState<OpencodeProvider>("anthropic");
+  const [apiKey, setApiKey] = useState("");
+  const [model, setModel] = useState("");
+  const [baseUrl, setBaseUrl] = useState("");
+  const [serverStatus, setServerStatus] = useState<OpencodeServerInfo>({ status: "stopped" });
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  return (
+    <div className="opencode-settings">
+      <div className="opencode-settings-header">
+        <h3>OpenCode Agent Settings</h3>
+        {onClose && (
+          <button onClick={onClose} type="button" className="close-btn">
+            ×
+          </button>
+        )}
+      </div>
+
+      <div className="server-status-bar">
+        <span className={`status-indicator status-${serverStatus.status}`} />
+        <span className="status-text">
+          {serverStatus.status === "running"
+            ? `Connected (${serverStatus.url})`
+            : serverStatus.status === "starting"
+            ? "Starting..."
+            : serverStatus.status === "error"
+            ? `Error: ${serverStatus.error}`
+            : "Not connected"}
+        </span>
+      </div>
+
+      {error && <div className="error-message">{error}</div>}
+
+      <label className="field">
+        <span>AI Provider</span>
+        <select value={provider} onChange={(e) => setProvider(e.target.value as OpencodeProvider)}>
+          {PROVIDERS.map((p) => (
+            <option key={p.id} value={p.id}>
+              {p.label}
+            </option>
+          ))}
+        </select>
+      </label>
+
+      <label className="field">
+        <span>API Key</span>
+        <input
+          type="password"
+          value={apiKey}
+          onChange={(e) => setApiKey(e.target.value)}
+          placeholder={`Enter your ${PROVIDERS.find((p) => p.id === provider)?.label || provider} API key`}
+        />
+      </label>
+    </div>
+  );
+}

package/src/components/policy-workbench.tsx

@@ -0,0 +1,233 @@
+"use client";
+
+import type { QueryResult } from "@abhinav2203/coderag";
+
+import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
+
+import { CodeEditor } from "./code-editor.js";
+import { GraphCanvas } from "./graph-canvas.js";
+import { buildDetailFlow } from "../lib/flow-view.js";
+import { computeHeatmap } from "../lib/heatmap.js";
+import type { HeatmapData } from "../lib/heatmap.js";
+import type { CycleReport, SmellReport, GraphMetrics } from "../lib/types.js";
+import type {
+  ApprovalRecord,
+  BlueprintGraph,
+  BlueprintNode,
+  ConflictReport,
+  ExecutionMode,
+  ExportResult,
+  ObservabilityLog,
+  PersistedSession,
+  RiskReport,
+  RunPlan,
+  RuntimeExecutionResult
+} from "@abhinav2203/codeflow-core/schema";
+import { emptyContract, traceSpanSchema } from "@abhinav2203/codeflow-core/schema";
+import {
+  AUTO_IMPLEMENT_STORAGE_KEY,
+  LIVE_COMPLETIONS_STORAGE_KEY,
+  THEME_STORAGE_KEY,
+  loadSessionApiKey,
+  readLocalBooleanPreference,
+  readLocalPreference,
+  storeSessionApiKey,
+  writeLocalBooleanPreference,
+  writeLocalPreference
+} from "../lib/browser/storage.js";
+
+type BuildResponse = {
+  graph?: BlueprintGraph;
+  runPlan?: RunPlan;
+  session?: PersistedSession;
+  error?: string;
+};
+
+type ExportResponse = {
+  result?: ExportResult;
+  runPlan?: RunPlan;
+  riskReport?: RiskReport;
+  session?: PersistedSession;
+  approval?: ApprovalRecord;
+  requiresApproval?: boolean;
+  error?: string;
+};
+
+type ExecutionResponse = {
+  result?: RuntimeExecutionResult;
+  executedNodeId?: string;
+  graph?: BlueprintGraph;
+  runPlan?: RunPlan;
+  session?: PersistedSession;
+  error?: string;
+};
+
+type ObservabilityLatestResponse = {
+  graph?: BlueprintGraph | null;
+  latestSpans?: Array<{ spanId: string; name: string; status: string; runtime: string }>;
+  latestLogs?: ObservabilityLog[];
+  error?: string;
+};
+
+type ConflictResponse = {
+  report?: ConflictReport;
+  error?: string;
+};
+
+type CyclesResponse = {
+  report?: CycleReport;
+  error?: string;
+};
+
+type SmellsResponse = {
+  report?: SmellReport;
+  error?: string;
+};
+
+type MetricsResponse = {
+  metrics?: GraphMetrics;
+  error?: string;
+};
+
+type StatusTone = "info" | "success" | "danger";
+type ThemePreference = "system" | "light" | "dark";
+type ResolvedTheme = "light" | "dark";
+
+const POLICY_CANVAS_PROMPT = `Act as an Enterprise Mobility Architect. Using the Google STITCH MCP server, design a secure Engineering Department device profile.
+
+Create nodes for a managed Chrome browser policy enabling developer tools while disabling insecure extensions.
+Add a node for a corporate VPN configuration.
+Wire these to a Fleet: Engineering-Laptops group node.
+Verify the STITCH contract before sync: every policy needs a valid version ID and the VPN policy needs its certificate reference.
+If a policy node drifts from schema, mark it Invalid, highlight it in red, and suggest a Heal fix based on the latest Google management API spec.`;
+
+const maskApiKey = (value: string) => {
+  const trimmed = value.trim();
+  if (trimmed.length <= 8) {
+    return trimmed;
+  }
+
+  return `${trimmed.slice(0, 4)}...${trimmed.slice(-4)}`;
+};
+
+export function PolicyWorkbench() {
+  const MIN_OBSERVABILITY_INTERVAL_SECS = 2;
+  const [projectName, setProjectName] = useState("CodeFlow Workspace");
+  const [repoPath, setRepoPath] = useState("");
+  const [prdText, setPrdText] = useState("");
+  const [aiPrompt, setAiPrompt] = useState("");
+  const [nvidiaApiKey, setNvidiaApiKey] = useState("");
+  const [mode, setMode] = useState<ExecutionMode>("essential");
+  const [outputDir, setOutputDir] = useState("");
+  const [traceInput, setTraceInput] = useState("");
+  const [runInput, setRunInput] = useState("{}");
+  const [graph, setGraph] = useState<BlueprintGraph | null>(null);
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [busyLabel, setBusyLabel] = useState<string | null>(null);
+  const [exportResult, setExportResult] = useState<ExportResult | null>(null);
+  const [runPlan, setRunPlan] = useState<RunPlan | null>(null);
+  const [riskReport, setRiskReport] = useState<RiskReport | null>(null);
+  const [session, setSession] = useState<PersistedSession | null>(null);
+  const [pendingApproval, setPendingApproval] = useState<ApprovalRecord | null>(null);
+  const [executionResult, setExecutionResult] = useState<RuntimeExecutionResult | null>(null);
+  const [latestLogs, setLatestLogs] = useState<ObservabilityLog[]>([]);
+  const [latestSpans, setLatestSpans] = useState<ObservabilityLatestResponse["latestSpans"]>([]);
+  const [conflictReport, setConflictReport] = useState<ConflictReport | null>(null);
+  const [newNodeName, setNewNodeName] = useState("");
+  const [newNodeKind, setNewNodeKind] = useState<BlueprintNode["kind"]>("function");
+  const [edgeFrom, setEdgeFrom] = useState("");
+  const [edgeTo, setEdgeTo] = useState("");
+  const [edgeKind, setEdgeKind] = useState<"calls" | "imports" | "inherits">("calls");
+  const [useAI, setUseAI] = useState(true);
+  const [drilldownStack, setDrilldownStack] = useState<string[]>([]);
+  const [selectedDetailNodeId, setSelectedDetailNodeId] = useState<string | null>(null);
+  const [codeDrafts, setCodeDrafts] = useState<Record<string, string>>({});
+  const [suggestionInstruction, setSuggestionInstruction] = useState("");
+  const [codeSuggestion, setCodeSuggestion] = useState<{ summary: string; code: string; notes: string[] } | null>(null);
+  const [liveCompletionsEnabled, setLiveCompletionsEnabled] = useState(true);
+  const [serverApiKeyConfigured, setServerApiKeyConfigured] = useState(false);
+  const [apiKeyStatusLoaded, setApiKeyStatusLoaded] = useState(false);
+  const [statusTitle, setStatusTitle] = useState("Ready to build");
+  const [statusDetail, setStatusDetail] = useState(
+    "Enter a project description or repo input, then build a blueprint."
+  );
+  const [statusTone, setStatusTone] = useState<StatusTone>("info");
+  const [showSettings, setShowSettings] = useState(false);
+  const [showPromptPanel, setShowPromptPanel] = useState(true);
+  const [showEditPanel, setShowEditPanel] = useState(false);
+  const [showInspector, setShowInspector] = useState(false);
+  const [showAnalysisPanel, setShowAnalysisPanel] = useState(false);
+  const [showObservabilityPanel, setShowObservabilityPanel] = useState(false);
+  const [showPolicyLayerPanel, setShowPolicyLayerPanel] = useState(false);
+  const [themePreference, setThemePreference] = useState<ThemePreference>("system");
+  const [systemTheme, setSystemTheme] = useState<ResolvedTheme>("light");
+  const [autoObservability, setAutoObservability] = useState(false);
+  const [observabilityIntervalSecs, setObservabilityIntervalSecs] = useState(5);
+  const autoObsRef = useRef(autoObservability);
+  autoObsRef.current = autoObservability;
+  const [autoImplementNodes, setAutoImplementNodes] = useState(false);
+  const [cycleReport, setCycleReport] = useState<CycleReport | null>(null);
+  const [smellReport, setSmellReport] = useState<SmellReport | null>(null);
+  const [graphMetrics, setGraphMetrics] = useState<GraphMetrics | null>(null);
+  const [mermaidDiagram, setMermaidDiagram] = useState<string | null>(null);
+  const resolvedTheme = themePreference === "system" ? systemTheme : themePreference;
+  const topbarRef = useRef<HTMLElement | null>(null);
+  const [floatingPanelTop, setFloatingPanelTop] = useState(112);
+
+  const selectedNode = graph?.nodes.find((node) => node.id === selectedNodeId) ?? null;
+  const drilldownNodeId = drilldownStack.at(-1) ?? null;
+  const drilldownRootNode = graph?.nodes.find((node) => node.id === drilldownNodeId) ?? null;
+  const detailFlow =
+    graph && drilldownNodeId
+      ? buildDetailFlow(graph, drilldownNodeId, selectedDetailNodeId ?? undefined)
+      : null;
+  const heatmapData: HeatmapData | undefined = useMemo(
+    () =>
+      graph &&
+      graph.nodes.some(
+        (node) => node.traceState && node.traceState.count > 0
+      )
+        ? computeHeatmap(graph)
+        : undefined,
+    [graph]
+  );
+
+  const canStartImplementation = false;
+  const canStartIntegration = false;
+  const canImplementActiveNode = false;
+  const canRunActiveNode = false;
+  const canRunIntegration = false;
+  const isBusy = Boolean(busyLabel);
+  const isBuilding = busyLabel === "Building blueprint";
+
+  return (
+    <div className="workbench-shell" data-theme={resolvedTheme}>
+      <header className={`workbench-topbar ${graph ? "workbench-topbar-compact" : ""}`} ref={topbarRef}>
+        <div className="topbar-start">
+          <div className="brand-lockup">
+            <p className="brand-eyebrow">CodeFlow</p>
+            <h1>Policy Canvas</h1>
+            <p className="brand-caption">Graph-native architecture, compliance, and deployment control.</p>
+          </div>
+        </div>
+      </header>
+
+      <main className="policy-layout focus-layout">
+        <section className="workbench-main focus-main">
+          <section className="graph-panel full-graph focus-graph">
+            <GraphCanvas
+              graph={graph}
+              selectedNodeId={drilldownRootNode ? selectedDetailNodeId : selectedNodeId}
+              nodes={detailFlow?.nodes}
+              edges={detailFlow?.edges}
+              onSelect={(nodeId) => setSelectedNodeId(nodeId)}
+              heatmapData={drilldownRootNode ? undefined : heatmapData}
+              theme={resolvedTheme}
+            />
+          </section>
+        </section>
+      </main>
+    </div>
+  );
+}

package/src/components/ts-language-service.ts

@@ -0,0 +1,170 @@
+import type * as Monaco from "monaco-editor";
+
+type LanguageDefaultsApi = {
+  addExtraLib: (content: string, filePath?: string) => Monaco.IDisposable;
+  setCompilerOptions: (options: Record<string, unknown>) => void;
+  setDiagnosticsOptions: (options: Record<string, unknown>) => void;
+};
+
+type MonacoTypeScriptApi = {
+  javascriptDefaults: LanguageDefaultsApi;
+  typescriptDefaults: LanguageDefaultsApi;
+  JsxEmit: {
+    ReactJSX?: number;
+    React?: number;
+  };
+  ModuleKind: {
+    ESNext: number;
+  };
+  ModuleResolutionKind: {
+    NodeJs: number;
+  };
+  ScriptTarget: {
+    ESNext: number;
+  };
+};
+
+function getTypeScriptApi(monaco: typeof Monaco): MonacoTypeScriptApi | null {
+  return (monaco.languages as unknown as { typescript?: MonacoTypeScriptApi }).typescript ?? null;
+}
+
+function toExtraLibPath(filePath: string): string {
+  const normalized = filePath.replace(/\\/g, "/").replace(/^\/+/, "");
+  return `file:///${normalized}`;
+}
+
+export class TypeScriptLanguageService {
+  private monaco: typeof Monaco;
+  private defaultsConfigured = false;
+  private workspaceLibs = new Map<string, Monaco.IDisposable>();
+  private globalLibDisposables: Monaco.IDisposable[] = [];
+
+  constructor(monaco: typeof Monaco) {
+    this.monaco = monaco;
+  }
+
+  configureDefaults(): void {
+    if (this.defaultsConfigured) {
+      return;
+    }
+
+    const api = getTypeScriptApi(this.monaco);
+    if (!api) {
+      return;
+    }
+
+    const jsxMode = api.JsxEmit.ReactJSX ?? api.JsxEmit.React ?? 2;
+    const compilerOptions = {
+      allowJs: true,
+      allowNonTsExtensions: true,
+      baseUrl: ".",
+      checkJs: true,
+      esModuleInterop: true,
+      jsx: jsxMode,
+      module: api.ModuleKind.ESNext,
+      moduleResolution: api.ModuleResolutionKind.NodeJs,
+      noEmit: true,
+      paths: {
+        "@/*": ["./src/*"],
+        "@/components/*": ["./src/components/*"],
+        "@/lib/*": ["./src/lib/*"],
+        "@/store/*": ["./src/store/*"]
+      },
+      strict: true,
+      target: api.ScriptTarget.ESNext
+    };
+
+    api.typescriptDefaults.setCompilerOptions(compilerOptions);
+    api.javascriptDefaults.setCompilerOptions(compilerOptions);
+
+    api.typescriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: false,
+      noSyntaxValidation: false
+    });
+    api.javascriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: false,
+      noSyntaxValidation: false
+    });
+
+    this.addGlobalTypes(api);
+    this.defaultsConfigured = true;
+  }
+
+  private addGlobalTypes(api: MonacoTypeScriptApi): void {
+    const reactTypes = `
+      declare namespace React {
+        type ReactNode = import('react').ReactNode;
+        type FC<P = {}> = import('react').FunctionComponent<P>;
+        type CSSProperties = import('react').CSSProperties;
+      }
+      declare module 'react' {
+        function useState<T>(initial: T | (() => T)): [T, (value: T) => void];
+        function useState<T>(): [T | undefined, (value: T) => void];
+        function useEffect(effect: () => void | (() => void)): void;
+        function useEffect(effect: () => void, deps: any[]): void;
+        function useCallback<T extends (...args: any[]) => any>(callback: T, deps: any[]): T;
+        function useMemo<T>(factory: () => T, deps: any[]): T;
+        function useRef<T>(initial: T): { current: T };
+        function useRef<T>(initial?: T): { current: T | undefined };
+      }
+    `;
+
+    const nextTypes = `
+      declare namespace Next {
+        function dynamic<T>(importFn: () => Promise<T>): T;
+        function dynamic<T>(importFn: () => Promise<T>, options: { ssr?: boolean }): T;
+      }
+      declare module 'next' {
+        export function GetServerSideProps(context: any): any;
+        export function GetStaticProps(context: any): any;
+        export function GetServerSideProps(context: any): any;
+      }
+    `;
+
+    const nodeTypes = `
+      declare module 'node:fs' {
+        export function readFile(path: string, encoding: string): Promise<string>;
+        export function writeFile(path: string, data: string): Promise<void>;
+      }
+      declare module 'node:path' {
+        export function resolve(...paths: string[]): string;
+        export function join(...paths: string[]): string;
+      }
+    `;
+
+    this.globalLibDisposables.push(
+      api.typescriptDefaults.addExtraLib(reactTypes, "file:///node_modules/@types/react-global.d.ts"),
+      api.typescriptDefaults.addExtraLib(nextTypes, "file:///node_modules/@types/next-global.d.ts"),
+      api.typescriptDefaults.addExtraLib(nodeTypes, "file:///node_modules/@types/node-global.d.ts")
+    );
+  }
+
+  upsertWorkspaceFile(filePath: string, content: string): void {
+    this.configureDefaults();
+    const api = getTypeScriptApi(this.monaco);
+    if (!api) {
+      return;
+    }
+
+    const extraLibPath = toExtraLibPath(filePath);
+    this.workspaceLibs.get(extraLibPath)?.dispose();
+    this.workspaceLibs.set(extraLibPath, api.typescriptDefaults.addExtraLib(content, extraLibPath));
+  }
+
+  dispose(): void {
+    this.globalLibDisposables.forEach((disposable) => disposable.dispose());
+    this.globalLibDisposables = [];
+    this.workspaceLibs.forEach((disposable) => disposable.dispose());
+    this.workspaceLibs.clear();
+    this.defaultsConfigured = false;
+  }
+}
+
+let languageService: TypeScriptLanguageService | null = null;
+
+export function getTypeScriptLanguageService(monaco: typeof Monaco): TypeScriptLanguageService {
+  if (!languageService) {
+    languageService = new TypeScriptLanguageService(monaco);
+  }
+  return languageService;
+}