fastapi-fullstack 0.1.7__py3-none-any.whl → 0.1.15__py3-none-any.whl

fastapi_gen/template/{{cookiecutter.project_slug}}/docker-compose.yml

@@ -47,6 +47,12 @@ services:
 {%- endif %}
 {%- endif %}
     restart: unless-stopped
+{%- if cookiecutter.enable_prometheus %}
+    labels:
+      - "prometheus.scrape=true"
+      - "prometheus.port={{ cookiecutter.backend_port }}"
+      - "prometheus.path=/metrics"
+{%- endif %}
 
 {%- if cookiecutter.use_postgresql %}
 
@@ -222,6 +228,39 @@ services:
     restart: unless-stopped
 {%- endif %}
 
+{%- if cookiecutter.use_arq %}
+
+  arq_worker:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    container_name: {{ cookiecutter.project_slug }}_arq_worker
+    volumes:
+      - ./backend/app:/app/app:ro
+    command: arq app.worker.arq_app.WorkerSettings
+    env_file:
+      - ./backend/.env
+    environment:
+      - DEBUG=true
+{%- if cookiecutter.use_postgresql %}
+      - POSTGRES_HOST=db
+{%- endif %}
+      - REDIS_HOST=redis
+      - ARQ_REDIS_HOST=redis
+      - ARQ_REDIS_PORT=6379
+      - ARQ_REDIS_DB=2
+    networks:
+      - backend
+    depends_on:
+      redis:
+        condition: service_healthy
+{%- if cookiecutter.use_postgresql %}
+      db:
+        condition: service_healthy
+{%- endif %}
+    restart: unless-stopped
+{%- endif %}
+
 networks:
   backend:
     driver: bridge

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/.env.example

@@ -3,6 +3,11 @@ BACKEND_URL=http://localhost:{{ cookiecutter.backend_port }}
 
 # WebSocket URL for real-time features
 BACKEND_WS_URL=ws://localhost:{{ cookiecutter.backend_port }}
+{%- if cookiecutter.enable_oauth %}
+
+# Public API URL for OAuth redirects (exposed to browser)
+NEXT_PUBLIC_API_URL=http://localhost:{{ cookiecutter.backend_port }}
+{%- endif %}
 {%- if cookiecutter.enable_logfire %}
 
 # Logfire/OpenTelemetry (server-side instrumentation)

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/components/chat/chat-container.tsx

@@ -4,8 +4,10 @@ import { useEffect, useRef, useCallback } from "react";
 import { useChat, useLocalChat } from "@/hooks";
 import { MessageList } from "./message-list";
 import { ChatInput } from "./chat-input";
+import { ToolApprovalDialog } from "./tool-approval-dialog";
 import { Button } from "@/components/ui";
 import { Wifi, WifiOff, RotateCcw, Bot } from "lucide-react";
+import type { PendingApproval, Decision } from "@/types";
 {%- if cookiecutter.enable_conversation_persistence and cookiecutter.use_database %}
 import { useConversationStore, useChatStore, useAuthStore } from "@/stores";
 import { useConversations } from "@/hooks";
@@ -46,6 +48,8 @@ function AuthenticatedChatContainer() {
     disconnect,
     sendMessage,
     clearMessages,
+    pendingApproval,
+    sendResumeDecisions,
   } = useChat({
     conversationId: currentConversationId,
     onConversationCreated: handleConversationCreated,
@@ -118,6 +122,8 @@ function AuthenticatedChatContainer() {
       sendMessage={sendMessage}
       clearMessages={clearMessages}
       messagesEndRef={messagesEndRef}
+      pendingApproval={pendingApproval}
+      onResumeDecisions={sendResumeDecisions}
     />
   );
 }
@@ -132,6 +138,8 @@ function LocalChatContainer() {
     disconnect,
     sendMessage,
     clearMessages,
+    pendingApproval,
+    sendResumeDecisions,
   } = useLocalChat();
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -153,6 +161,8 @@ function LocalChatContainer() {
       sendMessage={sendMessage}
       clearMessages={clearMessages}
       messagesEndRef={messagesEndRef}
+      pendingApproval={pendingApproval}
+      onResumeDecisions={sendResumeDecisions}
     />
   );
 }
