[Init] Initial commit - NetMesh terminal manager

components/terminalLayer/WorkspaceSidebarHostHeader.tsx

@@ -0,0 +1,49 @@
+import React, { memo } from 'react';
+
+import { formatHostPort } from '../../domain/host';
+import type { Host } from '../../types';
+import { DistroAvatar } from '../DistroAvatar';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+
+interface WorkspaceSidebarHostHeaderProps {
+  host: Host;
+  section?: string;
+}
+
+export const WorkspaceSidebarHostHeader = memo(function WorkspaceSidebarHostHeader({
+  host,
+  section = 'terminal-sidebar-host-header',
+}: WorkspaceSidebarHostHeaderProps) {
+  const username = host.username || 'root';
+  const port = host.port || 22;
+
+  return (
+    <div
+      className="shrink-0 border-b border-border/50 bg-muted/20 px-3 py-1.5"
+      data-section={section}
+    >
+      <div className="flex items-center gap-2 min-w-0">
+        <DistroAvatar
+          host={host}
+          fallback={host.label.slice(0, 2).toUpperCase()}
+          size="sm"
+          className="h-5 w-5 rounded-sm shrink-0"
+        />
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="min-w-0 flex-1 max-w-[calc(100%-1.75rem)] text-[11px] leading-5 truncate cursor-default">
+              <span className="font-medium">{host.label}</span>
+              <span className="mx-1 text-muted-foreground">·</span>
+              <span className="font-mono text-muted-foreground">
+                {username}@{host.hostname}:{port}
+              </span>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>
+            {`${host.label} · ${username}@${formatHostPort(host.hostname, port)}`}
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    </div>
+  );
+});