dsh-explorer 0.0.0-stage → 0.1.0

package/package.json

@@ -1,6 +1,94 @@
 {
   "name": "dsh-explorer",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Native workspace file explorer for DeepSeek Harness with precision drag-and-drop chat insertion, motion collapse, git status badges, compact folders, and tab integration",
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./lib/index.js"
+    },
+    "./client": {
+      "default": "./lib/client.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-ui-slots",
+        "@deepseek-ai/dsh-client-ui-conversation",
+        "@deepseek-ai/dsh-client-ui-sidebar-right",
+        "@deepseek-ai/dsh-client-modules"
+      ],
+      "platform": "web"
+    },
+    "manifestVersion": 1
+  },
+  "files": [
+    "lib/index.js",
+    "lib/client.js",
+    "src",
+    "cordis.patch.yml",
+    "icon.svg",
+    "README.md",
+    "package.json",
+    "LICENSE"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "dsh-plugin",
+    "deepseek-harness",
+    "file-explorer",
+    "workspace-explorer"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wwwroot/dsh-explorer.git"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "ws": "^8.18.0",
+    "yaml": "^2.7.0"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "^4.0.5",
+    "@deepseek-ai/dsh-client-locale": "^0.2.1-rc.1",
+    "@deepseek-ai/dsh-client-ui-conversation": "^0.2.1-rc.1",
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.2.1-rc.1",
+    "@deepseek-ai/dsh-client-ui-sidebar-right": "^0.2.1-rc.1",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.2.1-rc.1",
+    "@deepseek-ai/dsh-host-webserver": "^0.2.1-rc.1",
+    "@deepseek-ai/dsh-session": "^0.2.1-rc.1",
+    "@deepseek-ai/schemastery": "^3.18.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@deepseek-ai/dsh-client-ui-sidebar-right": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "@types/react": "~18.3.1",
+    "@types/react-dom": "~18.3.1",
+    "@types/ws": "^8.5.10",
+    "esbuild": "^0.28.2",
+    "typescript": "^5.6.0"
+  },
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "typecheck": "tsc --noEmit"
+  }
+}
+

package/src/client/ExplorerContextMenu.tsx

@@ -0,0 +1,159 @@
+import React, { useEffect, useRef } from 'react'
+import css from './explorer.module.css'
+import type { FsEntry } from './api.ts'
+
+interface ContextMenuProps {
+  x: number
+  y: number
+  entry: FsEntry
+  relativePath: string
+  onClose: () => void
+  onOpenFile?: () => void
+  onInsertReference: () => void
+  onInsertSnippet: () => void
+  onCopyPath: () => void
+  onCopyRelativePath: () => void
+  onNewFile: () => void
+  onNewFolder: () => void
+  onRename: () => void
+  onDelete: () => void
+}
+
+export const ExplorerContextMenu: React.FC<ContextMenuProps> = ({
+  x,
+  y,
+  entry,
+  relativePath,
+  onClose,
+  onOpenFile,
+  onInsertReference,
+  onInsertSnippet,
+  onCopyPath,
+  onCopyRelativePath,
+  onNewFile,
+  onNewFolder,
+  onRename,
+  onDelete,
+}) => {
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose()
+      }
+    }
+    window.addEventListener('mousedown', handleOutsideClick)
+    return () => window.removeEventListener('mousedown', handleOutsideClick)
+  }, [onClose])
+
+  // Adjust menu bounds if overflowing screen
+  const top = Math.min(y, window.innerHeight - 260)
+  const left = Math.min(x, window.innerWidth - 200)
+
+  return (
+    <div ref={menuRef} className={css.contextMenu} style={{ top, left }}>
+      {!entry.isDir && onOpenFile && (
+        <>
+          <div
+            className={css.menuItem}
+            onClick={() => {
+              onOpenFile()
+              onClose()
+            }}
+          >
+            <span>Open in New Tab</span>
+            <span className={css.menuShortcut}>Double-Click</span>
+          </div>
+          <div className={css.menuDivider} />
+        </>
+      )}
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onInsertReference()
+          onClose()
+        }}
+      >
+        <span>Insert Mention to Chat</span>
+        <span className={css.menuShortcut}>@</span>
+      </div>
+      {!entry.isDir && (
+        <div
+          className={css.menuItem}
+          onClick={() => {
+            onInsertSnippet()
+            onClose()
+          }}
+        >
+          <span>Insert Code to Chat</span>
+          <span className={css.menuShortcut}>Alt+Drop</span>
+        </div>
+      )}
+      <div className={css.menuDivider} />
+      {entry.isDir && (
+        <>
+          <div
+            className={css.menuItem}
+            onClick={() => {
+              onNewFile()
+              onClose()
+            }}
+          >
+            <span>New File...</span>
+          </div>
+          <div
+            className={css.menuItem}
+            onClick={() => {
+              onNewFolder()
+              onClose()
+            }}
+          >
+            <span>New Folder...</span>
+          </div>
+          <div className={css.menuDivider} />
+        </>
+      )}
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onCopyRelativePath()
+          onClose()
+        }}
+      >
+        <span>Copy Relative Path</span>
+      </div>
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onCopyPath()
+          onClose()
+        }}
+      >
+        <span>Copy Path</span>
+      </div>
+      <div className={css.menuDivider} />
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onRename()
+          onClose()
+        }}
+      >
+        <span>Rename...</span>
+        <span className={css.menuShortcut}>F2</span>
+      </div>
+      <div
+        className={css.menuItem}
+        onClick={() => {
+          onDelete()
+          onClose()
+        }}
+      >
+        <span style={{ color: '#f44336' }}>Delete</span>
+        <span className={css.menuShortcut}>Del</span>
+      </div>
+    </div>
+  )
+}
+