@@ -170,6 +180,9 @@ interface ChatUIProps {
   sendMessage: (content: string) => void;
   clearMessages: () => void;
   messagesEndRef: React.RefObject<HTMLDivElement | null>;
+  // Human-in-the-Loop support
+  pendingApproval?: PendingApproval | null;
+  onResumeDecisions?: (decisions: Decision[]) => void;
 }
 
 function ChatUI({
@@ -179,6 +192,8 @@ function ChatUI({
   sendMessage,
   clearMessages,
   messagesEndRef,
+  pendingApproval,
+  onResumeDecisions,
 }: ChatUIProps) {
   return (
     <div className="flex flex-col h-full max-w-4xl mx-auto w-full">
@@ -199,11 +214,23 @@ function ChatUI({
         <div ref={messagesEndRef} />
       </div>
 
+      {/* Human-in-the-Loop: Tool Approval Dialog */}
+      {pendingApproval && onResumeDecisions && (
+        <div className="px-2 pb-2 sm:px-4 sm:pb-2">
+          <ToolApprovalDialog
+            actionRequests={pendingApproval.actionRequests}
+            reviewConfigs={pendingApproval.reviewConfigs}
+            onDecisions={onResumeDecisions}
+            disabled={!isConnected}
+          />
+        </div>
+      )}
+
       <div className="px-2 pb-2 sm:px-4 sm:pb-4">
         <div className="rounded-xl border bg-card shadow-sm p-3 sm:p-4">
           <ChatInput
             onSend={sendMessage}
-            disabled={!isConnected || isProcessing}
+            disabled={!isConnected || isProcessing || !!pendingApproval}
             isProcessing={isProcessing}
           />
           <div className="flex items-center justify-between mt-3 pt-3 border-t">

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/components/chat/index.ts

@@ -2,6 +2,7 @@ export { ChatContainer } from "./chat-container";
 export { MessageList } from "./message-list";
 export { MessageItem } from "./message-item";
 export { ToolCallCard } from "./tool-call-card";
+export { ToolApprovalDialog } from "./tool-approval-dialog";
 export { ChatInput } from "./chat-input";
 export { LocalConversationSidebar, ChatSidebarToggle } from "./local-conversation-sidebar";
 export { CopyButton } from "./copy-button";

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/components/chat/message-item.tsx

@@ -9,22 +9,40 @@ import { User, Bot } from "lucide-react";
 
 interface MessageItemProps {
   message: ChatMessage;
+  groupPosition?: "first" | "middle" | "last" | "single";
 }
 
-export function MessageItem({ message }: MessageItemProps) {
+export function MessageItem({ message, groupPosition }: MessageItemProps) {
   const isUser = message.role === "user";
+  const isGrouped = groupPosition && groupPosition !== "single";
 
   return (
     <div
       className={cn(
-        "group flex gap-2 sm:gap-4 py-3 sm:py-4",
+        "group flex gap-2 sm:gap-4 relative overflow-visible",
+        isGrouped ? "py-2 sm:py-3" : "py-3 sm:py-4",
         isUser && "flex-row-reverse"
       )}
     >
+      {/* Timeline connector line for grouped messages */}
+      {isGrouped && !isUser && (
+        <div
+          className="absolute left-[15px] sm:left-[17px] w-0.5 bg-orange-500/40"
+          style={
+            groupPosition === "first"
+              ? { top: "24px", bottom: "0" }
+              : groupPosition === "last"
+                ? { top: "0", height: "24px" }
+                : { top: "0", bottom: "0" }
+          }
+        />
+      )}
+
       <div
         className={cn(
-          "flex-shrink-0 w-8 h-8 sm:w-9 sm:h-9 rounded-full flex items-center justify-center",
-          isUser ? "bg-primary text-primary-foreground" : "bg-orange-500/10 text-orange-500"
+          "flex-shrink-0 w-8 h-8 sm:w-9 sm:h-9 rounded-full flex items-center justify-center z-10",
+          isUser ? "bg-primary text-primary-foreground" : "bg-orange-500/10 text-orange-500",
+          isGrouped && !isUser && "ring-2 ring-background"
         )}
       >
         {isUser ? <User className="h-4 w-4" /> : <Bot className="h-4 w-4 sm:h-5 sm:w-5" />}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/components/chat/message-list.tsx

@@ -8,10 +8,30 @@ interface MessageListProps {
 }
 
 export function MessageList({ messages }: MessageListProps) {
+  // Calculate group positions for timeline connector
+  const getGroupPosition = (
+    message: ChatMessage,
+    index: number
+  ): "first" | "middle" | "last" | "single" | undefined => {
+    if (!message.groupId) return undefined;
+
+    const groupMessages = messages.filter((m) => m.groupId === message.groupId);
+    if (groupMessages.length <= 1) return "single";
+
+    const groupIndex = groupMessages.findIndex((m) => m.id === message.id);
+    if (groupIndex === 0) return "first";
+    if (groupIndex === groupMessages.length - 1) return "last";
+    return "middle";
+  };
+
   return (
-    <div className="space-y-4">
-      {messages.map((message) => (
-        <MessageItem key={message.id} message={message} />
+    <div className="space-y-0">
+      {messages.map((message, index) => (
+        <MessageItem
+          key={message.id}
+          message={message}
+          groupPosition={getGroupPosition(message, index)}
+        />
       ))}
     </div>
   );

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/components/chat/tool-approval-dialog.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui";
+import type { ActionRequest, ReviewConfig, Decision } from "@/types";
+import { Wrench, AlertTriangle } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface ToolApprovalDialogProps {
+  actionRequests: ActionRequest[];
+  reviewConfigs: ReviewConfig[];
+  onDecisions: (decisions: Decision[]) => void;
+  disabled?: boolean;
+}
+
+export function ToolApprovalDialog({
+  actionRequests,
+  reviewConfigs,
+  onDecisions,
+  disabled = false,
+}: ToolApprovalDialogProps) {
+  // Store edited args for each action
+  const [editedArgs, setEditedArgs] = useState<Record<string, string>>(() =>
+    Object.fromEntries(
+      actionRequests.map((a) => [a.id, JSON.stringify(a.args, null, 2)])
+    )
+  );
+  const [hasChanges, setHasChanges] = useState(false);
+
+  const handleArgsChange = (id: string, text: string) => {
+    setEditedArgs((prev) => ({ ...prev, [id]: text }));
+    setHasChanges(true);
+  };
+
+  const handleCancel = () => {
+    // Reset to original args
+    setEditedArgs(
+      Object.fromEntries(
+        actionRequests.map((a) => [a.id, JSON.stringify(a.args, null, 2)])
+      )
+    );
+    setHasChanges(false);
+  };
+
+  const handleSave = () => {
+    // Validate all JSON
+    for (const id of Object.keys(editedArgs)) {
+      try {
+        JSON.parse(editedArgs[id]);
+      } catch {
+        return; // Invalid JSON, don't save
+      }
+    }
+    setHasChanges(false);
+  };
+
+  const handleSubmit = () => {
+    const decisions: Decision[] = actionRequests.map((a) => {
+      try {
+        const parsed = JSON.parse(editedArgs[a.id]);
+        const original = JSON.stringify(a.args);
+        const edited = JSON.stringify(parsed);
+
+        if (original !== edited) {
+          return {
+            type: "edit" as const,
+            editedAction: { id: a.id, tool_name: a.tool_name, args: parsed },
+          };
+        }
+        return { type: "approve" as const };
+      } catch {
+        return { type: "reject" as const };
+      }
+    });
+    onDecisions(decisions);
+  };
+
+  return (
+    <div className="rounded-lg border border-yellow-500/50 bg-yellow-50/5 p-3 space-y-3">
+      <div className="flex items-center gap-2 text-sm text-yellow-600">
+        <AlertTriangle className="h-4 w-4" />
+        <span className="font-medium">Tool approval required</span>
+      </div>
+
+      {actionRequests.map((action) => (
+        <div key={action.id} className="space-y-1.5">
+          <div className="flex items-center gap-2">
+            <Wrench className="h-3.5 w-3.5 text-muted-foreground" />
+            <code className="text-xs font-semibold">{action.tool_name}</code>
+          </div>
+          <textarea
+            className={cn(
+              "w-full p-2 text-xs font-mono bg-background border rounded resize-none",
+              "min-h-[80px] max-h-[200px]"
+            )}
+            value={editedArgs[action.id]}
+            onChange={(e) => handleArgsChange(action.id, e.target.value)}
+            disabled={disabled}
+            rows={Math.min(10, (editedArgs[action.id]?.split("\n").length || 3) + 1)}
+          />
+        </div>
+      ))}
+
+      <div className="flex justify-end gap-2 pt-1 border-t">
+        {hasChanges && (
+          <>
+            <Button
+              size="sm"
+              variant="ghost"
+              className="h-7 text-xs"
+              onClick={handleCancel}
+              disabled={disabled}
+            >
+              Cancel
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              className="h-7 text-xs"
+              onClick={handleSave}
+              disabled={disabled}
+            >
+              Save
+            </Button>
+          </>
+        )}
+        <Button
+          size="sm"
+          className="h-7 text-xs"
+          onClick={handleSubmit}
+          disabled={disabled}
+        >
+          Submit ({actionRequests.length})
+        </Button>
+      </div>
+    </div>
+  );
+}