refactor: remove border styling and improve component styling

web/src/components/ChatBlockList.tsx

@@ -89,7 +89,7 @@ export function ChatBlockList(props: {
         <div className="flex flex-col gap-3">
             {props.blocks.map((block) => {
                 if (block.kind === 'user-text') {
-                    const userBubbleClass = 'w-fit max-w-[92%] ml-auto rounded-xl border border-[var(--app-border)] bg-[var(--app-secondary-bg)] px-3 py-2 text-[var(--app-fg)] shadow-sm'
+                    const userBubbleClass = 'w-fit max-w-[92%] ml-auto rounded-xl bg-[var(--app-secondary-bg)] px-3 py-2 text-[var(--app-fg)] shadow-sm'
                     const status = block.status
                     const onRetry = block.localId && status === 'failed' && props.onRetryMessage
                         ? () => props.onRetryMessage!(block.localId!)
@@ -147,7 +147,7 @@ export function ChatBlockList(props: {
                                         <summary className="cursor-pointer text-xs text-[var(--app-hint)]">
                                             Task details ({block.children.length})
                                         </summary>
-                                        <div className="mt-2 border-l border-[var(--app-border)] pl-3">
+                                        <div className="mt-2 pl-3">
                                             <ChatBlockList
                                                 api={props.api}
                                                 sessionId={props.sessionId}
@@ -160,7 +160,7 @@ export function ChatBlockList(props: {
                                         </div>
                                     </details>
                                 ) : (
-                                    <div className="mt-2 border-l border-[var(--app-border)] pl-3">
+                                    <div className="mt-2 pl-3">
                                         <ChatBlockList
                                             api={props.api}
                                             sessionId={props.sessionId}

web/src/components/ChatInput.tsx

@@ -18,13 +18,13 @@ export function ChatInput(props: {
     }
 
     return (
-        <div className="border-t border-[var(--app-border)] bg-[var(--app-bg)] p-2">
+        <div className="bg-[var(--app-bg)] p-2">
             <div className="flex items-end gap-2">
                 <textarea
                     value={text}
                     onChange={(e) => setText(e.target.value)}
                     placeholder="Type a message..."
-                    className="flex-1 resize-none rounded-md border border-[var(--app-border)] bg-[var(--app-bg)] p-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--app-link)]"
+                    className="flex-1 resize-none rounded-xl bg-[var(--app-secondary-bg)] p-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--app-link)]"
                     rows={1}
                     disabled={props.disabled}
                     onKeyDown={(e) => {

web/src/components/SessionChat.tsx

@@ -72,7 +72,7 @@ export function SessionChat(props: {
             />
 
             {controlsDisabled ? (
-                <div className="border-b border-[var(--app-border)] bg-[var(--app-subtle-bg)] p-3 text-sm text-[var(--app-hint)]">
+                <div className="bg-[var(--app-subtle-bg)] p-3 text-sm text-[var(--app-hint)]">
                     Session is inactive. Controls are disabled.
                 </div>
             ) : null}
@@ -80,7 +80,7 @@ export function SessionChat(props: {
             <div ref={scrollRef} className="flex-1 overflow-y-auto">
                 <div className="mx-auto w-full max-w-[720px] p-3">
                     {props.messagesWarning ? (
-                        <div className="mb-3 rounded-md border border-amber-500/30 bg-amber-500/10 p-2 text-xs">
+                        <div className="mb-3 rounded-md bg-amber-500/10 p-2 text-xs">
                             {props.messagesWarning}
                         </div>
                     ) : null}
@@ -122,7 +122,7 @@ export function SessionChat(props: {
                     ) : (
                         <>
                             {import.meta.env.DEV && viewMode === 'reduced' && normalizedMessages.length === 0 && props.messages.length > 0 ? (
-                                <div className="mb-2 rounded-md border border-amber-500/30 bg-amber-500/10 p-2 text-xs">
+                                <div className="mb-2 rounded-md bg-amber-500/10 p-2 text-xs">
                                     Message normalization returned 0 items for {props.messages.length} messages (see `hapi/web/src/chat/normalize.ts`).
                                 </div>
                             ) : null}

web/src/components/SessionHeader.tsx

@@ -58,7 +58,7 @@ export function SessionHeader(props: {
     }
 
     return (
-        <div className="flex items-center gap-2 border-b border-[var(--app-border)] bg-[var(--app-bg)] p-3">
+        <div className="flex items-center gap-2 bg-[var(--app-bg)] p-3">
             <div className="min-w-0 flex-1">
                 <div className="flex items-center gap-2 min-w-0">
                     <span
@@ -132,7 +132,7 @@ export function SessionHeader(props: {
                                 </div>
                             </div>
 
-                            <div className="rounded-md border border-[var(--app-border)] bg-[var(--app-subtle-bg)] p-2 text-xs text-[var(--app-hint)]">
+                            <div className="rounded-md bg-[var(--app-subtle-bg)] p-2 text-xs text-[var(--app-hint)]">
                                 <div>Path: {props.session.metadata?.path ?? '(unknown)'}</div>
                                 <div>Host: {props.session.metadata?.host ?? '(unknown)'}</div>
                                 <div>Status: {props.session.active ? 'Active' : 'Inactive'}</div>

web/src/components/ToolCard/ToolCard.tsx

@@ -361,32 +361,35 @@ export function ToolCard(props: {
     const stateColor = statusColorClass(props.block.tool.state)
 
     const header = (
-        <div className="flex items-center justify-between gap-3">
+        <div className="flex flex-col gap-1">
-            <div className="min-w-0 flex items-center gap-2">
+            <div className="flex items-center justify-between gap-3">
-                <div className="shrink-0 text-base leading-none">
+                <div className="min-w-0 flex items-center gap-2">
-                    {presentation.icon}
+                    <div className="shrink-0 flex h-3.5 w-3.5 items-center justify-center text-[11px] leading-none">
+                        {presentation.icon}
+                    </div>
+                    <CardTitle className="min-w-0 text-sm font-medium leading-tight break-words">
+                        {toolTitle}
+                    </CardTitle>
                 </div>
-                <div className="min-w-0">
+
-                    <CardTitle className="text-sm font-medium break-words">{toolTitle}</CardTitle>
+                <div className="flex items-center gap-2 shrink-0">
-                    {subtitle ? (
+                    <ElapsedView from={runningFrom} active={props.block.tool.state === 'running'} />
-                        <CardDescription className="mt-0.5 font-mono text-xs break-all opacity-80">
+                    <span className={stateColor}>
-                            {truncate(subtitle, 160)}
+                        <StatusIcon state={props.block.tool.state} />
-                        </CardDescription>
+                    </span>
+                    {showDialog ? (
+                        <span className="text-[var(--app-hint)]">
+                            <DetailsIcon />
+                        </span>
                     ) : null}
                 </div>
             </div>
 
-            <div className="flex items-center gap-2 shrink-0">
+            {subtitle ? (
-                <ElapsedView from={runningFrom} active={props.block.tool.state === 'running'} />
+                <CardDescription className="font-mono text-xs break-all opacity-80">
-                <span className={stateColor}>
+                    {truncate(subtitle, 160)}
-                    <StatusIcon state={props.block.tool.state} />
+                </CardDescription>
-                </span>
+            ) : null}
-                {showDialog ? (
-                    <span className="text-[var(--app-hint)]">
-                        <DetailsIcon />
-                    </span>
-                ) : null}
-            </div>
         </div>
     )
 

web/src/components/ui/card.tsx

@@ -5,7 +5,7 @@ export const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
     ({ className, ...props }, ref) => (
         <div
             ref={ref}
-            className={cn('rounded-lg border border-[var(--app-border)] bg-[var(--app-secondary-bg)]', className)}
+            className={cn('rounded-lg bg-[var(--app-secondary-bg)] shadow-sm', className)}
             {...props}
         />
     )
@@ -43,4 +43,3 @@ export const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes
     )
 )
 CardContent.displayName = 'CardContent'
-