package/src/client/ExplorerHeader.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import css from './explorer.module.css'
+
+interface ExplorerHeaderProps {
+  title: string
+  searchOpen: boolean
+  optionsOpen: boolean
+  onToggleSearch: () => void
+  onToggleOptions: () => void
+  onNewFile: () => void
+  onNewFolder: () => void
+  onRefresh: () => void
+  onCollapseAll: () => void
+}
+
+export const ExplorerHeader: React.FC<ExplorerHeaderProps> = ({
+  title,
+  searchOpen,
+  optionsOpen,
+  onToggleSearch,
+  onToggleOptions,
+  onNewFile,
+  onNewFolder,
+  onRefresh,
+  onCollapseAll,
+}) => {
+  return (
+    <div className={css.header}>
+      <span className={css.headerTitle} title={title}>
+        {title}
+      </span>
+      <div className={css.headerActions}>
+        <button
+          className={`${css.iconBtn} ${searchOpen ? css.iconBtnActive : ''}`}
+          title="Filter files"
+          onClick={onToggleSearch}
+        >
+          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+          </svg>
+        </button>
+        <button className={css.iconBtn} title="New File" onClick={onNewFile}>
+          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M9 1H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6L9 1zm0 1.5L12.5 6H9V2.5zM8 8.5V11h1V8.5h2.5v-1H9V5H8v2.5H5.5v1H8z"/>
+          </svg>
+        </button>
+        <button className={css.iconBtn} title="New Folder" onClick={onNewFolder}>
+          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M7 2l2 2h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h5zm2.5 6.5H8V6H7v2.5H4.5v1H7V12h1V9.5h2.5v-1z"/>
+          </svg>
+        </button>
+        <button className={css.iconBtn} title="Refresh" onClick={onRefresh}>
+          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M13.65 2.35A7.958 7.958 0 0 0 8 0a8 8 0 1 0 8 8h-2a6 6 0 1 1-1.76-4.24l-2.24 2.24H16V0l-2.35 2.35z"/>
+          </svg>
+        </button>
+        <button className={css.iconBtn} title="Collapse All Folders" onClick={onCollapseAll}>
+          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M1 3.5l1.5-1.5L8 7.5 13.5 2 15 3.5 8 10.5 1 3.5zM1 9.5l1.5-1.5L8 13.5 13.5 8 15 9.5 8 16.5 1 9.5z"/>
+          </svg>
+        </button>
+        <button
+          className={`${css.iconBtn} ${optionsOpen ? css.iconBtnActive : ''}`}
+          title="Explorer Options"
+          onClick={onToggleOptions}
+        >
+          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  )
+}
+

package/src/client/ExplorerOptionsModal.tsx

