From 14191de8f4e348712b65b8999e7b1d072f0a6f33 Mon Sep 17 00:00:00 2001
From: James Magahern <james@magahern.com>
Date: Wed, 30 Sep 2026 21:30:54 -0700
Subject: [PATCH] No rounded corners

---
 web/src/App.tsx                               |  6 +--
 .../components/chat/chat-messages-panel.tsx   |  6 +--
 web/src/index.css                             | 44 +++++++------------
 web/tailwind.config.ts                        |  9 +++-
 4 files changed, 29 insertions(+), 36 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 6a7cc23..5129d80 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -3440,7 +3440,7 @@ export default function App() {
 
   return (
     <div className="app-grid-surface app-safe-frame h-full">
-      <div className="workspace-shell flex h-full w-full overflow-hidden bg-transparent md:gap-2">
+      <div className="workspace-shell flex h-full w-full overflow-hidden bg-transparent">
         {isMobileSidebarOpen ? (
           <button
             type="button"
@@ -3452,7 +3452,7 @@ export default function App() {
 
         <aside
           className={cn(
-            "workspace-sidebar glass-panel fixed inset-y-0 left-0 z-40 flex w-[86vw] max-w-80 shrink-0 flex-col border-r border-violet-300/18 transition-transform md:static md:z-auto md:w-80 md:max-w-none md:rounded-2xl md:border",
+            "workspace-sidebar glass-panel fixed inset-y-0 left-0 z-40 flex w-[86vw] max-w-80 shrink-0 flex-col border-r border-violet-300/18 transition-transform md:static md:z-auto md:w-80 md:max-w-none",
             isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
           )}
         >
@@ -3609,7 +3609,7 @@ export default function App() {
         </aside>
 
         <main
-          className="workspace-content glass-panel relative flex min-w-0 flex-1 touch-pan-y flex-col overflow-hidden border-violet-300/18 md:touch-auto md:rounded-2xl md:border"
+          className="workspace-content glass-panel relative flex min-w-0 flex-1 touch-pan-y flex-col overflow-hidden md:touch-auto"
           onTouchStart={handleMobileWorkspaceTouchStart}
           onTouchMove={handleMobileWorkspaceTouchMove}
           onTouchEnd={handleMobileWorkspaceTouchEnd}
diff --git a/web/src/components/chat/chat-messages-panel.tsx b/web/src/components/chat/chat-messages-panel.tsx
index 519ca0c..0c06a18 100644
--- a/web/src/components/chat/chat-messages-panel.tsx
+++ b/web/src/components/chat/chat-messages-panel.tsx
@@ -378,13 +378,13 @@ function ToolCallStack({
           );
         })}
         {!expanded && hiddenCount ? (
-          <span className="absolute bottom-1 right-10 z-20 rounded-full border border-cyan-300/30 bg-slate-950/86 px-2 py-0.5 text-[10px] font-semibold leading-none text-cyan-100 shadow-sm">
+          <span className="absolute bottom-1 right-10 z-20 rounded-none border border-cyan-300/30 bg-slate-950/86 px-2 py-0.5 text-[10px] font-semibold leading-none text-cyan-100 shadow-sm">
             +{hiddenCount}
           </span>
         ) : null}
         <button
           type="button"
-          className="tool-call-stack-toggle absolute right-0 top-2 z-20 flex h-8 w-8 items-center justify-center rounded-full"
+          className="tool-call-stack-toggle absolute right-0 top-2 z-20 flex h-8 w-8 items-center justify-center rounded-none"
           aria-expanded={expanded ? "true" : "false"}
           aria-label={`${expanded ? "Collapse" : "Expand"} ${countLabel}`}
           title={`${expanded ? "Collapse" : "Expand"} ${countLabel}`}
@@ -603,7 +603,7 @@ export function ChatMessagesPanel({ messages, isLoading, isSending, onMessageCon
                 className={cn(
                   "max-w-[85%] space-y-3",
                   isUser
-                    ? "rounded-xl border border-violet-300/24 bg-[linear-gradient(135deg,hsl(258_86%_48%_/_0.86),hsl(278_72%_29%_/_0.86))] px-4 py-3 text-sm leading-6 text-fuchsia-50 shadow-sm"
+                    ? "chat-user-message border border-violet-300/24 bg-[linear-gradient(135deg,hsl(258_86%_48%_/_0.86),hsl(278_72%_29%_/_0.86))] px-4 py-3 text-sm leading-6 text-fuchsia-50 shadow-sm"
                     : "text-base leading-7 text-violet-50"
                 )}
                 onContextMenu={
diff --git a/web/src/index.css b/web/src/index.css
index 26c77da..67dea6a 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -31,7 +31,7 @@
   --secondary-foreground: 254 38% 94%;
   --accent: 188 86% 50%;
   --accent-foreground: 230 45% 8%;
-  --radius: 0.5rem;
+  --radius: 0px;
 }
 
 * {
@@ -72,6 +72,7 @@ select,
 textarea {
   font: inherit;
   color-scheme: dark;
+  border-radius: var(--radius);
 }
 
 ::selection {
@@ -148,14 +149,6 @@ textarea {
     padding: 0.75rem 1.25rem;
   }
 
-  .app-safe-frame {
-    padding:
-      max(0.5rem, var(--safe-area-top))
-      max(0.5rem, var(--safe-area-right))
-      max(0.5rem, var(--safe-area-bottom))
-      max(0.5rem, var(--safe-area-left));
-  }
-
   .app-search-safe-pad {
     padding:
       max(1.5rem, var(--safe-area-top))
@@ -166,19 +159,11 @@ textarea {
 }
 
 @media (horizontal-viewport-segments: 2) {
-  .app-safe-frame {
-    padding:
-      max(0.5rem, var(--safe-area-top))
-      max(0.5rem, var(--safe-area-right))
-      max(0.5rem, var(--safe-area-bottom))
-      max(0.5rem, var(--safe-area-left));
-  }
-
   .workspace-shell {
     display: grid;
     grid-template-columns:
-      calc(env(viewport-segment-width 0 0) - max(0.5rem, var(--safe-area-left)))
-      calc(env(viewport-segment-width 1 0) - max(0.5rem, var(--safe-area-right)));
+      calc(env(viewport-segment-width 0 0) - var(--safe-area-left))
+      calc(env(viewport-segment-width 1 0) - var(--safe-area-right));
     column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
   }
 
@@ -187,14 +172,10 @@ textarea {
     width: 100%;
     max-width: none;
     transform: none;
-    border-width: 1px;
-    border-radius: 1rem;
   }
 
   .workspace-content {
     min-width: 0;
-    border-width: 1px;
-    border-radius: 1rem;
     touch-action: auto;
   }
 
@@ -213,6 +194,13 @@ textarea {
     0 14px 36px hsl(240 80% 2% / 0.28);
 }
 
+.chat-user-message {
+  /* Preserve the original bubble radius independently of the square UI theme.
+     Browsers without corner-shape support fall back to circular corners. */
+  border-radius: 0.75rem;
+  corner-shape: squircle;
+}
+
 .tool-call-stack-shell {
   perspective: 900px;
   transform-style: preserve-3d;
@@ -464,7 +452,7 @@ textarea {
   overflow-x: auto;
   overflow-y: hidden;
   border: 1px solid hsl(var(--border) / 0.86);
-  border-radius: 0.625rem;
+  border-radius: var(--radius);
   background: hsl(246 34% 10% / 0.76);
   box-shadow: inset 0 1px 0 hsl(258 80% 88% / 0.06);
 }
@@ -483,7 +471,7 @@ textarea {
 }
 
 .md-table-scroll::-webkit-scrollbar-thumb {
-  border-radius: 9999px;
+  border-radius: var(--radius);
   background: hsl(263 78% 72% / 0.34);
 }
 
@@ -595,7 +583,7 @@ textarea {
 
 .md-content code {
   background: hsl(249 40% 10% / 0.78);
-  border-radius: 0.3rem;
+  border-radius: var(--radius);
   padding: 0.05rem 0.3rem;
   font-size: 0.86em;
   box-decoration-break: clone;
@@ -605,7 +593,7 @@ textarea {
 .md-content pre {
   overflow-x: auto;
   border: 1px solid hsl(253 31% 29% / 0.72);
-  border-radius: 0.625rem;
+  border-radius: var(--radius);
   background: hsl(249 40% 10% / 0.82);
   padding: 0.75rem;
   box-shadow: inset 0 1px 0 hsl(258 80% 88% / 0.05);
@@ -629,7 +617,7 @@ textarea {
 .md-cite-token {
   display: inline-flex;
   align-items: center;
-  border-radius: 9999px;
+  border-radius: var(--radius);
   border: 1px solid hsl(274 40% 55%);
   background: hsl(277 33% 21%);
   color: hsl(304 42% 96%);
diff --git a/web/tailwind.config.ts b/web/tailwind.config.ts
index 60047a0..901d433 100644
--- a/web/tailwind.config.ts
+++ b/web/tailwind.config.ts
@@ -29,9 +29,14 @@ const config: Config = {
         },
       },
       borderRadius: {
+        // Keep surfaces square at every size; rounded-full is reserved for dots.
+        DEFAULT: "var(--radius)",
+        sm: "var(--radius)",
+        md: "var(--radius)",
         lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        xl: "var(--radius)",
+        "2xl": "var(--radius)",
+        "3xl": "var(--radius)",
       },
     },
   },