npm - @townco/gui-template - Versions diffs - 0.1.0 - Mend

@townco/gui-template 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/README.md +176 -0
package/dist/assets/acp-sdk-DjnJtAf8.js +1 -0
package/dist/assets/icons-B1wHwGRq.js +1 -0
package/dist/assets/index-B6Vo9iGc.css +1 -0
package/dist/assets/index-C9pfdbke.js +7 -0
package/dist/assets/markdown-BLVKlqjB.js +1 -0
package/dist/assets/radix-zBfH0NEp.js +5 -0
package/dist/assets/react-BUwpDnu9.js +49 -0
package/dist/assets/vendor-CNJ4Zu8U.js +48 -0
package/dist/index.html +19 -0
package/index.html +12 -0
package/package.json +42 -0
package/postcss.config.js +5 -0
package/src/App.tsx +54 -0
package/src/ChatView.tsx +173 -0
package/src/config.ts +14 -0
package/src/env.d.ts +9 -0
package/src/main.tsx +13 -0
package/vite.config.ts +94 -0

package/dist/index.html ADDED Viewed

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Agent Chat</title>
+    <script type="module" crossorigin src="/assets/index-C9pfdbke.js"></script>
+    <link rel="modulepreload" crossorigin href="/assets/vendor-CNJ4Zu8U.js">
+    <link rel="modulepreload" crossorigin href="/assets/react-BUwpDnu9.js">
+    <link rel="modulepreload" crossorigin href="/assets/acp-sdk-DjnJtAf8.js">
+    <link rel="modulepreload" crossorigin href="/assets/radix-zBfH0NEp.js">
+    <link rel="modulepreload" crossorigin href="/assets/icons-B1wHwGRq.js">
+    <link rel="modulepreload" crossorigin href="/assets/markdown-BLVKlqjB.js">
+    <link rel="stylesheet" crossorigin href="/assets/index-B6Vo9iGc.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Agent Chat</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,42 @@
+{
+  "name": "@townco/gui-template",
+  "version": "0.1.0",
+  "type": "module",
+  "files": [
+    "dist",
+    "src",
+    "index.html",
+    "vite.config.ts",
+    "postcss.config.js",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/federicoweber/agent_hub.git"
+  },
+  "author": "Federico Weber",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@townco/ui": "^0.1.0",
+    "lucide-react": "^0.552.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.17",
+    "@townco/tsconfig": "^0.1.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.1"
+  }
+}

package/postcss.config.js ADDED Viewed

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

package/src/App.tsx ADDED Viewed

@@ -0,0 +1,54 @@
+import { AcpClient } from "@townco/ui";
+import { useEffect, useState } from "react";
+import { ChatView } from "./ChatView.js";
+import { config } from "./config.js";
+function App() {
+  const [client, setClient] = useState<AcpClient | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    // Create AcpClient with HTTP transport
+    try {
+      const acpClient = new AcpClient({
+        type: "http",
+        options: {
+          baseUrl: config.agentServerUrl,
+        },
+      });
+      setClient(acpClient);
+      // Clean up on unmount
+      return () => {
+        acpClient.disconnect().catch(console.error);
+      };
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : "Failed to initialize ACP client";
+      setError(errorMessage);
+      console.error("Failed to initialize ACP client:", err);
+      return undefined;
+    }
+  }, []);
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-screen bg-[var(--color-bg)]">
+        <div className="text-center p-8 max-w-md">
+          <h1 className="text-2xl font-bold text-red-500 mb-4">
+            Initialization Error
+          </h1>
+          <p className="text-[var(--color-text)] mb-4">{error}</p>
+          <p className="text-sm text-[var(--color-text-secondary)]">
+            Failed to initialize the ACP client. Check the console for details.
+          </p>
+        </div>
+      </div>
+    );
+  }
+  return <ChatView client={client} />;
+}
+export default App;

package/src/ChatView.tsx ADDED Viewed

