@saadnvd1/agent-os 0.3.542 → 0.3.543

package/components/Away/AwayToggle.tsx

@@ -51,7 +51,7 @@ export function AwayToggle() {
           }
           disabled={setAway.isPending}
           className={cn(
-            "relative h-11 w-11 md:h-8 md:w-8",
+            "relative h-11 w-11 md:h-8 md:w-8 [@media(hover:none)]:md:h-11 [@media(hover:none)]:md:w-11",
             away &&
               "bg-amber-500/20 text-amber-700 ring-1 ring-amber-500/50 hover:bg-amber-500/30 dark:text-amber-300"
           )}

package/components/SessionList/LoadGauge.tsx

@@ -37,7 +37,7 @@ export function LoadGauge() {
           size="icon-sm"
           aria-label={`Machine load ${load.level}. ${summary}`}
           title={summary}
-          className="-ml-1.5 h-11 w-11 shrink-0 md:ml-0 md:h-8 md:w-6"
+          className="-ml-1.5 h-11 w-11 shrink-0 md:ml-0 md:h-8 md:w-6 [@media(hover:none)]:md:-ml-1.5 [@media(hover:none)]:md:h-11 [@media(hover:none)]:md:w-11"
         >
           <span className={cn("h-2 w-2 rounded-full", DOT[load.level])} />
         </Button>

package/components/SessionList/ProjectFilter.tsx

@@ -25,7 +25,7 @@ export function ProjectFilter({
         <button
           type="button"
           className={cn(
-            "bg-card flex min-h-11 max-w-[8.5rem] shrink-0 items-center gap-1 rounded-xl px-3 text-sm shadow-xs md:min-h-9",
+            "bg-card flex min-h-11 max-w-[7.5rem] shrink items-center gap-1 rounded-xl px-3 text-sm shadow-xs md:min-h-9 [@media(hover:none)]:md:min-h-11",
             current && "text-primary"
           )}
         >

package/components/SessionList/RowShell.tsx

@@ -65,7 +65,7 @@ export function RowShell({
       )}
     >
       {leading}
-      <span className="flex min-w-[7rem] flex-1 flex-col leading-tight">
+      <span className="@container flex min-w-0 flex-1 flex-col leading-tight">
         {children}
       </span>
       {aside}

package/components/SessionList/RowSubtitle.tsx

@@ -61,7 +61,7 @@ export function RowSubtitle({
       <LiveLine {...live} />
       {group && (
         <span
-          className="text-muted-foreground/70 flex min-w-0 shrink-0 items-center gap-1 truncate text-xs"
+          className="text-muted-foreground/70 hidden min-w-0 shrink items-center gap-1 truncate text-xs @[14rem]:flex"
           title={group.kind === "recipe" ? "A recipe run" : "A piece of a plan"}
         >
           {group.kind === "recipe" ? (
@@ -73,7 +73,7 @@ export function RowSubtitle({
         </span>
       )}
       {(project || detail || usage) && (
-        <span className="text-muted-foreground/70 truncate text-xs">
+        <span className="text-muted-foreground/70 min-w-0 truncate text-xs">
           {[usage && usageLabel(usage), detail?.slice(0, 200), project]
             .filter(Boolean)
             .join(" · ")}

package/components/SessionList/SessionShelves.tsx

@@ -48,7 +48,10 @@ function ShelfLabel({
       type="button"
       onClick={onToggle}
       aria-expanded={!collapsed}
-      className={cn(cls, "hover:text-foreground min-h-11 w-full md:min-h-8")}
+      className={cn(
+        cls,
+        "hover:text-foreground min-h-11 w-full md:min-h-8 [@media(hover:none)]:md:min-h-11"
+      )}
     >
       {text}
     </button>

package/components/SessionList/SidebarHeader.tsx

@@ -62,15 +62,15 @@ export function SidebarHeader(props: SidebarHeaderProps) {
   const workspaceId = props.workspace?.id ?? null;
   const schedules = useSchedulesGlance(workspaceId);
   return (
-    <div className="flex items-center gap-1 px-3 pt-3 pb-2">
-      <div className="flex min-w-0 flex-1 items-center">
+    <div className="flex flex-wrap items-center gap-x-1 px-3 pt-3 pb-2">
+      <div className="flex min-w-[9.5rem] flex-1 items-center">
         <WorkspaceSwitcher
           workspaces={props.workspaces}
           current={props.workspace}
         />
         <LoadGauge />
       </div>
-      <div className="flex shrink-0 items-center gap-0.5">
+      <div className="ml-auto flex shrink-0 items-center gap-0.5">
         <AwayToggle />
         <ADropdownMenu
           trigger={
@@ -80,7 +80,7 @@ export function SidebarHeader(props: SidebarHeaderProps) {
               aria-label={
                 schedules.failedText ? `More (${schedules.failedText})` : "More"
               }
-              className="relative h-11 w-11 md:h-8 md:w-8"
+              className="relative h-11 w-11 md:h-8 md:w-8 [@media(hover:none)]:md:h-11 [@media(hover:none)]:md:w-11"
             >
               <MoreHorizontal className="h-4 w-4" />
               {schedules.failed > 0 && (
@@ -88,7 +88,7 @@ export function SidebarHeader(props: SidebarHeaderProps) {
                   aria-hidden
                   className={cn(
                     failedDot,
-                    "ring-background absolute top-2 right-2 ring-2 md:top-1 md:right-1"
+                    "ring-background absolute top-2 right-2 ring-2 md:top-1 md:right-1 [@media(hover:none)]:md:top-2 [@media(hover:none)]:md:right-2"
                   )}
                 />
               )}
@@ -149,7 +149,7 @@ export function SidebarHeader(props: SidebarHeaderProps) {
             <Button
               size="icon-sm"
               aria-label="New"
-              className="ml-0.5 h-11 w-11 rounded-[10px] md:h-8 md:w-8"
+              className="ml-0.5 h-11 w-11 rounded-[10px] md:h-8 md:w-8 [@media(hover:none)]:md:h-11 [@media(hover:none)]:md:w-11"
             >
               <Plus className="h-4 w-4" />
             </Button>

package/components/SessionList/SidebarSearch.tsx

@@ -7,7 +7,7 @@ import { sidebarUiActions } from "@/stores/sidebarUi";
 // sessions too.
 export function SidebarSearch({ query }: { query: string }) {
   return (
-    <label className="bg-card text-muted-foreground focus-within:ring-primary/40 flex min-h-11 min-w-0 flex-1 items-center gap-2 rounded-xl px-3 shadow-xs focus-within:ring-2 md:min-h-9">
+    <label className="bg-card text-muted-foreground focus-within:ring-primary/40 flex min-h-11 min-w-[6rem] flex-1 items-center gap-2 rounded-xl px-3 shadow-xs focus-within:ring-2 md:min-h-9 [@media(hover:none)]:md:min-h-11">
       <Search className="h-3.5 w-3.5 shrink-0" />
       <input
         type="search"
@@ -28,7 +28,7 @@ export function SidebarSearch({ query }: { query: string }) {
           type="button"
           aria-label="Clear search"
           onClick={() => sidebarUiActions.setQuery("")}
-          className="-mr-3 flex h-11 w-11 items-center justify-center md:h-7 md:w-7"
+          className="-mr-3 flex h-11 w-11 items-center justify-center md:h-7 md:w-7 [@media(hover:none)]:md:h-11 [@media(hover:none)]:md:w-11"
         >
           <X className="h-3.5 w-3.5" />
         </button>

package/components/SessionList/WorkspaceSwitcher.tsx

@@ -59,12 +59,11 @@ export function WorkspaceSwitcher({
           <button
             type="button"
             title={name}
-            className="hover:bg-foreground/[0.04] -ml-1.5 flex min-h-11 min-w-0 items-center gap-2 rounded-lg px-2 md:min-h-9"
+            className="hover:bg-foreground/[0.04] -ml-1.5 flex min-h-11 min-w-0 items-center gap-2 rounded-lg px-2 md:min-h-9 [@media(hover:none)]:md:min-h-11"
           >
-            <MiddleTruncate
-              text={name}
-              className="text-[15px] font-semibold tracking-tight"
-            />
+            <span className="truncate text-[15px] font-semibold tracking-tight">
+              {name}
+            </span>
             <ChevronDown className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
           </button>
         </DM.DropdownMenuTrigger>
@@ -190,31 +189,3 @@ export function WorkspaceSwitcher({
     </>
   );
 }
-
-const TAIL = 4;
-
-// Cuts a name that doesn't fit in the middle ("All wo…aces"), so the end
-// that tells similar names apart stays: the head truncates, the tail doesn't.
-function MiddleTruncate({
-  text,
-  className,
-}: {
-  text: string;
-  className?: string;
-}) {
-  if (text.length <= TAIL * 2) {
-    return <span className={`truncate ${className}`}>{text}</span>;
-  }
-  // Screen readers get the name whole, not as two words.
-  return (
-    <span className={`flex min-w-0 ${className}`}>
-      <span className="sr-only">{text}</span>
-      <span aria-hidden className="truncate whitespace-pre">
-        {text.slice(0, -TAIL)}
-      </span>
-      <span aria-hidden className="shrink-0 whitespace-pre">
-        {text.slice(-TAIL)}
-      </span>
-    </span>
-  );
-}

package/components/ThemeToggle.tsx

@@ -30,7 +30,11 @@ export function ThemeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon" className="h-8 w-8">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 [@media(hover:none)]:md:h-11 [@media(hover:none)]:md:w-11"
+        >
           <Palette className="h-4 w-4" />
           <span className="sr-only">Change theme</span>
         </Button>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saadnvd1/agent-os",
-  "version": "0.3.542",
+  "version": "0.3.543",
   "description": "Self-hosted web UI for managing Claude Code sessions",
   "bin": {
     "agent-os": "scripts/agent-os"