feat(ui,api): style sidebar, conversation delete, tooltips & polish

api/acp_conversations.go

@@ -177,6 +177,27 @@ func (s *server) updateACPConversation(c echo.Context) error {
 	return writeJSON(c, http.StatusOK, conversation)
 }
 
+func (s *server) deleteACPConversation(c echo.Context) error {
+	if !s.acp.enabled {
+		return writeError(c, http.StatusNotFound, "acp disabled")
+	}
+	principal, ok := principalFromContext(c)
+	if s.auth.enabled() && (!ok || principal.ID == "") {
+		return writeError(c, http.StatusUnauthorized, "unauthenticated")
+	}
+	if err := authorizeHumanOnly(principal, s.auth.enabled()); err != nil {
+		return writeForbidden(c)
+	}
+	conversation, err := s.getAuthorizedConversation(c.Request().Context(), principal, s.requestNamespace(c), c.Param("id"))
+	if err != nil {
+		return s.writeACPConversationError(c, err)
+	}
+	if err := s.client.Delete(c.Request().Context(), conversation); err != nil {
+		return writeError(c, http.StatusInternalServerError, err.Error())
+	}
+	return c.NoContent(http.StatusNoContent)
+}
+
 func decodeACPBody(c echo.Context, target any) error {
 	if c.Request().Body == nil || c.Request().ContentLength == 0 {
 		return nil

api/main.go

@@ -256,6 +256,7 @@ func (s *server) registerRoutes(e *echo.Echo) {
 	secured.GET("/acp/conversations/:id", s.getACPConversation)
 	secured.POST("/acp/conversations/:id/bootstrap", s.bootstrapACPConversation)
 	secured.PATCH("/acp/conversations/:id", s.updateACPConversation)
+	secured.DELETE("/acp/conversations/:id", s.deleteACPConversation)
 	secured.GET("/acp/conversations/:id/connect", s.openACPConversationConnection)
 	secured.POST("/spritzes/:name/ssh", s.mintSSHCert)
 	if s.terminal.enabled {

ui/package.json

@@ -11,12 +11,13 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.3.0",
-    "@fontsource-variable/geist": "^5.2.8",
+    "@fontsource-variable/inter": "^5.2.8",
     "@tailwindcss/vite": "^4.2.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "flowtoken": "^1.0.40",
     "lucide-react": "^0.577.0",
+    "next-themes": "^0.4.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.13.1",

ui/src/components/acp/composer.tsx

@@ -1,5 +1,6 @@
 import { useState, useRef, useCallback, useImperativeHandle, forwardRef } from 'react';
 import { SendIcon, SquareIcon } from 'lucide-react';
+import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
 
 const TERMINAL_STATUSES = ['connected', 'completed', 'disconnected', 'no acp-ready instances'];
 
@@ -79,19 +80,25 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(function Compo
             className="block w-full min-h-[24px] max-h-[180px] resize-none border-none bg-transparent rounded-t-[28px] px-5 pt-4 pb-1 font-inherit text-sm leading-[1.55] outline-none placeholder:text-[#999] focus:outline-none focus:ring-0 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] overflow-y-auto"
           />
           <div className="relative z-[1] -mt-4 flex items-center justify-end gap-2 rounded-b-[28px] bg-[linear-gradient(to_bottom,transparent,white_60%)] px-3 pb-3 pt-5">
-            <button
-              type="button"
-              className="flex size-9 items-center justify-center rounded-full border-none bg-black p-0 text-white transition-opacity will-change-[opacity] hover:opacity-80 disabled:opacity-40 disabled:cursor-not-allowed"
-              onClick={promptInFlight ? onCancel : handleSubmit}
-              disabled={!promptInFlight && (disabled || !text.trim())}
-              title={promptInFlight ? 'Stop' : 'Send'}
-            >
-              {promptInFlight ? (
-                <SquareIcon className="size-3.5 fill-current" />
-              ) : (
-                <SendIcon className="size-4" />
-              )}
-            </button>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <button
+                    type="button"
+                    className="flex size-9 items-center justify-center rounded-full border-none bg-black p-0 text-white transition-opacity will-change-[opacity] hover:opacity-80 disabled:opacity-40 disabled:cursor-not-allowed"
+                    onClick={promptInFlight ? onCancel : handleSubmit}
+                    disabled={!promptInFlight && (disabled || !text.trim())}
+                  >
+                    {promptInFlight ? (
+                      <SquareIcon className="size-3.5 fill-current" />
+                    ) : (
+                      <SendIcon className="size-4" />
+                    )}
+                  </button>
+                }
+              />
+              <TooltipContent>{promptInFlight ? 'Stop' : 'Send'}</TooltipContent>
+            </Tooltip>
           </div>
         </div>