@aion0/forge 0.4.4 → 0.4.5

package/RELEASE_NOTES.md

@@ -1,28 +1,11 @@
-# Forge v0.4.4
+# Forge v0.4.5
 
 Released: 2026-03-21
 
-## Changes since v0.4.3
-
-### Features
-- feat: add scheduled pipeline execution for project bindings
-- feat: pipeline import/delete + editor cancel confirmation
+## Changes since v0.4.4
 
 ### Bug Fixes
-- fix: embed editor in right panel, button nesting, fetchData error handling
-
-### Refactoring
-- refactor: generic project-pipeline bindings replace hardcoded issue scanner
-- refactor: pipeline UI — workflow list in sidebar, project dropdown, per-workflow history
-- refactor: merge issue-auto-fix + pr-review into single issue-fix-and-review pipeline
-
-### Documentation
-- feat: pipeline import/delete + editor cancel confirmation
-
-### Other
-- fix issue
-- fix issue
-- fix issues for no any issue on github
+- fix: add drag-to-resize for left sidebars across all split-panel pages (#14)
 
 
-**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.4.3...v0.4.4
+**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.4.4...v0.4.5

package/components/CodeViewer.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useCallback, useRef, lazy, Suspense } from 'react';
 import type { WebTerminalHandle, WebTerminalProps } from './WebTerminal';
+import { useSidebarResize } from '@/hooks/useSidebarResize';
 
 const WebTerminal = lazy(() => import('./WebTerminal'));
 
@@ -196,6 +197,7 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
   const [activeSession, setActiveSession] = useState<string | null>(null);
   const [taskNotification, setTaskNotification] = useState<{ id: string; status: string; prompt: string; sessionId?: string } | null>(null);
   const dragRef = useRef<{ startY: number; startH: number } | null>(null);
+  const { sidebarWidth, onSidebarDragStart } = useSidebarResize({ defaultWidth: 224, minWidth: 120, maxWidth: 480 });
   const lastDirRef = useRef<string | null>(null);
   const lastTaskCheckRef = useRef<string>('');
 
@@ -437,7 +439,7 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
       {codeOpen && <div className="flex-1 flex min-h-0 min-w-0 overflow-hidden">
         {/* Sidebar */}
         {sidebarOpen && (
-          <aside className="w-56 border-r border-[var(--border)] flex flex-col shrink-0">
+          <aside style={{ width: sidebarWidth }} className="flex flex-col shrink-0 overflow-hidden">
             {/* Directory name + git */}
             <div className="px-3 py-2 border-b border-[var(--border)]">
               <div className="flex items-center gap-2">
@@ -611,6 +613,14 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
           </aside>
         )}
 
+        {/* Sidebar resize handle */}
+        {sidebarOpen && (
+          <div
+            onMouseDown={onSidebarDragStart}
+            className="w-1 bg-[var(--border)] cursor-col-resize shrink-0 hover:bg-[var(--accent)]/50 transition-colors"
+          />
+        )}
+
         {/* Code viewer */}
         <main className="flex-1 flex flex-col min-w-0 overflow-hidden" style={{ width: 0 }}>
           <div className="px-3 py-1.5 border-b border-[var(--border)] shrink-0 flex items-center gap-2">

package/components/DocsViewer.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useCallback, useRef, lazy, Suspense } from 'react';
+import { useSidebarResize } from '@/hooks/useSidebarResize';
 import MarkdownContent from './MarkdownContent';
 import TabBar from './TabBar';
 
