[Init] Initial commit - NetMesh terminal manager

components/host/HostDetailsScriptsSection.tsx

@@ -0,0 +1,284 @@
+import { FolderTree, Globe, Link2, Play, Trash2 } from 'lucide-react';
+import React, { useCallback, useMemo, useState, type DragEvent } from 'react';
+import type { Host, Snippet } from '@/domain/models';
+import {
+  appendHostConnectScript,
+  getEditableHostConnectScriptIds,
+  getGlobalConnectScripts,
+  getGroupConnectScriptsForHost,
+  removeHostConnectScript,
+  reorderHostConnectScript,
+} from '@/domain/hostConnectScripts.ts';
+import { isScriptSnippet } from '@/domain/snippetScript.ts';
+import { cn } from '@/lib/utils';
+import { getVaultDropPosition } from '@/components/vault/vaultReorderDrag';
+import {
+  VaultEntityIcon,
+  vaultAutomationScriptIconClass,
+  vaultEntityIconSmClass,
+} from '@/components/vault/VaultEntityIcon';
+import { HostDetailsSection } from '../host-details';
+import { Button } from '../ui/button';
+import { Combobox } from '../ui/combobox';
+
+const CONNECT_QUEUE_DRAG_TYPE = 'application/x-netcatty-connect-script-id';
+
+export interface HostDetailsScriptsSectionProps {
+  host: Host;
+  onHostChange: (host: Host) => void;
+  snippets: Snippet[];
+  t: (key: string, params?: Record<string, unknown>) => string;
+}
+
+function triggerLabel(
+  snippet: Snippet,
+  t: HostDetailsScriptsSectionProps['t'],
+): string {
+  if (snippet.trigger === 'onConnect') return t('scripts.trigger.onConnect');
+  if (snippet.trigger === 'onOutput') return t('scripts.trigger.onOutput');
+  return t('scripts.trigger.manual');
+}
+
+function scriptById(snippets: Snippet[], scriptId: string): Snippet | undefined {
+  return snippets.find((snippet) => snippet.id === scriptId && isScriptSnippet(snippet));
+}
+
+export const HostDetailsScriptsSection: React.FC<HostDetailsScriptsSectionProps> = ({
+  host,
+  onHostChange,
+  snippets,
+  t,
+}) => {
+  const [draggingScriptId, setDraggingScriptId] = useState<string | null>(null);
+  const [dropIndicator, setDropIndicator] = useState<{ scriptId: string; position: 'before' | 'after' } | null>(null);
+
+  const scripts = useMemo(
+    () => snippets.filter(isScriptSnippet),
+    [snippets],
+  );
+  const globalScripts = useMemo(
+    () => getGlobalConnectScripts(snippets),
+    [snippets],
+  );
+  const queueIds = useMemo(
+    () => getEditableHostConnectScriptIds(host, snippets),
+    [host, snippets],
+  );
+  const groupScripts = useMemo(
+    () => getGroupConnectScriptsForHost(host, snippets).filter(
+      (script) => !script.id || !queueIds.includes(script.id),
+    ),
+    [host, queueIds, snippets],
+  );
+  const groupScriptIds = useMemo(
+    () => new Set(groupScripts.map((script) => script.id)),
+    [groupScripts],
+  );
+  const queuedScripts = useMemo(
+    () => queueIds
+      .map((id) => scriptById(snippets, id))
+      .filter((snippet): snippet is Snippet => Boolean(snippet)),
+    [queueIds, snippets],
+  );
+  const linkableScripts = useMemo(
+    () => scripts.filter((script) => {
+      if (!script.id) return false;
+      if (script.targetsAllHosts) return false;
+      if (groupScriptIds.has(script.id)) return false;
+      if (queueIds.includes(script.id)) return false;
+      return true;
+    }),
+    [groupScriptIds, queueIds, scripts],
+  );
+  const linkOptions = useMemo(
+    () => linkableScripts.map((script) => ({
+      value: script.id!,
+      label: script.label || t('scripts.running.unnamed'),
+    })),
+    [linkableScripts, t],
+  );
+
+  const clearDragState = useCallback(() => {
+    setDraggingScriptId(null);
+    setDropIndicator(null);
+  }, []);
+
+  if (scripts.length === 0) return null;
+
+  const handleAddToQueue = (scriptId: string) => {
+    if (!scriptId) return;
+    const snippet = scriptById(snippets, scriptId);
+    if (!snippet) return;
+    onHostChange(appendHostConnectScript(host, scriptId, snippets));
+  };
+
+  const handleRemoveFromQueue = (scriptId: string) => {
+    onHostChange(removeHostConnectScript(host, scriptId, snippets));
+  };
+
+  const handleDragStart = (event: DragEvent<HTMLDivElement>, scriptId: string) => {
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.setData(CONNECT_QUEUE_DRAG_TYPE, scriptId);
+    setDraggingScriptId(scriptId);
+  };
+
+  const handleDragOver = (event: DragEvent<HTMLDivElement>, scriptId: string) => {
+    if (!event.dataTransfer.types.includes(CONNECT_QUEUE_DRAG_TYPE)) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+    const position = getVaultDropPosition(event.currentTarget, event.clientX, event.clientY, false);
+    setDropIndicator((prev) => (
+      prev?.scriptId === scriptId && prev.position === position
+        ? prev
+        : { scriptId, position }
+    ));
+  };
+
+  const handleDrop = (event: DragEvent<HTMLDivElement>, targetScriptId: string) => {
+    event.preventDefault();
+    const draggedScriptId = event.dataTransfer.getData(CONNECT_QUEUE_DRAG_TYPE);
+    if (!draggedScriptId || draggedScriptId === targetScriptId) {
+      clearDragState();
+      return;
+    }
+    const position = getVaultDropPosition(event.currentTarget, event.clientX, event.clientY, false);
+    onHostChange(reorderHostConnectScript(host, draggedScriptId, targetScriptId, position, snippets));
+    clearDragState();
+  };
+
+  return (
+    <HostDetailsSection
+      icon={<Play size={14} className="text-muted-foreground" />}
+      title={t('hostDetails.section.automation')}
+      hint={t('hostDetails.automation.queueHint')}
+    >
+      <div className="space-y-4">
+        {globalScripts.length > 0 ? (
+          <div className="space-y-2">
+            <div className="flex items-center gap-1.5">
+              <Globe size={12} className="text-muted-foreground shrink-0" />
+              <label className="text-xs text-muted-foreground">{t('hostDetails.automation.globalScripts')}</label>
+            </div>
+            <p className="text-[10px] text-muted-foreground leading-relaxed">
+              {t('hostDetails.automation.globalScriptsHint')}
+            </p>
+            <div className="space-y-1.5">
+              {globalScripts.map((script) => (
+                <div
+                  key={script.id}
+                  className="flex items-center gap-2.5 px-2.5 py-2 rounded-md border border-border/50 bg-muted/20"
+                >
+                  <VaultEntityIcon
+                    className={cn(vaultEntityIconSmClass, vaultAutomationScriptIconClass)}
+                    icon={<Play size={14} />}
+                  />
+                  <div className="min-w-0 flex-1">
+                    <div className="text-sm font-medium truncate">{script.label || t('scripts.running.unnamed')}</div>
+                    <div className="text-[10px] text-muted-foreground truncate">{triggerLabel(script, t)}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : null}
+
+        {groupScripts.length > 0 ? (
+          <div className="space-y-2">
+            <div className="flex items-center gap-1.5">
+              <FolderTree size={12} className="text-muted-foreground shrink-0" />
+              <label className="text-xs text-muted-foreground">
+                {t('hostDetails.automation.groupScripts')}
+              </label>
+            </div>
+            <p className="text-[10px] text-muted-foreground leading-relaxed">
+              {t('hostDetails.automation.groupScriptsHint')}
+            </p>
+            <div className="space-y-1.5">
+              {groupScripts.map((script) => (
+                <div
+                  key={script.id}
+                  className="flex items-center gap-2.5 px-2.5 py-2 rounded-md border border-border/50 bg-primary/5"
+                >
+                  <VaultEntityIcon
+                    className={cn(vaultEntityIconSmClass, vaultAutomationScriptIconClass)}
+                    icon={<Play size={14} />}
+                  />
+                  <div className="min-w-0 flex-1">
+                    <div className="text-sm font-medium truncate">
+                      {script.label || t('scripts.running.unnamed')}
+                    </div>
+                    <div className="text-[10px] text-muted-foreground truncate">
+                      {script.targetGroups?.join(', ')}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : null}
+
+        <div className="space-y-2">
+          {queuedScripts.length === 0 ? (
+            <p className="text-[11px] text-muted-foreground">{t('hostDetails.automation.connectQueueEmpty')}</p>
+          ) : (
+            <div className="space-y-1.5" onDragEnd={clearDragState}>
+              {queuedScripts.map((script) => {
+                const scriptId = script.id!;
+                const isDragging = draggingScriptId === scriptId;
+                const indicator = dropIndicator?.scriptId === scriptId ? dropIndicator.position : null;
+
+                return (
+                  <div
+                    key={scriptId}
+                    draggable
+                    data-vault-drop-position={indicator ?? undefined}
+                    data-vault-drop-axis="y"
+                    className={cn(
+                      'vault-drop-indicator-row relative flex items-center gap-2.5 px-2.5 py-2 rounded-md border border-border/70 bg-background/60 transition-opacity cursor-grab active:cursor-grabbing',
+                      isDragging && 'opacity-40',
+                    )}
+                    aria-label={t('hostDetails.automation.dragHandle')}
+                    onDragStart={(event) => handleDragStart(event, scriptId)}
+                    onDragOver={(event) => handleDragOver(event, scriptId)}
+                    onDrop={(event) => handleDrop(event, scriptId)}
+                  >
+                    <VaultEntityIcon
+                      className={cn(vaultEntityIconSmClass, vaultAutomationScriptIconClass)}
+                      icon={<Play size={14} />}
+                    />
+                    <div className="min-w-0 flex-1 select-none">
+                      <div className="text-sm font-medium truncate">{script.label || t('scripts.running.unnamed')}</div>
+                      <div className="text-[10px] text-muted-foreground truncate">{triggerLabel(script, t)}</div>
+                    </div>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      className="h-7 w-7 shrink-0 text-muted-foreground hover:text-destructive"
+                      onMouseDown={(event) => event.stopPropagation()}
+                      onClick={() => handleRemoveFromQueue(scriptId)}
+                      aria-label={t('hostDetails.automation.removeFromQueue')}
+                    >
+                      <Trash2 size={13} />
+                    </Button>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          {linkOptions.length > 0 ? (
+            <Combobox
+              options={linkOptions}
+              value=""
+              onValueChange={handleAddToQueue}
+              placeholder={t('hostDetails.automation.addToQueuePlaceholder')}
+              icon={<Link2 size={14} />}
+              triggerClassName="h-9"
+            />
+          ) : null}
+        </div>
+      </div>
+    </HostDetailsSection>
+  );
+};