#591 - workers

resources/js/components/app-header.tsx

@@ -13,7 +13,7 @@ export function AppHeader() {
   return (
     <header className="bg-background -ml-1 flex h-12 shrink-0 items-center justify-between gap-2 border-b p-4 md:-ml-2">
       <div className="flex items-center">
-        <SidebarTrigger />
+        <SidebarTrigger className="-ml-1 md:hidden" />
         <div className="flex items-center space-x-2 text-xs">
           <ProjectSwitch />
           <SlashIcon className="size-3" />

resources/js/components/command-cell.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Badge } from '@/components/ui/badge';
+
+export default function CommandCell({ command }: { command: string }) {
+  const [copySuccess, setCopySuccess] = useState(false);
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(command).then(() => {
+      setCopySuccess(true);
+      setTimeout(() => {
+        setCopySuccess(false);
+      }, 2000);
+    });
+  };
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div className="inline-flex cursor-pointer justify-start space-x-2 truncate" onClick={copyToClipboard}>
+          <Badge variant={copySuccess ? 'success' : 'outline'} className="block max-w-[150px] overflow-ellipsis">
+            {command}
+          </Badge>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent side="top">
+        <span className="flex items-center space-x-2">Copy</span>
+      </TooltipContent>
+    </Tooltip>
+  );
+}

resources/js/components/log-output.tsx

@@ -0,0 +1,45 @@
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
+import { ReactNode, useRef, useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { ArrowDown, ClockArrowDownIcon } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+
+export default function LogOutput({ children }: { children: ReactNode }) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const endRef = useRef<HTMLDivElement>(null);
+  const [autoScroll, setAutoScroll] = useState(false);
+
+  useEffect(() => {
+    if (autoScroll && endRef.current) {
+      endRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [children, autoScroll]);
+
+  const toggleAutoScroll = () => {
+    setAutoScroll(!autoScroll);
+  };
+
+  return (
+    <div className="relative">
+      <ScrollArea ref={scrollRef} className="bg-accent/50 text-accent-foreground relative h-[500px] w-full p-4 font-mono text-sm whitespace-pre-line">
+        {children}
+        <div ref={endRef} />
+        <ScrollBar orientation="vertical" />
+      </ScrollArea>
+      <Button
+        variant="outline"
+        size="icon"
+        className="bg-accent! absolute right-4 bottom-4"
+        onClick={toggleAutoScroll}
+        title={autoScroll ? 'Disable auto-scroll' : 'Enable auto-scroll'}
+      >
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div>{autoScroll ? <ClockArrowDownIcon className="h-4 w-4" /> : <ArrowDown className="h-4 w-4" />}</div>
+          </TooltipTrigger>
+          <TooltipContent>{autoScroll ? 'Turn off auto scroll' : 'Auto scroll down'}</TooltipContent>
+        </Tooltip>
+      </Button>
+    </div>
+  );
+}