create-tether-app 0.1.0

package/template/frontend/App.css

@@ -0,0 +1,58 @@
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.app-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--color-border);
+  background-color: var(--color-surface);
+}
+
+.app-header h1 {
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.app-main {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.loading,
+.error {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  color: var(--color-text-muted);
+}
+
+.error {
+  color: var(--color-error);
+}
+
+.error.disconnected {
+  color: var(--color-warning, #d97706);
+}
+
+.error-detail {
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  max-width: 400px;
+  text-align: center;
+  white-space: pre-wrap;
+}
+
+.loading-hint {
+  font-size: 0.75rem;
+  opacity: 0.7;
+}

package/template/frontend/App.tsx

@@ -0,0 +1,62 @@
+import { useBackendStatus } from "./hooks/useApi";
+import { Chat } from "./components/Chat";
+import { ModelStatus } from "./components/ModelStatus";
+import "./App.css";
+
+function App() {
+  const { status, health, modelInfo, error, retry, changeModel } =
+    useBackendStatus();
+
+  return (
+    <div className="app">
+      <header className="app-header">
+        <h1>Tether App</h1>
+        <ModelStatus
+          status={status}
+          health={health}
+          modelInfo={modelInfo}
+          onModelChange={changeModel}
+        />
+      </header>
+
+      <main className="app-main">
+        {status === "connecting" && (
+          <div className="loading">
+            <div className="spinner" />
+            <p>Connecting to backend...</p>
+          </div>
+        )}
+
+        {status === "loading-model" && (
+          <div className="loading">
+            <div className="spinner" />
+            <p>Loading model...</p>
+            <p className="loading-hint">
+              This may take a moment for large models
+            </p>
+          </div>
+        )}
+
+        {status === "disconnected" && (
+          <div className="error disconnected">
+            <p>Connection lost</p>
+            <p className="error-detail">The backend is no longer responding</p>
+            <button onClick={retry}>Reconnect</button>
+          </div>
+        )}
+
+        {status === "error" && (
+          <div className="error">
+            <p>Failed to connect</p>
+            {error && <p className="error-detail">{error.message}</p>}
+            <button onClick={retry}>Retry</button>
+          </div>
+        )}
+
+        {status === "connected" && <Chat />}
+      </main>
+    </div>
+  );
+}
+
+export default App;

package/template/frontend/components/Chat.css

@@ -0,0 +1,220 @@
+.chat {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+}
+
+/* Drag and drop overlay */
+.chat-dragging {
+  outline: 2px dashed var(--color-primary);
+  outline-offset: -4px;
+}
+
+.drop-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(var(--color-primary-rgb, 147, 51, 234), 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.drop-message {
+  background: var(--color-primary);
+  color: white;
+  padding: 1rem 2rem;
+  border-radius: var(--radius);
+  font-weight: 500;
+  font-size: 1rem;
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.chat-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-muted);
+  text-align: center;
+}
+
+.chat-empty p:first-child {
+  font-size: 1.125rem;
+  font-weight: 500;
+}
+
+.chat-hint {
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+}
+
+.chat-loading {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+}
+
+.chat-error {
+  padding: 0.75rem;
+  background-color: rgba(248, 113, 113, 0.1);
+  border: 1px solid var(--color-error);
+  border-radius: var(--radius);
+  color: var(--color-error);
+  font-size: 0.875rem;
+}
+
+.chat-form {
+  padding: 1rem;
+  border-top: 1px solid var(--color-border);
+  background-color: var(--color-surface);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.chat-input-wrapper {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.chat-input {
+  flex: 1;
+}
+
+.chat-options {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.thinking-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  user-select: none;
+}
+
+.thinking-toggle input[type="checkbox"] {
+  width: 1rem;
+  height: 1rem;
+  accent-color: rgb(147, 51, 234);
+  cursor: pointer;
+}
+
+.thinking-toggle:hover {
+  color: var(--color-text);
+}
+
+.toggle-label {
+  font-weight: 500;
+}
+
+.clear-button {
+  background-color: transparent;
+  color: var(--color-text-muted);
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+}
+
+.clear-button:hover {
+  background-color: var(--color-surface-hover);
+  color: var(--color-text);
+}
+
+/* Image upload button */
+.image-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  background: transparent;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.image-button:hover:not(:disabled) {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+
+.image-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Image warning */
+.image-warning {
+  font-size: 0.75rem;
+  color: var(--color-warning, #d97706);
+  background: rgba(217, 119, 6, 0.1);
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  margin-bottom: 0.5rem;
+}
+
+/* Pending images preview */
+.pending-images {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  padding-bottom: 0.5rem;
+}
+
+.pending-image {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  border-radius: 6px;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+}
+
+.pending-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.remove-image {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.remove-image:hover {
+  background: rgba(0, 0, 0, 0.8);
+}

package/template/frontend/components/Chat.tsx

@@ -0,0 +1,284 @@
+import { useState, useRef, useEffect } from "react";
+import { useChat } from "../hooks/useApi";
+import { ChatMessage } from "./ChatMessage";
+import "./Chat.css";
+
+export function Chat() {
+  const [input, setInput] = useState("");
+  const [thinkingEnabled, setThinkingEnabled] = useState(true);
+  const [pendingImages, setPendingImages] = useState<string[]>([]);
+  const [isDragging, setIsDragging] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { messages, isLoading, error, sendMessage, clearMessages } = useChat();
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  const fileToBase64 = (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        // Remove data URL prefix (e.g., "data:image/png;base64,")
+        const result = reader.result as string;
+        const base64 = result.split(",")[1];
+        resolve(base64);
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  };
+
+  const processFiles = async (files: FileList | File[]) => {
+    const newImages: string[] = [];
+    for (const file of Array.from(files)) {
+      if (file.type.startsWith("image/")) {
+        const base64 = await fileToBase64(file);
+        newImages.push(base64);
+      }
+    }
+    if (newImages.length > 0) {
+      setPendingImages((prev) => [...prev, ...newImages]);
+    }
+  };
+
+  const handleImageSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files) return;
+
+    await processFiles(files);
+
+    // Reset input so same file can be selected again
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  // Drag and drop handlers
+  const dragCounterRef = useRef(0);
+
+  const handleDragEnter = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current++;
+    if (e.dataTransfer.types.includes("Files")) {
+      setIsDragging(true);
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
+    if (dragCounterRef.current === 0) {
+      setIsDragging(false);
+    }
+  };
+
+  const handleDrop = async (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current = 0;
+    setIsDragging(false);
+
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+      await processFiles(files);
+    }
+  };
+
+  // Paste handler
+  const handlePaste = async (e: React.ClipboardEvent) => {
+    const items = e.clipboardData.items;
+    const imageFiles: File[] = [];
+
+    for (const item of Array.from(items)) {
+      if (item.type.startsWith("image/")) {
+        const file = item.getAsFile();
+        if (file) {
+          imageFiles.push(file);
+        }
+      }
+    }
+
+    if (imageFiles.length > 0) {
+      e.preventDefault(); // Prevent pasting image as text
+      await processFiles(imageFiles);
+    }
+  };
+
+  const removeImage = (index: number) => {
+    setPendingImages((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if ((!input.trim() && pendingImages.length === 0) || isLoading) return;
+
+    const message = input;
+    const images = pendingImages.length > 0 ? pendingImages : undefined;
+    setInput("");
+    setPendingImages([]);
+
+    try {
+      await sendMessage(message, { think: thinkingEnabled, images });
+    } catch {
+      // Error is already handled in the hook
+    }
+  };
+
+  return (
+    <div
+      className={`chat ${isDragging ? "chat-dragging" : ""}`}
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      {isDragging && (
+        <div className="drop-overlay">
+          <div className="drop-message">Drop images here</div>
+        </div>
+      )}
+      <div className="chat-messages">
+        {messages.length === 0 && (
+          <div className="chat-empty">
+            <p>Start a conversation</p>
+            <p className="chat-hint">
+              Type a message below to begin chatting with the AI
+            </p>
+          </div>
+        )}
+
+        {messages.map((message, index) => (
+          <ChatMessage key={index} message={message} />
+        ))}
+
+        {isLoading && (
+          <div className="chat-loading">
+            <div className="spinner" />
+            <span>Thinking...</span>
+          </div>
+        )}
+
+        {error && (
+          <div className="chat-error">
+            <p>Error: {error.message}</p>
+          </div>
+        )}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      <form className="chat-form" onSubmit={handleSubmit}>
+        {pendingImages.length > 0 && (
+          <>
+            {thinkingEnabled && (
+              <div className="image-warning">
+                Thinking mode is not supported with images and will be disabled
+                for this message.
+              </div>
+            )}
+            <div className="pending-images">
+              {pendingImages.map((img, index) => (
+                <div key={index} className="pending-image">
+                  <img
+                    src={`data:image/jpeg;base64,${img}`}
+                    alt={`Pending ${index + 1}`}
+                  />
+                  <button
+                    type="button"
+                    className="remove-image"
+                    onClick={() => removeImage(index)}
+                    aria-label="Remove image"
+                  >
+                    ×
+                  </button>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+        <div className="chat-input-wrapper">
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleImageSelect}
+            accept="image/*"
+            multiple
+            hidden
+          />
+          <button
+            type="button"
+            className="image-button"
+            onClick={() => fileInputRef.current?.click()}
+            disabled={isLoading}
+            title="Add image (vision models)"
+          >
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+              <circle cx="8.5" cy="8.5" r="1.5" />
+              <polyline points="21 15 16 10 5 21" />
+            </svg>
+          </button>
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onPaste={handlePaste}
+            placeholder="Type a message..."
+            disabled={isLoading}
+            className="chat-input"
+          />
+          <button
+            type="submit"
+            disabled={
+              isLoading || (!input.trim() && pendingImages.length === 0)
+            }
+          >
+            Send
+          </button>
+        </div>
+        <div className="chat-options">
+          <label className="thinking-toggle">
+            <input
+              type="checkbox"
+              checked={thinkingEnabled}
+              onChange={(e) => setThinkingEnabled(e.target.checked)}
+              disabled={isLoading}
+            />
+            <span className="toggle-label">Thinking (supported models)</span>
+          </label>
+          {messages.length > 0 && (
+            <button
+              type="button"
+              onClick={clearMessages}
+              className="clear-button"
+            >
+              Clear Chat
+            </button>
+          )}
+        </div>
+      </form>
+    </div>
+  );
+}