create-tether-app 0.1.0

package/template/frontend/hooks/useApi.ts

@@ -0,0 +1,334 @@
+import { useState, useEffect, useCallback } from "react";
+import { invoke } from "@tauri-apps/api/core";
+
+// Types
+export interface ChatMessage {
+  role: "user" | "assistant" | "system";
+  content: string;
+  images?: string[];
+  thinking?: string;
+  timestamp?: number;
+}
+
+export interface ChatRequest {
+  message: string;
+  images?: string[];
+  history?: ChatMessage[];
+  model?: string;
+  temperature?: number;
+  max_tokens?: number;
+  think?: boolean;
+}
+
+export interface ChatResponse {
+  response: string;
+  thinking?: string;
+  tokens_used?: number;
+  model?: string;
+  finish_reason?: "stop" | "length" | "error";
+}
+
+export interface HealthResponse {
+  status: "healthy" | "unhealthy";
+  model_loaded: boolean;
+  version: string;
+}
+
+export interface ModelsResponse {
+  available: boolean;
+  current_model: string | null;
+  models: string[];
+  backend: string;
+  error: string | null;
+}
+
+export interface SwitchModelResponse {
+  success: boolean;
+  previous_model: string | null;
+  current_model: string;
+  message: string;
+}
+
+export type ConnectionStatus =
+  | "connecting"
+  | "loading-model"
+  | "connected"
+  | "disconnected"
+  | "error";
+
+// Configuration
+let API_URL = "http://127.0.0.1:8000";
+const MAX_RETRIES = 30;
+const RETRY_DELAY = 1000;
+const REQUEST_TIMEOUT = 120000; // 2 minutes for thinking models
+const HEALTH_CHECK_INTERVAL = 10000; // Check health every 10 seconds
+
+// Get the API port from Tauri
+async function getApiUrl(): Promise<string> {
+  try {
+    const port = await invoke<number>("get_api_port");
+    API_URL = `http://127.0.0.1:${port}`;
+    return API_URL;
+  } catch {
+    // Fallback for development without Tauri
+    return API_URL;
+  }
+}
+
+// API functions
+async function apiFetch<T>(
+  path: string,
+  options: RequestInit = {},
+): Promise<T> {
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), REQUEST_TIMEOUT);
+
+  try {
+    const response = await fetch(`${API_URL}${path}`, {
+      ...options,
+      signal: controller.signal,
+      headers: {
+        "Content-Type": "application/json",
+        ...options.headers,
+      },
+    });
+
+    if (!response.ok) {
+      const error = await response
+        .json()
+        .catch(() => ({ error: "Unknown error" }));
+      throw new Error(error.error || `HTTP ${response.status}`);
+    }
+
+    return response.json();
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}
+
+async function checkHealth(): Promise<HealthResponse> {
+  return apiFetch<HealthResponse>("/health");
+}
+
+async function fetchModels(): Promise<ModelsResponse> {
+  return apiFetch<ModelsResponse>("/models");
+}
+
+async function switchModel(model: string): Promise<SwitchModelResponse> {
+  return apiFetch<SwitchModelResponse>("/models/switch", {
+    method: "POST",
+    body: JSON.stringify({ model }),
+  });
+}
+
+async function waitForBackend(): Promise<boolean> {
+  // First, get the correct API URL from Tauri
+  await getApiUrl();
+
+  for (let i = 0; i < MAX_RETRIES; i++) {
+    try {
+      const health = await checkHealth();
+      if (health.status === "healthy") {
+        return true;
+      }
+    } catch {
+      // Continue retrying
+    }
+    await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY));
+  }
+  return false;
+}
+
+async function sendChatRequest(request: ChatRequest): Promise<ChatResponse> {
+  return apiFetch<ChatResponse>("/chat", {
+    method: "POST",
+    body: JSON.stringify(request),
+  });
+}
+
+// Hooks
+export function useBackendStatus() {
+  const [status, setStatus] = useState<ConnectionStatus>("connecting");
+  const [health, setHealth] = useState<HealthResponse | null>(null);
+  const [modelInfo, setModelInfo] = useState<ModelsResponse | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    let healthCheckInterval: ReturnType<typeof setInterval> | null = null;
+
+    const connect = async () => {
+      setStatus("connecting");
+      setError(null);
+
+      try {
+        const ready = await waitForBackend();
+        if (!mounted) return;
+
+        if (ready) {
+          // Backend is reachable, now check model status
+          setStatus("loading-model");
+
+          const [healthData, modelsData] = await Promise.all([
+            checkHealth(),
+            fetchModels().catch(() => null),
+          ]);
+          if (!mounted) return;
+          setHealth(healthData);
+          setModelInfo(modelsData);
+
+          // Check if model is loaded
+          if (healthData.model_loaded) {
+            setStatus("connected");
+          } else if (modelsData?.error) {
+            setStatus("error");
+            setError(new Error(modelsData.error));
+          } else {
+            // Model not loaded but no error - still connected
+            setStatus("connected");
+          }
+
+          // Start periodic health checks
+          healthCheckInterval = setInterval(async () => {
+            if (!mounted) return;
+            try {
+              const healthData = await checkHealth();
+              if (!mounted) return;
+              setHealth(healthData);
+              // If we were disconnected but now healthy, reconnect
+              setStatus((prev) =>
+                prev === "disconnected" ? "connected" : prev,
+              );
+            } catch {
+              if (!mounted) return;
+              setStatus("disconnected");
+              setError(new Error("Lost connection to backend"));
+            }
+          }, HEALTH_CHECK_INTERVAL);
+        } else {
+          setStatus("error");
+          setError(
+            new Error("Backend failed to start. Check terminal for errors."),
+          );
+        }
+      } catch (err) {
+        if (!mounted) return;
+        setStatus("error");
+        setError(err instanceof Error ? err : new Error("Connection failed"));
+      }
+    };
+
+    connect();
+
+    return () => {
+      mounted = false;
+      if (healthCheckInterval) {
+        clearInterval(healthCheckInterval);
+      }
+    };
+  }, []);
+
+  const retry = useCallback(async () => {
+    setStatus("connecting");
+    setError(null);
+
+    try {
+      const ready = await waitForBackend();
+      if (ready) {
+        const [healthData, modelsData] = await Promise.all([
+          checkHealth(),
+          fetchModels().catch(() => null),
+        ]);
+        setHealth(healthData);
+        setModelInfo(modelsData);
+        setStatus("connected");
+      } else {
+        setStatus("error");
+        setError(new Error("Backend failed to become healthy"));
+      }
+    } catch (err) {
+      setStatus("error");
+      setError(err instanceof Error ? err : new Error("Connection failed"));
+    }
+  }, []);
+
+  const changeModel = useCallback(async (model: string) => {
+    try {
+      const result = await switchModel(model);
+      if (result.success) {
+        // Refresh model info
+        const modelsData = await fetchModels().catch(() => null);
+        setModelInfo(modelsData);
+      }
+      return result;
+    } catch (err) {
+      throw err instanceof Error ? err : new Error("Failed to switch model");
+    }
+  }, []);
+
+  return { status, health, modelInfo, error, retry, changeModel };
+}
+
+export function useChat() {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const sendMessage = useCallback(
+    async (
+      content: string,
+      options?: Partial<Omit<ChatRequest, "message">>,
+    ) => {
+      const userMessage: ChatMessage = {
+        role: "user",
+        content,
+        images: options?.images,
+        timestamp: Date.now(),
+      };
+
+      setMessages((prev) => [...prev, userMessage]);
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        const response = await sendChatRequest({
+          message: content,
+          images: options?.images,
+          history: messages,
+          ...options,
+        });
+
+        const assistantMessage: ChatMessage = {
+          role: "assistant",
+          content: response.response,
+          thinking: response.thinking,
+          timestamp: Date.now(),
+        };
+
+        setMessages((prev) => [...prev, assistantMessage]);
+        return response;
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error("Chat failed");
+        setError(error);
+        throw error;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [messages],
+  );
+
+  const clearMessages = useCallback(() => {
+    setMessages([]);
+    setError(null);
+  }, []);
+
+  return {
+    messages,
+    isLoading,
+    error,
+    sendMessage,
+    clearMessages,
+    setMessages,
+  };
+}

package/template/frontend/index.css

@@ -0,0 +1,92 @@
+:root {
+  --color-bg: #0f0f0f;
+  --color-surface: #1a1a1a;
+  --color-surface-hover: #2a2a2a;
+  --color-border: #333;
+  --color-text: #f0f0f0;
+  --color-text-muted: #888;
+  --color-primary: #646cff;
+  --color-primary-hover: #535bf2;
+  --color-success: #4ade80;
+  --color-error: #f87171;
+  --color-warning: #fbbf24;
+  --radius: 8px;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  font-family: Inter, system-ui, -apple-system, sans-serif;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  line-height: 1.5;
+}
+
+#root {
+  height: 100%;
+}
+
+button {
+  font-family: inherit;
+  font-size: 0.9rem;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: var(--radius);
+  background-color: var(--color-primary);
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+button:hover {
+  background-color: var(--color-primary-hover);
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+input,
+textarea {
+  font-family: inherit;
+  font-size: 1rem;
+  padding: 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background-color: var(--color-surface);
+  color: var(--color-text);
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+input:focus,
+textarea:focus {
+  border-color: var(--color-primary);
+}
+
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/template/frontend/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/template/frontend/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/index.html.template

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/tether.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{PROJECT_NAME}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/frontend/main.tsx"></script>
+  </body>
+</html>

package/template/package.json.template

@@ -0,0 +1,33 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "dev:py": "cd backend && uv run uvicorn app.main:app --reload --port 8000",
+    "dev:all": "concurrently \"pnpm dev\" \"pnpm dev:py\"",
+    "build": "tsc && vite build",
+    "build:app": "pnpm python:build && pnpm build && pnpm tauri build",
+    "preview": "vite preview",
+    "tauri": "tauri",
+    "tauri:dev": "tauri dev",
+    "tauri:build": "tauri build",
+    "python:build": "cd backend && uv sync --extra build && uv run python scripts/build.py"
+  },
+  "dependencies": {
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "react-markdown": "^9.0.0"
+  },
+  "devDependencies": {
+    "@tauri-apps/api": "^2.0.0",
+    "@tauri-apps/cli": "^2.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "concurrently": "^9.0.0",
+    "typescript": "^5.4.0",
+    "vite": "^5.4.0"
+  }
+}

package/template/postcss.config.js.template

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/template/public/tether.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#646cff;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#535bf2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <circle cx="50" cy="50" r="45" fill="url(#grad)"/>
+  <path d="M30 35 L50 25 L70 35 L70 65 L50 75 L30 65 Z" fill="none" stroke="white" stroke-width="3"/>
+  <circle cx="50" cy="50" r="8" fill="white"/>
+  <line x1="50" y1="42" x2="50" y2="25" stroke="white" stroke-width="2"/>
+  <line x1="50" y1="58" x2="50" y2="75" stroke="white" stroke-width="2"/>
+  <line x1="42" y1="50" x2="30" y2="50" stroke="white" stroke-width="2"/>
+  <line x1="58" y1="50" x2="70" y2="50" stroke="white" stroke-width="2"/>
+</svg>

package/template/src-tauri/.cargo/config.toml

@@ -0,0 +1,66 @@
+# Cargo configuration for faster development builds
+# See docs/development.md for more optimization tips
+
+# =============================================================================
+# PROFILE SETTINGS (apply to all platforms)
+# =============================================================================
+
+[profile.dev]
+opt-level = 0        # Skip optimizations (faster compile)
+lto = false          # No link-time optimization
+incremental = true   # Incremental compilation
+codegen-units = 256  # More parallelism (faster compile, slower runtime)
+
+[profile.dev.package."*"]
+opt-level = 2        # Optimize dependencies (they rarely change)
+
+[profile.release]
+lto = "thin"         # Thin LTO (balance of speed and size)
+strip = true         # Strip debug symbols
+codegen-units = 1    # Better optimization
+
+# =============================================================================
+# PLATFORM-SPECIFIC OPTIMIZATIONS (auto-applied based on target)
+# =============================================================================
+
+# macOS - Apple Silicon
+[target.aarch64-apple-darwin]
+rustflags = ["-C", "split-debuginfo=unpacked"]
+
+# macOS - Intel
+[target.x86_64-apple-darwin]
+rustflags = ["-C", "split-debuginfo=unpacked"]
+
+# Linux - x86_64
+[target.x86_64-unknown-linux-gnu]
+rustflags = ["-C", "split-debuginfo=unpacked"]
+
+# Linux - ARM64 (Raspberry Pi, AWS Graviton, etc.)
+[target.aarch64-unknown-linux-gnu]
+rustflags = ["-C", "split-debuginfo=unpacked"]
+
+# Windows - No split-debuginfo (not supported), uses default linker
+# [target.x86_64-pc-windows-msvc]
+# Uses default settings
+
+# =============================================================================
+# OPTIONAL: FASTER LINKERS
+# =============================================================================
+# Uncomment your platform section below AND modify the rustflags above
+# to combine with split-debuginfo.
+#
+# macOS (requires: brew install llvm):
+#   Add to aarch64-apple-darwin or x86_64-apple-darwin above:
+#   rustflags = ["-C", "split-debuginfo=unpacked", "-C", "link-arg=-fuse-ld=/opt/homebrew/opt/llvm/bin/ld64.lld"]
+#
+# Linux (requires: sudo apt install mold OR sudo apt install lld):
+#   Add to x86_64-unknown-linux-gnu above:
+#   rustflags = ["-C", "split-debuginfo=unpacked", "-C", "link-arg=-fuse-ld=mold"]
+#
+# =============================================================================
+# SCCACHE (Recommended for all platforms)
+# =============================================================================
+# Caches compilation results across all Rust projects.
+# Install: brew install sccache (macOS) or cargo install sccache
+# Enable:  export RUSTC_WRAPPER=sccache (add to shell profile)
+# =============================================================================