@@ -0,0 +1,173 @@
+import {
+  type AcpClient,
+  useChatMessages,
+  useChatSession,
+  useChatStore,
+} from "@townco/ui";
+import {
+  ChatInputField,
+  ChatInputRoot,
+  ChatInputSubmit,
+  ChatInputToolbar,
+  ChatSecondaryPanel,
+  cn,
+  HeightTransition,
+  Message,
+  MessageContent,
+  type TodoItem,
+} from "@townco/ui/gui";
+import { ChevronDown, SendIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+export interface ChatViewProps {
+  client: AcpClient | null;
+}
+export function ChatView({ client }: ChatViewProps) {
+  // Use shared hooks from @townco/ui/core
+  const { connectionStatus, connect } = useChatSession(client);
+  const { messages } = useChatMessages(client);
+  const error = useChatStore((state) => state.error);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const [isHeaderExpanded, setIsHeaderExpanded] = useState(false);
+  const [todos] = useState<TodoItem[]>([]);
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  });
+  const getStatusColor = () => {
+    switch (connectionStatus) {
+      case "connected":
+        return "bg-green-500";
+      case "connecting":
+        return "bg-yellow-500";
+      case "error":
+        return "bg-red-500";
+      default:
+        return "bg-gray-500";
+    }
+  };
+  const getStatusText = () => {
+    switch (connectionStatus) {
+      case "connected":
+        return "Connected";
+      case "connecting":
+        return "Connecting...";
+      case "error":
+        return "Connection Error";
+      default:
+        return "No Server";
+    }
+  };
+  return (
+    <div className="flex flex-col h-screen bg-background text-foreground">
+      {/* Header */}
+      <div className="relative border-b border-border bg-card z-10">
+        <div className="flex items-center justify-between px-6 py-4">
+          <h1 className="text-xl font-semibold m-0">Agent Chat</h1>
+          <div className="flex items-center gap-3">
+            <div className="flex items-center gap-2">
+              <div className={cn("w-2 h-2 rounded-full", getStatusColor())} />
+              <span className="text-sm text-muted-foreground">
+                {getStatusText()}
+              </span>
+            </div>
+            <button
+              type="button"
+              onClick={() => setIsHeaderExpanded(!isHeaderExpanded)}
+              className="p-1 rounded hover:bg-background transition-colors"
+              aria-label={
+                isHeaderExpanded ? "Collapse header" : "Expand header"
+              }
+            >
+              <ChevronDown
+                className={cn(
+                  "w-5 h-5 text-foreground transition-transform duration-200",
+                  isHeaderExpanded && "rotate-180",
+                )}
+              />
+            </button>
+          </div>
+        </div>
+        <div className="absolute top-full left-0 right-0 z-20">
+          <HeightTransition>
+            {isHeaderExpanded && (
+              <div className="bg-card border-b border-border px-6 py-4 shadow-lg">
+                <ChatSecondaryPanel todos={todos} />
+              </div>
+            )}
+          </HeightTransition>
+        </div>
+      </div>
+      {/* Connection Error Banner */}
+      {connectionStatus === "error" && error && (
+        <div className="bg-red-500/10 border-b border-red-500/20 px-6 py-4">
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex-1">
+              <h3 className="text-sm font-semibold text-red-500 mb-1">
+                Connection Error
+              </h3>
+              <p className="text-sm text-foreground whitespace-pre-line">
+                {error}
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={connect}
+              className="px-4 py-2 text-sm rounded-lg bg-red-500 text-white font-medium hover:bg-red-600 transition-colors"
+            >
+              Retry
+            </button>
+          </div>
+        </div>
+      )}
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto py-4">
+        {messages.length === 0 ? (
+          <div className="flex items-center justify-center h-full">
+            <div className="text-center text-muted-foreground">
+              <p className="text-lg mb-2">No messages yet</p>
+              <p className="text-sm">
+                {connectionStatus === "connected"
+                  ? "Start a conversation with the agent"
+                  : "Type a message to test the UI (no server connected)"}
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-4 px-4">
+            {messages.map((message) => (
+              <Message key={message.id} message={message}>
+                <MessageContent
+                  message={message}
+                  thinkingDisplayStyle="collapsible"
+                />
+              </Message>
+            ))}
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+      {/* Input area */}
+      <div className="p-4 bg-background">
+        <ChatInputRoot client={client}>
+          <ChatInputField placeholder="Type a message..." />
+          <ChatInputToolbar className="justify-end">
+            <ChatInputSubmit>
+              <SendIcon className="size-4" />
+            </ChatInputSubmit>
+          </ChatInputToolbar>
+        </ChatInputRoot>
+      </div>
+    </div>
+  );
+}

package/src/config.ts ADDED Viewed

@@ -0,0 +1,14 @@
+/**
+ * Get the agent server URL from environment variables
+ * Falls back to localhost:3000 if not set
+ */
+export function getAgentServerUrl(): string {
+  return import.meta.env.VITE_AGENT_URL || "http://localhost:3000";
+}
+/**
+ * Application configuration
+ */
+export const config = {
+  agentServerUrl: getAgentServerUrl(),
+} as const;

package/src/env.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+interface ImportMetaEnv {
+  readonly VITE_AGENT_URL?: string;
+}
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/src/main.tsx ADDED Viewed

@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.js";
+import "@townco/ui/styles/global.css";
+const rootElement = document.getElementById("root");
+if (!rootElement) throw new Error("Root element not found");
+ReactDOM.createRoot(rootElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/vite.config.ts ADDED Viewed

@@ -0,0 +1,94 @@
+import path from "node:path";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+// Create a stub module for stdio transport to prevent Node.js dependencies
+const stdioStubPlugin = () => ({
+  name: "stdio-stub",
+  resolveId(id: string) {
+    // Intercept stdio transport imports and replace with stub
+    if (
+      id.includes("sdk/transports/stdio") ||
+      id.includes("transports/stdio.js")
+    ) {
+      return id;
+    }
+    return null;
+  },
+  load(id: string) {
+    if (
+      id.includes("sdk/transports/stdio") ||
+      id.includes("transports/stdio.js")
+    ) {
+      // Return a stub implementation that throws an error if used
+      return `
+        export class StdioTransport {
+          constructor() {
+            throw new Error("StdioTransport is not available in the browser. Use HttpTransport or WebSocketTransport instead.");
+          }
+          async connect() { throw new Error("StdioTransport not available in browser"); }
+          async disconnect() {}
+          async send() { throw new Error("StdioTransport not available in browser"); }
+          async *receive() { throw new Error("StdioTransport not available in browser"); }
+          isConnected() { return false; }
+          onSessionUpdate() { return () => {}; }
+          onError() { return () => {}; }
+        }
+        export const StdioTransportOptions = {};
+      `;
+    }
+    return null;
+  },
+});
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), stdioStubPlugin()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  optimizeDeps: {
+    exclude: [],
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: (id) => {
+          // Split React and ReactDOM into their own chunk
+          if (
+            id.includes("node_modules/react") ||
+            id.includes("node_modules/react-dom")
+          ) {
+            return "react";
+          }
+          // Split Radix UI components into their own chunk
+          if (id.includes("node_modules/@radix-ui")) {
+            return "radix";
+          }
+          // Split markdown rendering into its own chunk
+          if (
+            id.includes("node_modules/react-markdown") ||
+            id.includes("node_modules/remark-gfm")
+          ) {
+            return "markdown";
+          }
+          // Split lucide icons into their own chunk
+          if (id.includes("node_modules/lucide-react")) {
+            return "icons";
+          }
+          // Split ACP SDK into its own chunk
+          if (id.includes("node_modules/@agentclientprotocol")) {
+            return "acp-sdk";
+          }
+          // Split other node_modules into a vendor chunk
+          if (id.includes("node_modules")) {
+            return "vendor";
+          }
+        },
+      },
+    },
+    chunkSizeWarningLimit: 600, // Slightly increase limit to avoid false positives
+  },
+});