@@ -100,6 +101,7 @@ export default function DocsViewer() {
   const [editContent, setEditContent] = useState('');
   const [saving, setSaving] = useState(false);
   const dragRef = useRef<{ startY: number; startH: number } | null>(null);
+  const { sidebarWidth, onSidebarDragStart } = useSidebarResize({ defaultWidth: 224, minWidth: 120, maxWidth: 480 });
 
   // Doc tabs
   const [docTabs, setDocTabs] = useState<DocTab[]>([]);
@@ -324,7 +326,7 @@ export default function DocsViewer() {
       <div className="flex-1 flex min-h-0">
         {/* Collapsible sidebar — file tree */}
         {sidebarOpen && (
-          <aside className="w-56 border-r border-[var(--border)] flex flex-col shrink-0">
+          <aside style={{ width: sidebarWidth }} className="flex flex-col shrink-0 overflow-hidden">
             {/* Root selector */}
             {roots.length > 0 && (
               <div className="p-2 border-b border-[var(--border)]">
@@ -390,6 +392,14 @@ export default function DocsViewer() {
           </aside>
         )}
 
+        {/* Sidebar resize handle */}
+        {sidebarOpen && (
+          <div
+            onMouseDown={onSidebarDragStart}
+            className="w-1 bg-[var(--border)] cursor-col-resize shrink-0 hover:bg-[var(--accent)]/50 transition-colors"
+          />
+        )}
+
         {/* Main content */}
         <main className="flex-1 flex flex-col min-w-0">
           {/* Doc tab bar */}

package/components/PipelineView.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useCallback, lazy, Suspense } from 'react';
+import { useSidebarResize } from '@/hooks/useSidebarResize';
 
 const PipelineEditor = lazy(() => import('./PipelineEditor'));
 
@@ -64,6 +65,7 @@ const STATUS_COLOR: Record<string, string> = {
 };
 
 export default function PipelineView({ onViewTask }: { onViewTask?: (taskId: string) => void }) {
+  const { sidebarWidth, onSidebarDragStart } = useSidebarResize({ defaultWidth: 256, minWidth: 140, maxWidth: 480 });
   const [pipelines, setPipelines] = useState<Pipeline[]>([]);
   const [workflows, setWorkflows] = useState<Workflow[]>([]);
   const [selectedPipeline, setSelectedPipeline] = useState<Pipeline | null>(null);
@@ -158,7 +160,7 @@ export default function PipelineView({ onViewTask }: { onViewTask?: (taskId: str
   return (
     <div className="flex-1 flex min-h-0">
       {/* Left — Workflow list */}
-      <aside className="w-64 border-r border-[var(--border)] flex flex-col shrink-0">
+      <aside style={{ width: sidebarWidth }} className="flex flex-col shrink-0 overflow-hidden">
         <div className="px-3 py-2 border-b border-[var(--border)] flex items-center gap-1.5">
           <span className="text-[11px] font-semibold text-[var(--text-primary)] flex-1">Workflows</span>
           <button
@@ -369,6 +371,12 @@ export default function PipelineView({ onViewTask }: { onViewTask?: (taskId: str
         </div>
       </aside>
 
+      {/* Sidebar resize handle */}
+      <div
+        onMouseDown={onSidebarDragStart}
+        className="w-1 bg-[var(--border)] cursor-col-resize shrink-0 hover:bg-[var(--accent)]/50 transition-colors"
+      />
+
       {/* Right — Pipeline detail / Editor */}
       <main className="flex-1 flex flex-col min-w-0 overflow-hidden">
         {showEditor ? (

package/components/ProjectDetail.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useState, useEffect, useCallback, memo } from 'react';
+import { useSidebarResize } from '@/hooks/useSidebarResize';
 
 // ─── Syntax highlighting ─────────────────────────────────
 const KEYWORDS = new Set([
@@ -49,6 +50,7 @@ interface GitInfo {
 }
 
 export default memo(function ProjectDetail({ projectPath, projectName, hasGit }: { projectPath: string; projectName: string; hasGit: boolean }) {
+  const { sidebarWidth, onSidebarDragStart } = useSidebarResize({ defaultWidth: 208, minWidth: 120, maxWidth: 400 });
   const [gitInfo, setGitInfo] = useState<GitInfo | null>(null);
   const [loading, setLoading] = useState(false);
   const [commitMsg, setCommitMsg] = useState('');
@@ -490,12 +492,18 @@ export default memo(function ProjectDetail({ projectPath, projectName, hasGit }:
       {/* Code content area */}
       {projectTab === 'code' && <div className="flex-1 flex min-h-0 overflow-hidden">
         {/* File tree */}
-        <div className="w-52 border-r border-[var(--border)] overflow-y-auto p-1 shrink-0">
+        <div style={{ width: sidebarWidth }} className="overflow-y-auto p-1 shrink-0">
           {fileTree.map((node: any) => (
             <FileTreeNode key={node.path} node={node} depth={0} selected={selectedFile} onSelect={openFile} />
           ))}
         </div>
 
+        {/* Sidebar resize handle */}
+        <div
+          onMouseDown={onSidebarDragStart}
+          className="w-1 bg-[var(--border)] cursor-col-resize shrink-0 hover:bg-[var(--accent)]/50 transition-colors"
+        />
+
         {/* File content */}
         <div className="flex-1 min-w-0 overflow-auto bg-[var(--bg-primary)]" style={{ width: 0 }}>
           {/* Diff view */}
@@ -543,7 +551,7 @@ export default memo(function ProjectDetail({ projectPath, projectName, hasGit }:
       {projectTab === 'skills' && (
         <div className="flex-1 flex min-h-0 overflow-hidden">
           {/* Left: skill/command tree */}
-          <div className="w-52 border-r border-[var(--border)] overflow-y-auto p-1 shrink-0">
+          <div style={{ width: sidebarWidth }} className="overflow-y-auto p-1 shrink-0">
             {projectSkills.length === 0 ? (
               <p className="text-[9px] text-[var(--text-secondary)] p-2">No skills or commands installed</p>
             ) : (
@@ -591,6 +599,12 @@ export default memo(function ProjectDetail({ projectPath, projectName, hasGit }:
             )}
           </div>
 
+          {/* Sidebar resize handle */}
+          <div
+            onMouseDown={onSidebarDragStart}
+            className="w-1 bg-[var(--border)] cursor-col-resize shrink-0 hover:bg-[var(--accent)]/50 transition-colors"
+          />
+
           {/* Right: file content / editor */}
           <div className="flex-1 min-w-0 flex flex-col overflow-hidden bg-[var(--bg-primary)]">
             {skillActivePath ? (
@@ -658,7 +672,7 @@ export default memo(function ProjectDetail({ projectPath, projectName, hasGit }:
       {projectTab === 'claudemd' && (
         <div className="flex-1 flex min-h-0 overflow-hidden">
           {/* Left: templates list */}
-          <div className="w-52 border-r border-[var(--border)] overflow-y-auto shrink-0 flex flex-col">
+          <div style={{ width: sidebarWidth }} className="overflow-y-auto shrink-0 flex flex-col">
             <button
               onClick={() => { setClaudeSelectedTemplate(null); setClaudeEditing(false); }}
               className={`w-full px-2 py-1.5 border-b border-[var(--border)] text-[10px] text-left flex items-center gap-1 ${
@@ -703,6 +717,12 @@ export default memo(function ProjectDetail({ projectPath, projectName, hasGit }:
             </div>
           </div>
 
+          {/* Sidebar resize handle */}
+          <div
+            onMouseDown={onSidebarDragStart}
+            className="w-1 bg-[var(--border)] cursor-col-resize shrink-0 hover:bg-[var(--accent)]/50 transition-colors"
+          />
+
           {/* Right: CLAUDE.md content or template preview */}
           <div className="flex-1 min-w-0 flex flex-col overflow-hidden bg-[var(--bg-primary)]">
             {/* Header bar */}

package/components/SessionView.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useRef, useCallback } from 'react';
+import { useSidebarResize } from '@/hooks/useSidebarResize';
 import MarkdownContent from './MarkdownContent';
 
 interface SessionEntry {
@@ -42,6 +43,7 @@ export default function SessionView({
   projects: { name: string; path: string; language: string | null }[];
   onOpenInTerminal?: (sessionId: string, projectPath: string) => void;
 }) {
+  const { sidebarWidth, onSidebarDragStart } = useSidebarResize({ defaultWidth: 288, minWidth: 160, maxWidth: 480 });
   // Tree data: project → sessions
   const [sessionTree, setSessionTree] = useState<Record<string, ClaudeSessionInfo[]>>({});
   const [expandedProjects, setExpandedProjects] = useState<Set<string>>(new Set());
@@ -285,7 +287,7 @@ export default function SessionView({
   return (
     <div className="flex h-full">
       {/* Left: tree view */}
-      <div className="w-72 border-r border-[var(--border)] flex flex-col shrink-0">
+      <div style={{ width: sidebarWidth }} className="flex flex-col shrink-0 overflow-hidden">
         {/* Header */}
         <div className="flex items-center justify-between p-2 border-b border-[var(--border)]">
           <span className="text-[10px] font-semibold text-[var(--text-secondary)] uppercase">Sessions</span>
@@ -451,6 +453,12 @@ export default function SessionView({
         </div>
       </div>
 
+      {/* Sidebar resize handle */}
+      <div
+        onMouseDown={onSidebarDragStart}
+        className="w-1 bg-[var(--border)] cursor-col-resize shrink-0 hover:bg-[var(--accent)]/50 transition-colors"
+      />
+
       {/* Right: session content */}
       <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
         {activeSession && (

package/components/SkillsPanel.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
+import { useSidebarResize } from '@/hooks/useSidebarResize';
 
 type ItemType = 'skill' | 'command';
 
@@ -28,6 +29,7 @@ interface ProjectInfo {
 }
 
 export default function SkillsPanel({ projectFilter }: { projectFilter?: string }) {
+  const { sidebarWidth, onSidebarDragStart } = useSidebarResize({ defaultWidth: 224, minWidth: 140, maxWidth: 400 });
   const [skills, setSkills] = useState<Skill[]>([]);
   const [projects, setProjects] = useState<ProjectInfo[]>([]);
   const [syncing, setSyncing] = useState(false);
@@ -282,7 +284,7 @@ export default function SkillsPanel({ projectFilter }: { projectFilter?: string
       ) : (
         <div className="flex-1 flex min-h-0">
           {/* Left: skill list */}
-          <div className="w-56 border-r border-[var(--border)] overflow-y-auto shrink-0">
+          <div style={{ width: sidebarWidth }} className="overflow-y-auto shrink-0">
             {/* Registry items */}
             {filtered.map(skill => {
               const isInstalled = skill.installedGlobal || skill.installedProjects.length > 0;
@@ -401,6 +403,12 @@ export default function SkillsPanel({ projectFilter }: { projectFilter?: string
             )}
           </div>
 
+          {/* Sidebar resize handle */}
+          <div
+            onMouseDown={onSidebarDragStart}
+            className="w-1 bg-[var(--border)] cursor-col-resize shrink-0 hover:bg-[var(--accent)]/50 transition-colors"
+          />
+
           {/* Right: detail panel */}
           <div className="flex-1 flex flex-col min-w-0">
             {expandedSkill ? (() => {

package/hooks/useSidebarResize.ts

@@ -0,0 +1,52 @@
+import { useState, useRef, useCallback } from 'react';
+
+interface UseSidebarResizeOptions {
+  defaultWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+}
+
+/**
+ * Provides drag-to-resize behaviour for a vertical split panel sidebar.
+ *
+ * Usage:
+ *   const { sidebarWidth, onSidebarDragStart } = useSidebarResize({ defaultWidth: 224 });
+ *
+ *   <aside style={{ width: sidebarWidth }} className="flex flex-col shrink-0 overflow-hidden">…</aside>
+ *   <div onMouseDown={onSidebarDragStart} className="w-1 cursor-col-resize shrink-0 bg-[var(--border)] hover:bg-[var(--accent)]/50" />
+ *   <main className="flex-1 min-w-0">…</main>
+ */
+export function useSidebarResize({
+  defaultWidth = 224,
+  minWidth = 120,
+  maxWidth = 480,
+}: UseSidebarResizeOptions = {}) {
+  const [sidebarWidth, setSidebarWidth] = useState(defaultWidth);
+  // Track the in-progress drag without causing re-renders in the move handler
+  const dragRef = useRef<{ startX: number; startW: number } | null>(null);
+  // Keep a mutable copy so the stable onSidebarDragStart callback always reads the latest width
+  const widthRef = useRef(defaultWidth);
+
+  const onSidebarDragStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    dragRef.current = { startX: e.clientX, startW: widthRef.current };
+
+    const onMove = (ev: MouseEvent) => {
+      if (!dragRef.current) return;
+      const next = Math.max(minWidth, Math.min(maxWidth, dragRef.current.startW + ev.clientX - dragRef.current.startX));
+      widthRef.current = next;
+      setSidebarWidth(next);
+    };
+
+    const onUp = () => {
+      dragRef.current = null;
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  }, [minWidth, maxWidth]);
+
+  return { sidebarWidth, onSidebarDragStart };
+}

package/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aion0/forge",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "Unified AI workflow platform — multi-model task orchestration, persistent sessions, web terminal, remote access",
   "type": "module",
   "scripts": {