@@ -0,0 +1,243 @@
+import React, { useEffect, useRef } from 'react'
+import css from './explorer.module.css'
+import type { ExplorerOptions, ExplorerDensity, SingleClickAction } from './options.ts'
+
+interface ExplorerOptionsModalProps {
+  options: ExplorerOptions
+  onChange: (updated: Partial<ExplorerOptions>) => void
+  onReset: () => void
+  onClose: () => void
+}
+
+export const ExplorerOptionsModal: React.FC<ExplorerOptionsModalProps> = ({
+  options,
+  onChange,
+  onReset,
+  onClose,
+}) => {
+  const popoverRef = useRef<HTMLDivElement>(null)
+
+  // Close on Click Outside & Escape key
+  useEffect(() => {
+    const handleMouseDown = (e: MouseEvent) => {
+      if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
+        onClose()
+      }
+    }
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    document.addEventListener('mousedown', handleMouseDown, true)
+    document.addEventListener('keydown', handleKeyDown, true)
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown, true)
+      document.removeEventListener('keydown', handleKeyDown, true)
+    }
+  }, [onClose])
+
+  const handleDensityChange = (density: ExplorerDensity) => {
+    onChange({ density })
+  }
+
+  const handleScaleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const scale = parseFloat(e.target.value)
+    if (!Number.isNaN(scale)) {
+      onChange({ scale: Math.round(scale * 100) / 100 })
+    }
+  }
+
+  const handleActionChange = (action: SingleClickAction) => {
+    onChange({ singleClickAction: action })
+  }
+
+  return (
+    <div ref={popoverRef} className={css.optionsPopover}>
+      {/* Header */}
+      <div className={css.optionsHeader}>
+        <div className={css.optionsHeaderTitle}>
+          <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor" style={{ marginRight: '6px' }}>
+            <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z" />
+          </svg>
+          EXPLORER OPTIONS
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+          <button className={css.optionsIconBtn} title="Reset to defaults" onClick={onReset}>
+            <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M13.65 2.35A7.958 7.958 0 0 0 8 0a8 8 0 1 0 8 8h-2a6 6 0 1 1-1.76-4.24l-2.24 2.24H16V0l-2.35 2.35z" />
+            </svg>
+          </button>
+          <button className={css.optionsIconBtn} title="Close" onClick={onClose}>
+            <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Body */}
+      <div className={css.optionsBody}>
+        {/* Section 1: Density & Scale */}
+        <div className={css.optionsSection}>
+          <div className={css.optionsSectionTitle}>Scale & Density</div>
+
+          {/* Density preset buttons */}
+          <div className={css.segmentGroup}>
+            <button
+              type="button"
+              className={`${css.segmentBtn} ${options.density === 'compact' ? css.segmentBtnActive : ''}`}
+              onClick={() => handleDensityChange('compact')}
+            >
+              Compact
+            </button>
+            <button
+              type="button"
+              className={`${css.segmentBtn} ${options.density === 'normal' ? css.segmentBtnActive : ''}`}
+              onClick={() => handleDensityChange('normal')}
+            >
+              Normal
+            </button>
+            <button
+              type="button"
+              className={`${css.segmentBtn} ${options.density === 'relaxed' ? css.segmentBtnActive : ''}`}
+              onClick={() => handleDensityChange('relaxed')}
+            >
+              Relaxed
+            </button>
+          </div>
+
+          {/* Scale zoom slider */}
+          <div className={css.optionsRow} style={{ marginTop: '6px' }}>
+            <div className={css.optionsLabelWrap}>
+              <span className={css.optionsLabel}>Zoom Scale</span>
+              <span className={css.optionsSubLabel}>Resize tree text and icons</span>
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+              <span className={css.optionsBadge}>{Math.round(options.scale * 100)}%</span>
+              {options.scale !== 1.0 && (
+                <button
+                  type="button"
+                  className={css.optionsMiniBtn}
+                  title="Reset scale to 100%"
+                  onClick={() => onChange({ scale: 1.0 })}
+                >
+                  1x
+                </button>
+              )}
+            </div>
+          </div>
+          <input
+            type="range"
+            min="0.75"
+            max="1.35"
+            step="0.05"
+            value={options.scale}
+            onChange={handleScaleChange}
+            className={css.optionsSlider}
+          />
+        </div>
+
+        {/* Section 2: Motion & Animation */}
+        <div className={css.optionsSection}>
+          <div className={css.optionsSectionTitle}>Motion & Transitions</div>
+          <div className={css.optionsRow}>
+            <div className={css.optionsLabelWrap}>
+              <span className={css.optionsLabel}>Smooth Animations</span>
+              <span className={css.optionsSubLabel}>Fluid folder collapse & icon turns</span>
+            </div>
+            <div
+              className={`${css.switch} ${options.enableMotion ? css.switchActive : ''}`}
+              onClick={() => onChange({ enableMotion: !options.enableMotion })}
+              role="switch"
+              aria-checked={options.enableMotion}
+            >
+              <div className={`${css.switchKnob} ${options.enableMotion ? css.switchKnobActive : ''}`} />
+            </div>
+          </div>
+        </div>
+
+        {/* Section 3: File Tree Display */}
+        <div className={css.optionsSection}>
+          <div className={css.optionsSectionTitle}>Workspace View</div>
+
+          {/* Show hidden files */}
+          <div className={css.optionsRow}>
+            <div className={css.optionsLabelWrap}>
+              <span className={css.optionsLabel}>Show Hidden Files</span>
+              <span className={css.optionsSubLabel}>Include dotfiles and config directories</span>
+            </div>
+            <div
+              className={`${css.switch} ${options.showHiddenFiles ? css.switchActive : ''}`}
+              onClick={() => onChange({ showHiddenFiles: !options.showHiddenFiles })}
+              role="switch"
+              aria-checked={options.showHiddenFiles}
+            >
+              <div className={`${css.switchKnob} ${options.showHiddenFiles ? css.switchKnobActive : ''}`} />
+            </div>
+          </div>
+
+          {/* Git badges */}
+          <div className={css.optionsRow}>
+            <div className={css.optionsLabelWrap}>
+              <span className={css.optionsLabel}>Git Status Indicators</span>
+              <span className={css.optionsSubLabel}>Highlight modified & untracked files</span>
+            </div>
+            <div
+              className={`${css.switch} ${options.showGitBadges ? css.switchActive : ''}`}
+              onClick={() => onChange({ showGitBadges: !options.showGitBadges })}
+              role="switch"
+              aria-checked={options.showGitBadges}
+            >
+              <div className={`${css.switchKnob} ${options.showGitBadges ? css.switchKnobActive : ''}`} />
+            </div>
+          </div>
+
+          {/* Compact folders */}
+          <div className={css.optionsRow}>
+            <div className={css.optionsLabelWrap}>
+              <span className={css.optionsLabel}>Compact Folders</span>
+              <span className={css.optionsSubLabel}>Chain single-child directory paths</span>
+            </div>
+            <div
+              className={`${css.switch} ${options.compactFolders ? css.switchActive : ''}`}
+              onClick={() => onChange({ compactFolders: !options.compactFolders })}
+              role="switch"
+              aria-checked={options.compactFolders}
+            >
+              <div className={`${css.switchKnob} ${options.compactFolders ? css.switchKnobActive : ''}`} />
+            </div>
+          </div>
+        </div>
+
+        {/* Section 4: Quick Workflow */}
+        <div className={css.optionsSection}>
+          <div className={css.optionsSectionTitle}>Interaction</div>
+          <div className={css.optionsRow}>
+            <div className={css.optionsLabelWrap}>
+              <span className={css.optionsLabel}>File Click Behavior</span>
+              <span className={css.optionsSubLabel}>Direct action when clicking a file</span>
+            </div>
+          </div>
+          <div className={css.segmentGroup} style={{ marginTop: '4px' }}>
+            <button
+              type="button"
+              className={`${css.segmentBtn} ${options.singleClickAction === 'select' ? css.segmentBtnActive : ''}`}
+              onClick={() => handleActionChange('select')}
+            >
+              Select / Focus
+            </button>
+            <button
+              type="button"
+              className={`${css.segmentBtn} ${options.singleClickAction === 'mention' ? css.segmentBtnActive : ''}`}
+              onClick={() => handleActionChange('mention')}
+            >
+              Insert @Mention
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}