feat: integrate Heroprompt UI and backend

- Replace generic UI with dedicated Heroprompt web interface
- Implement new Heroprompt-specific backend APIs
- Develop client-side logic for file browsing and selection
- Enhance workspace configuration and management capabilities
- Remove deprecated generic UI modules and code
This commit is contained in:
Mahmoud-Emad
2025-08-21 10:49:02 +03:00
parent 3988548fe9
commit 854eb9972b
16 changed files with 2493 additions and 1128 deletions

View File

@@ -1,7 +1,7 @@
module herocmds module herocmds
import freeflowuniverse.herolib.ui.console import freeflowuniverse.herolib.ui.console
import freeflowuniverse.herolib.web.ui import freeflowuniverse.herolib.web.heroprompt
import os import os
import cli { Command, Flag } import cli { Command, Flag }
import time import time
@@ -9,7 +9,7 @@ import time
pub fn cmd_web(mut cmdroot Command) Command { pub fn cmd_web(mut cmdroot Command) Command {
mut cmd_run := Command{ mut cmd_run := Command{
name: 'web' name: 'web'
description: 'Run or build the Hero UI (located in lib/web/ui).' description: 'Run the Heroprompt UI (located in lib/web/heroprompt).'
required_args: 0 required_args: 0
execute: cmd_web_execute execute: cmd_web_execute
} }
@@ -56,23 +56,22 @@ fn cmd_web_execute(cmd Command) ! {
port = 8080 port = 8080
} }
console.print_header('Starting Hero UI...') console.print_header('Starting Heroprompt...')
// Prepare arguments for the UI factory // Prepare arguments for the Heroprompt server
mut factory_args := ui.FactoryArgs{ mut factory_args := heroprompt.FactoryArgs{
title: 'Hero Admin Panel' title: 'Heroprompt'
host: host host: host
port: port port: port
open: open_
} }
// ---------- START WEB SERVER ---------- // ---------- START WEB SERVER ----------
console.print_header('Starting Hero UI server...') console.print_header('Starting Heroprompt server...')
// Start the UI server in a separate thread to allow for browser opening // Start the server in a separate thread to allow for browser opening
spawn fn [factory_args] () { spawn fn [factory_args] () {
ui.start(factory_args) or { heroprompt.start(factory_args) or {
console.print_stderr('Failed to start UI server: ${err}') console.print_stderr('Failed to start Heroprompt server: ${err}')
return return
} }
}() }()
@@ -81,7 +80,7 @@ fn cmd_web_execute(cmd Command) ! {
time.sleep(2 * time.second) time.sleep(2 * time.second)
url := 'http://${factory_args.host}:${factory_args.port}' url := 'http://${factory_args.host}:${factory_args.port}'
console.print_green('Hero UI server is running on ${url}') console.print_green('Heroprompt server is running on ${url}')
if open_ { if open_ {
mut cmd_str := '' mut cmd_str := ''
@@ -96,7 +95,7 @@ fn cmd_web_execute(cmd Command) ! {
if cmd_str != '' { if cmd_str != '' {
result := os.execute(cmd_str) result := os.execute(cmd_str)
if result.exit_code == 0 { if result.exit_code == 0 {
console.print_green('Opened UI in default browser.') console.print_green('Opened Heroprompt in default browser.')
} else { } else {
console.print_stderr('Failed to open browser: ${result.output}') console.print_stderr('Failed to open browser: ${result.output}')
} }

View File

@@ -16,13 +16,15 @@ __global (
pub struct ArgsGet { pub struct ArgsGet {
pub mut: pub mut:
name string = 'default' name string = 'default'
path string
fromdb bool // will load from filesystem fromdb bool // will load from filesystem
create bool // default will not create if not exist create bool // default will not create if not exist
} }
pub fn new(args ArgsGet) !&Workspace { pub fn new(args ArgsGet) !&Workspace {
mut obj := Workspace{ mut obj := Workspace{
name: args.name name: args.name
base_path: args.path
} }
set(obj)! set(obj)!
return get(name: args.name)! return get(name: args.name)!
@@ -120,13 +122,28 @@ pub fn play(mut plbook PlayBook) ! {
if !plbook.exists(filter: 'heroprompt.') { if !plbook.exists(filter: 'heroprompt.') {
return return
} }
mut install_actions := plbook.find(filter: 'heroprompt.configure')! // 1) Configure workspaces
if install_actions.len > 0 { mut cfg_actions := plbook.find(filter: 'heroprompt.configure')!
for install_action in install_actions { for cfg_action in cfg_actions {
heroscript := install_action.heroscript() heroscript := cfg_action.heroscript()
mut obj2 := heroscript_loads(heroscript)! mut obj := heroscript_loads(heroscript)!
set(obj2)! set(obj)!
} }
// 2) Add directories
for action in plbook.find(filter: 'heroprompt.add_dir')! {
mut p := action.params
wsname := p.get_default('name', heroprompt_default)!
mut wsp := get(name: wsname)!
path := p.get('path') or { return error("heroprompt.add_dir requires 'path'") }
wsp.add_dir(path: path)!
}
// 3) Add files
for action in plbook.find(filter: 'heroprompt.add_file')! {
mut p := action.params
wsname := p.get_default('name', heroprompt_default)!
mut wsp := get(name: wsname)!
path := p.get('path') or { return error("heroprompt.add_file requires 'path'") }
wsp.add_file(path: path)!
} }
} }

View File

@@ -1,7 +1,7 @@
module heroprompt module heroprompt
import freeflowuniverse.herolib.data.encoderhero
import time import time
import freeflowuniverse.herolib.core.playbook
pub const version = '0.0.0' pub const version = '0.0.0'
const singleton = false const singleton = false
@@ -28,8 +28,23 @@ fn obj_init(mycfg_ Workspace) !Workspace {
/////////////NORMALLY NO NEED TO TOUCH /////////////NORMALLY NO NEED TO TOUCH
pub fn heroscript_loads(heroscript string) !Workspace { pub fn heroscript_loads(heroscript string) !Workspace {
// TODO: go from heroscript to object mut pb := playbook.new(text: heroscript)!
//load playbook, and manually get the params out of the actions & fill in the object // Accept either define or configure; prefer define if present
$dbg; mut action_name := 'heroprompt.define'
return obj if !pb.exists_once(filter: action_name) {
action_name = 'heroprompt.configure'
if !pb.exists_once(filter: action_name) {
return error("heroprompt: missing 'heroprompt.define' or 'heroprompt.configure' action")
}
}
mut action := pb.get(filter: action_name)!
mut p := action.params
return Workspace{
name: p.get_default('name', 'default')!
base_path: p.get_default('base_path', '')!
created: time.now()
updated: time.now()
children: []HeropromptChild{}
}
} }

View File

@@ -6,175 +6,6 @@ import os
import freeflowuniverse.herolib.core.pathlib import freeflowuniverse.herolib.core.pathlib
import freeflowuniverse.herolib.develop.codewalker import freeflowuniverse.herolib.develop.codewalker
fn (wsp &Workspace) save() !&Workspace {
mut tmp := wsp
tmp.updated = time.now()
tmp.is_saved = true
set(tmp)!
return get(name: wsp.name)!
}
// // WorkspaceItem represents a file or directory in the workspace tree
// pub struct WorkspaceItem {
// pub mut:
// name string // Item name (file or directory name)
// path string // Full path to the item
// is_directory bool // True if this is a directory
// is_file bool // True if this is a file
// size i64 // File size in bytes (0 for directories)
// extension string // File extension (empty for directories)
// children []WorkspaceItem // Child items (for directories)
// is_expanded bool // Whether directory is expanded in UI
// is_selected bool // Whether this item is selected for prompts
// depth int // Depth level in the tree (0 = root)
// }
// // WorkspaceList represents the complete hierarchical listing of a workspace
// pub struct WorkspaceList {
// pub mut:
// root_path string // Root path of the workspace
// items []WorkspaceItem // Top-level items in the workspace
// total_files int // Total number of files
// total_dirs int // Total number of directories
// }
// // list returns the complete hierarchical structure of the workspace
// pub fn (wsp Workspace) list() WorkspaceList {
// mut result := WorkspaceList{
// root_path: wsp.base_path
// }
// if wsp.base_path.len == 0 || !os.exists(wsp.base_path) {
// return result
// }
// // Build the complete tree structure (ALL files and directories)
// result.items = wsp.build_workspace_tree(wsp.base_path, 0)
// wsp.calculate_totals(result.items, mut result)
// // Mark selected items
// wsp.mark_selected_items(mut result.items)
// return result
// }
// // build_workspace_tree recursively builds the workspace tree structure
// fn (wsp Workspace) build_workspace_tree(path string, depth int) []WorkspaceItem {
// mut items := []WorkspaceItem{}
// entries := os.ls(path) or { return items }
// for entry in entries {
// full_path := os.join_path(path, entry)
// if os.is_dir(full_path) {
// mut dir_item := WorkspaceItem{
// name: entry
// path: full_path
// is_directory: true
// is_file: false
// size: 0
// extension: ''
// is_expanded: false
// is_selected: false
// depth: depth
// }
// // Recursively get children
// dir_item.children = wsp.build_workspace_tree(full_path, depth + 1)
// items << dir_item
// } else if os.is_file(full_path) {
// file_info := os.stat(full_path) or { continue }
// extension := get_file_extension(entry)
// file_item := WorkspaceItem{
// name: entry
// path: full_path
// is_directory: false
// is_file: true
// size: file_info.size
// extension: extension
// children: []
// is_expanded: false
// is_selected: false
// depth: depth
// }
// items << file_item
// }
// }
// // Sort: directories first, then files, both alphabetically
// items.sort_with_compare(fn (a &WorkspaceItem, b &WorkspaceItem) int {
// if a.is_directory && !b.is_directory {
// return -1
// }
// if !a.is_directory && b.is_directory {
// return 1
// }
// if a.name < b.name {
// return -1
// }
// if a.name > b.name {
// return 1
// }
// return 0
// })
// return items
// }
// // calculate_totals counts total files and directories in the workspace
// fn (wsp Workspace) calculate_totals(items []WorkspaceItem, mut result WorkspaceList) {
// for item in items {
// if item.is_directory {
// result.total_dirs++
// wsp.calculate_totals(item.children, mut result)
// } else {
// result.total_files++
// }
// }
// }
// // mark_selected_items marks which items are currently selected for prompts
// fn (wsp Workspace) mark_selected_items(mut items []WorkspaceItem) {
// for mut item in items {
// // Check if this item is selected by comparing paths
// item.is_selected = wsp.is_item_selected(item.path)
// // Recursively mark children
// if item.is_directory && item.children.len > 0 {
// wsp.mark_selected_items(mut item.children)
// }
// }
// }
// // is_item_selected checks if a specific path is selected in the workspace
// fn (wsp Workspace) is_item_selected(path string) bool {
// dirs := wsp.children.filter(fn (item &HeropromptChild) bool {
// return item.path.cat == .dir
// })
// for dir in dirs {
// if dir.path.path == path {
// return true
// }
// files := dir.children.filter(fn (item &HeropromptChild) bool {
// return item.path.cat == .file
// })
// for file in files {
// if file.path.path == path {
// return true
// }
// }
// child_dirs := dir.children.filter(fn (item &HeropromptChild) bool {
// return item.path.cat == .dir
// })
// if wsp.is_path_in_selected_dirs(path, child_dirs) {
// return true
// }
// }
// return false
// }
// Selection API // Selection API
@[params] @[params]
pub struct AddDirParams { pub struct AddDirParams {
@@ -329,6 +160,44 @@ pub fn (wsp &Workspace) delete_workspace() ! {
delete(name: wsp.name)! delete(name: wsp.name)!
} }
// Update this workspace (name and/or base_path)
@[params]
pub struct UpdateParams {
pub mut:
name string
base_path string
}
pub fn (wsp &Workspace) update_workspace(args UpdateParams) !&Workspace {
mut updated := Workspace{
name: if args.name.len > 0 { args.name } else { wsp.name }
base_path: if args.base_path.len > 0 { args.base_path } else { wsp.base_path }
children: wsp.children
created: wsp.created
updated: time.now()
is_saved: true
}
// if name changed, delete old key first
if updated.name != wsp.name {
delete(name: wsp.name)!
}
set(updated)!
return get(name: updated.name)!
}
// @[params]
// pub struct UpdateParams {
// pub mut:
// name string
// base_path string
// // Update only the name and the base path for now
// }
// // Delete this workspace from the store
// pub fn (wsp &Workspace) update_workspace(args_ UpdateParams) ! {
// delete(name: wsp.name)!
// }
// List workspaces (wrapper over factory list) // List workspaces (wrapper over factory list)
pub fn list_workspaces() ![]&Workspace { pub fn list_workspaces() ![]&Workspace {
return list(fromdb: false)! return list(fromdb: false)!
@@ -338,6 +207,48 @@ pub fn list_workspaces_fromdb() ![]&Workspace {
return list(fromdb: true)! return list(fromdb: true)!
} }
// List entries in a directory relative to this workspace base or absolute
@[params]
pub struct ListArgs {
pub mut:
path string // if empty, will use workspace.base_path
}
pub struct ListItem {
pub:
name string
typ string @[json: 'type']
}
pub fn (wsp &Workspace) list() ![]ListItem {
mut dir := wsp.base_path
if dir.len == 0 {
return error('workspace base_path not set')
}
if !os.is_abs_path(dir) {
dir = os.join_path(wsp.base_path, dir)
}
entries := os.ls(dir) or { return error('cannot list directory') }
mut out := []ListItem{}
for e in entries {
full := os.join_path(dir, e)
if os.is_dir(full) {
out << ListItem{
name: e
typ: 'directory'
}
} else if os.is_file(full) {
out << ListItem{
name: e
typ: 'file'
}
}
}
return out
}
// Get the currently selected children (copy) // Get the currently selected children (copy)
pub fn (wsp Workspace) selected_children() []HeropromptChild { pub fn (wsp Workspace) selected_children() []HeropromptChild {
return wsp.children.clone() return wsp.children.clone()
@@ -558,316 +469,16 @@ pub fn (wsp Workspace) prompt(args WorkspacePrompt) string {
return reprompt return reprompt
} }
// // is_path_in_selected_dirs recursively checks subdirectories for selected items // Save the workspace
// fn (wsp Workspace) is_path_in_selected_dirs(path string, dirs []&HeropromptChild) bool { fn (wsp &Workspace) save() !&Workspace {
// for dir in dirs { mut tmp := wsp
// if dir.path.cat != .dir { tmp.updated = time.now()
// continue tmp.is_saved = true
// } set(tmp)!
// if dir.path.path == path { return get(name: wsp.name)!
// return true }
// }
// files := dir.children.filter(fn (item &HeropromptChild) bool {
// return item.path.cat == .file
// })
// for file in files {
// if file.path.path == path {
// return true
// }
// }
// child_dirs := dir.children.filter(fn (item &HeropromptChild) bool {
// return item.path.cat == .dir
// })
// if wsp.is_path_in_selected_dirs(path, child_dirs) {
// return true
// }
// }
// return false
// }
// @[params] // Generate a random name for the workspace
// pub struct AddDirParams {
// pub mut:
// path string @[required]
// select_all bool
// }
// pub fn (mut wsp Workspace) add_dir(args_ AddDirParams) !&HeropromptChild {
// if args_.path.len == 0 {
// return error('The dir path is required')
// }
// if !os.exists(args_.path) {
// return error('The provided path does not exists')
// }
// abs_path := os.real_path(args_.path)
// parts := abs_path.split(os.path_separator)
// dir_name := parts[parts.len - 1]
// mut added := &HeropromptChild{
// path: pathlib.Path{
// path: abs_path
// cat: .dir
// exist: .yes
// }
// name: dir_name
// }
// if args_.select_all {
// added.select_all_files_and_dirs(abs_path)
// }
// wsp.children << added
// return added
// }
// // Metadata structures for selected files and directories
// struct SelectedFilesMetadata {
// content_length int // File content length in characters
// extension string // File extension
// name string // File name
// path string // Full file path
// }
// struct SelectedDirsMetadata {
// name string // Directory name
// selected_files []SelectedFilesMetadata // Files in this directory
// }
// struct WorkspaceGetSelected {
// pub mut:
// dirs []SelectedDirsMetadata // All directories with their selected files
// }
// pub fn (wsp Workspace) get_selected() WorkspaceGetSelected {
// mut result := WorkspaceGetSelected{}
// for dir in wsp.children.filter(fn (c &HeropromptChild) bool {
// return c.path.cat == .dir
// }) {
// mut files := []SelectedFilesMetadata{}
// for file in dir.children.filter(fn (c &HeropromptChild) bool {
// return c.path.cat == .file
// }) {
// files << SelectedFilesMetadata{
// content_length: file.content.len
// extension: get_file_extension(file.name)
// name: file.name
// path: file.path.path
// }
// }
// result.dirs << SelectedDirsMetadata{
// name: dir.name
// selected_files: files
// }
// }
// return result
// }
// pub struct WorkspacePrompt {
// pub mut:
// text string
// }
// pub fn (wsp Workspace) prompt(args WorkspacePrompt) string {
// prompt := wsp.build_prompt(args.text)
// return prompt
// }
// // Placeholder function for future needs, in case we need to highlight the user_instructions block with some addtional messages
// fn (wsp Workspace) build_user_instructions(text string) string {
// return text
// }
// // build_file_tree creates a tree-like representation of directories and files
// fn build_file_tree(dirs []&HeropromptChild, prefix string) string {
// mut out := ''
// for i, dir in dirs {
// if dir.path.cat != .dir {
// continue
// }
// // Determine the correct tree connector
// connector := if i == dirs.len - 1 { ' ' } else { ' ' }
// // Directory name
// out += '${prefix}${connector}${dir.name}\n'
// // Calculate new prefix for children
// child_prefix := if i == dirs.len - 1 { prefix + ' ' } else { prefix + ' ' }
// // Total children (files + subdirs)
// files := dir.children.filter(fn (c &HeropromptChild) bool {
// return c.path.cat == .file
// })
// subdirs := dir.children.filter(fn (c &HeropromptChild) bool {
// return c.path.cat == .dir
// })
// total_children := files.len + subdirs.len
// // Files in this directory
// for j, file in files {
// file_connector := if j == total_children - 1 { ' ' } else { ' ' }
// out += '${child_prefix}${file_connector}${file.name} *\n'
// }
// // Recurse into subdirectories
// for j, sub_dir in subdirs {
// sub_connector := if files.len + j == total_children - 1 {
// ' '
// } else {
// ' '
// }
// out += '${child_prefix}${sub_connector}${sub_dir.name}\n'
// sub_prefix := if files.len + j == total_children - 1 {
// child_prefix + ' '
// } else {
// child_prefix + ' '
// }
// // Build content for this subdirectory directly without calling build_file_map again
// sub_files := sub_dir.children.filter(fn (c &HeropromptChild) bool {
// return c.path.cat == .file
// })
// sub_subdirs := sub_dir.children.filter(fn (c &HeropromptChild) bool {
// return c.path.cat == .dir
// })
// sub_total_children := sub_files.len + sub_subdirs.len
// for k, sub_file in sub_files {
// sub_file_connector := if k == sub_total_children - 1 {
// ' '
// } else {
// ' '
// }
// out += '${sub_prefix}${sub_file_connector}${sub_file.name} *\n'
// }
// if sub_subdirs.len > 0 {
// out += build_file_tree(sub_subdirs, sub_prefix)
// }
// }
// }
// return out
// }
// // build_file_content generates formatted content for all selected files
// fn (wsp Workspace) build_file_content() string {
// mut content := ''
// for dir in wsp.children.filter(fn (c &HeropromptChild) bool {
// return c.path.cat == .dir
// }) {
// for file in dir.children.filter(fn (c &HeropromptChild) bool {
// return c.path.cat == .file
// }) {
// if content.len > 0 {
// content += '\n\n'
// }
// content += '${file.path.path}\n'
// extension := get_file_extension(file.name)
// if file.content.len == 0 {
// content += '(Empty file)\n'
// } else {
// content += '```${extension}\n'
// content += file.content
// content += '\n```'
// }
// }
// content += wsp.build_dir_file_content(dir.children)
// }
// return content
// }
// // build_dir_file_content recursively processes subdirectories
// fn (wsp Workspace) build_dir_file_content(dirs []&HeropromptChild) string {
// mut content := ''
// for dir in dirs {
// if dir.path.cat != .dir {
// continue
// }
// for file in dir.children.filter(fn (c &HeropromptChild) bool {
// return c.path.cat == .file
// }) {
// if content.len > 0 {
// content += '\n\n'
// }
// content += '${file.path.path}\n'
// extension := get_file_extension(file.name)
// if file.content.len == 0 {
// content += '(Empty file)\n'
// } else {
// content += '```${extension}\n'
// content += file.content
// content += '\n```'
// }
// }
// let_subdirs := dir.children.filter(fn (c &HeropromptChild) bool {
// return c.path.cat == .dir
// })
// if let_subdirs.len > 0 {
// content += wsp.build_dir_file_content(let_subdirs)
// }
// }
// return content
// }
// pub struct HeropromptTmpPrompt {
// pub mut:
// user_instructions string
// file_map string
// file_contents string
// }
// // build_prompt generates the final prompt with metadata and file tree
// fn (wsp Workspace) build_prompt(text string) string {
// user_instructions := wsp.build_user_instructions(text)
// file_map := wsp.build_file_map()
// file_contents := wsp.build_file_content()
// prompt := HeropromptTmpPrompt{
// user_instructions: user_instructions
// file_map: file_map
// file_contents: file_contents
// }
// reprompt := $tmpl('./templates/prompt.template')
// return reprompt
// }
// // build_file_map creates a complete file map with base path and metadata
// fn (wsp Workspace) build_file_map() string {
// mut file_map := ''
// // Consider only top-level directories as roots
// mut roots := wsp.children.filter(fn (c &HeropromptChild) bool {
// return c.path.cat == .dir
// })
// if roots.len > 0 {
// base_path := roots[0].path.path
// parent_path := if base_path.contains('/') {
// base_path.split('/')[..base_path.split('/').len - 1].join('/')
// } else {
// base_path
// }
// selected_metadata := wsp.get_selected()
// mut total_files := 0
// mut total_content_length := 0
// mut file_extensions := map[string]int{}
// for dir_meta in selected_metadata.dirs {
// total_files += dir_meta.selected_files.len
// for file_meta in dir_meta.selected_files {
// total_content_length += file_meta.content_length
// if file_meta.extension.len > 0 {
// file_extensions[file_meta.extension] = file_extensions[file_meta.extension] + 1
// }
// }
// }
// mut extensions_summary := ''
// for ext, count in file_extensions {
// if extensions_summary.len > 0 {
// extensions_summary += ', '
// }
// extensions_summary += '${ext}(${count})'
// }
// file_map = '${parent_path}\n'
// file_map += '# Selected Files: ${total_files} | Total Content: ${total_content_length} chars'
// if extensions_summary.len > 0 {
// file_map += ' | Extensions: ${extensions_summary}'
// }
// file_map += '\n\n'
// file_map += build_file_tree(roots, '')
// }
// return file_map
// }
/// Generate a random name for the workspace
fn generate_random_workspace_name() string { fn generate_random_workspace_name() string {
adjectives := [ adjectives := [
'brave', 'brave',

View File

@@ -0,0 +1,315 @@
module heroprompt
import veb
import os
import json
import time
import freeflowuniverse.herolib.develop.heroprompt as hp
// Types for directory listing
struct DirItem {
name string
typ string @[json: 'type']
}
struct DirResp {
path string
mut:
items []DirItem
}
// HTML routes
@['/heroprompt'; get]
pub fn (app &App) page_index(mut ctx Context) veb.Result {
return ctx.html(render_index(app))
}
// API routes (thin wrappers over develop.heroprompt)
@['/api/heroprompt/workspaces'; get]
pub fn (app &App) api_list(mut ctx Context) veb.Result {
mut names := []string{}
ws := hp.list(fromdb: true) or { []&hp.Workspace{} }
for w in ws {
names << w.name
}
ctx.set_content_type('application/json')
return ctx.text(json.encode(names))
}
@['/api/heroprompt/workspaces'; post]
pub fn (app &App) api_create(mut ctx Context) veb.Result {
name := ctx.form['name'] or { 'default' }
base_path_in := ctx.form['base_path'] or { '' }
if base_path_in.len == 0 {
return ctx.text('{"error":"base_path required"}')
}
mut base_path := base_path_in
// Expand tilde to user home
if base_path.starts_with('~') {
home := os.home_dir()
base_path = os.join_path(home, base_path.all_after('~'))
}
_ := hp.get(name: name, create: true, path: base_path) or {
return ctx.text('{"error":"create failed"}')
}
ctx.set_content_type('application/json')
return ctx.text(json.encode({
'name': name
'base_path': base_path
}))
}
@['/api/heroprompt/directory'; get]
pub fn (app &App) api_directory(mut ctx Context) veb.Result {
wsname := ctx.query['name'] or { 'default' }
path_q := ctx.query['path'] or { '' }
mut wsp := hp.get(name: wsname, create: false) or {
return ctx.text('{"error":"workspace not found"}')
}
// Use workspace list method; empty path means base_path
items_w := if path_q.len > 0 { wsp.list() or {
return ctx.text('{"error":"cannot list directory"}')} } else { wsp.list() or {
return ctx.text('{"error":"cannot list directory"}')} }
ctx.set_content_type('application/json')
mut resp := DirResp{
path: if path_q.len > 0 { path_q } else { wsp.base_path }
}
for it in items_w {
resp.items << DirItem{
name: it.name
typ: it.typ
}
}
return ctx.text(json.encode(resp))
}
// -------- File content endpoint --------
struct FileResp {
language string
content string
}
@['/api/heroprompt/file'; get]
pub fn (app &App) api_file(mut ctx Context) veb.Result {
wsname := ctx.query['name'] or { 'default' }
path_q := ctx.query['path'] or { '' }
if path_q.len == 0 {
return ctx.text('{"error":"path required"}')
}
mut base := ''
if wsp := hp.get(name: wsname, create: false) {
base = wsp.base_path
}
mut file_path := if !os.is_abs_path(path_q) && base.len > 0 {
os.join_path(base, path_q)
} else {
path_q
}
if !os.is_file(file_path) {
return ctx.text('{"error":"not a file"}')
}
// limit read to 1MB to avoid huge responses
max_size := i64(1_000_000)
sz := os.file_size(file_path)
if sz > max_size {
return ctx.text('{"error":"file too large"}')
}
content := os.read_file(file_path) or { return ctx.text('{"error":"failed to read"}') }
lang := detect_lang(file_path)
ctx.set_content_type('application/json')
return ctx.text(json.encode(FileResp{ language: lang, content: content }))
}
fn detect_lang(path string) string {
ext := os.file_ext(path).trim_left('.')
return match ext.to_lower() {
'v' { 'v' }
'js' { 'javascript' }
'ts' { 'typescript' }
'py' { 'python' }
'rs' { 'rust' }
'go' { 'go' }
'java' { 'java' }
'c', 'h' { 'c' }
'cpp', 'hpp', 'cc', 'hh' { 'cpp' }
'sh', 'bash' { 'bash' }
'json' { 'json' }
'yaml', 'yml' { 'yaml' }
'html', 'htm' { 'html' }
'css' { 'css' }
'md' { 'markdown' }
else { 'text' }
}
}
// -------- Filename search endpoint --------
struct SearchItem {
path string
typ string @[json: 'type']
}
@['/api/heroprompt/search'; get]
pub fn (app &App) api_search(mut ctx Context) veb.Result {
wsname := ctx.query['name'] or { 'default' }
q := ctx.query['q'] or { '' }
if q.len == 0 {
return ctx.text('{"error":"q required"}')
}
mut base := ''
if wsp := hp.get(name: wsname, create: false) {
base = wsp.base_path
}
if base.len == 0 {
return ctx.text('{"error":"workspace base_path not set"}')
}
max := (ctx.query['max'] or { '200' }).int()
mut results := []SearchItem{}
walk_search(base, q, max, mut results)
ctx.set_content_type('application/json')
return ctx.text(json.encode(results))
}
// Workspace details
@['/api/heroprompt/workspaces/:name'; get]
pub fn (app &App) api_workspace_get(mut ctx Context, name string) veb.Result {
wsp := hp.get(name: name, create: false) or {
return ctx.text('{"error":"workspace not found"}')
}
ctx.set_content_type('application/json')
return ctx.text(json.encode({
'name': wsp.name
'base_path': wsp.base_path
}))
}
@['/api/heroprompt/workspaces/:name'; delete]
pub fn (app &App) api_workspace_delete(mut ctx Context, name string) veb.Result {
wsp := hp.get(name: name, create: false) or {
return ctx.text('{"error":"workspace not found"}')
}
wsp.delete_workspace() or { return ctx.text('{"error":"delete failed"}') }
return ctx.text('{"ok":true}')
}
@['/api/heroprompt/workspaces/:name'; patch]
pub fn (app &App) api_workspace_patch(mut ctx Context, name string) veb.Result {
wsp := hp.get(name: name, create: false) or {
return ctx.text('{"error":"workspace not found"}')
}
new_name := ctx.form['name'] or { '' }
mut base_path := ctx.form['base_path'] or { '' }
if base_path.len > 0 && base_path.starts_with('~') {
home := os.home_dir()
base_path = os.join_path(home, base_path.all_after('~'))
}
updated := wsp.update_workspace(name: new_name, base_path: base_path) or {
return ctx.text('{"error":"update failed"}')
}
ctx.set_content_type('application/json')
return ctx.text(json.encode({
'name': updated.name
'base_path': updated.base_path
}))
}
// -------- Path validation endpoint --------
struct PathValidationResp {
is_abs bool
exists bool
is_dir bool
expanded string
}
@['/api/heroprompt/validate_path'; get]
pub fn (app &App) api_validate_path(mut ctx Context) veb.Result {
p_in := ctx.query['path'] or { '' }
mut p := p_in
if p.starts_with('~') {
home := os.home_dir()
p = os.join_path(home, p.all_after('~'))
}
is_abs := if p != '' { os.is_abs_path(p) } else { false }
exists := if p != '' { os.exists(p) } else { false }
isdir := if exists { os.is_dir(p) } else { false }
ctx.set_content_type('application/json')
resp := PathValidationResp{
is_abs: is_abs
exists: exists
is_dir: isdir
expanded: p
}
return ctx.text(json.encode(resp))
}
fn walk_search(root string, q string, max int, mut out []SearchItem) {
if out.len >= max {
return
}
entries := os.ls(root) or { return }
for e in entries {
if e in ['.git', 'node_modules', 'build', 'dist', '.v'] {
continue
}
p := os.join_path(root, e)
if os.is_dir(p) {
if out.len >= max {
return
}
if e.to_lower().contains(q.to_lower()) {
out << SearchItem{
path: p
typ: 'directory'
}
}
walk_search(p, q, max, mut out)
} else if os.is_file(p) {
if e.to_lower().contains(q.to_lower()) {
out << SearchItem{
path: p
typ: 'file'
}
}
}
if out.len >= max {
return
}
}
}
// -------- Selection and prompt endpoints --------
@['/api/heroprompt/workspaces/:name/files'; post]
pub fn (app &App) api_add_file(mut ctx Context, name string) veb.Result {
path := ctx.form['path'] or { '' }
if path.len == 0 {
return ctx.text('{"error":"path required"}')
}
mut wsp := hp.get(name: name, create: false) or {
return ctx.text('{"error":"workspace not found"}')
}
wsp.add_file(path: path) or { return ctx.text('{"error":"' + err.msg() + '"}') }
return ctx.text('{"ok":true}')
}
@['/api/heroprompt/workspaces/:name/dirs'; post]
pub fn (app &App) api_add_dir(mut ctx Context, name string) veb.Result {
path := ctx.form['path'] or { '' }
if path.len == 0 {
return ctx.text('{"error":"path required"}')
}
mut wsp := hp.get(name: name, create: false) or {
return ctx.text('{"error":"workspace not found"}')
}
wsp.add_dir(path: path) or { return ctx.text('{"error":"' + err.msg() + '"}') }
return ctx.text('{"ok":true}')
}
@['/api/heroprompt/workspaces/:name/prompt'; post]
pub fn (app &App) api_generate_prompt(mut ctx Context, name string) veb.Result {
text := ctx.form['text'] or { '' }
mut wsp := hp.get(name: name, create: false) or {
return ctx.text('{"error":"workspace not found"}')
}
prompt := wsp.prompt(text: text)
ctx.set_content_type('text/plain')
return ctx.text(prompt)
}

View File

@@ -0,0 +1,71 @@
module heroprompt
import veb
import os
// Public Context type for veb
pub struct Context {
veb.Context
}
// Factory args for starting the server
@[params]
pub struct FactoryArgs {
pub mut:
host string = 'localhost'
port int = 8090
title string = 'Heroprompt'
}
// App holds server state and config
pub struct App {
veb.StaticHandler
pub mut:
title string
port int
base_path string // absolute path to this module directory
}
// Create a new App instance (does not start the server)
pub fn new(args FactoryArgs) !&App {
base := os.dir(@FILE)
mut app := App{
title: args.title
port: args.port
base_path: base
}
// Serve static assets from this module at /static
app.mount_static_folder_at(os.join_path(base, 'static'), '/static')!
return &app
}
// Start the webserver (blocking)
pub fn start(args FactoryArgs) ! {
mut app := new(args)!
veb.run[App, Context](mut app, app.port)
}
// Routes
@['/'; get]
pub fn (app &App) index(mut ctx Context) veb.Result {
return ctx.html(render_index(app))
}
// Rendering helpers
fn render_index(app &App) string {
tpl := os.join_path(app.base_path, 'templates', 'index.html')
content := os.read_file(tpl) or { return render_index_fallback(app) }
return render_template(content, {
'title': app.title
})
}
fn render_index_fallback(app &App) string {
return '<!doctype html>\n<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>'
+ html_escape(app.title)
+ '</title><link rel="stylesheet" href="/static/css/main.css"></head><body><div class="container"><h1>'
+ html_escape(app.title)
+ '</h1><p>Heroprompt server is running.</p></div><script src="/static/js/main.js"></script></body></html>'
}

View File

@@ -0,0 +1,624 @@
:root {
--bg: #111827;
--text: #e5e7eb;
--panel: #0b1220;
--border: #1f2937;
--muted: #94a3b8;
--accent: #93c5fd;
--input: #0f172a;
--input-border: #334155;
--btn: #334155;
--btn-border: #475569;
}
:root.light {
--bg: #f9fafb;
--text: #0f172a;
--panel: #ffffff;
--border: #e5e7eb;
--muted: #475569;
--accent: #2563eb;
--input: #ffffff;
--input-border: #cbd5e1;
--btn: #e5e7eb;
--btn-border: #cbd5e1;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
margin: 0;
padding: 24px;
background: var(--bg);
color: var(--text);
}
h1 {
font-size: 20px;
margin: 0 0 12px
}
.container {
max-width: 1200px;
margin: 0 auto
}
a {
color: var(--accent)
}
.toolbar {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 12px
}
.toolbar .spacer {
flex: 1
}
.toolbar input {
background: var(--input);
border: 1px solid var(--input-border);
color: var(--text);
padding: 6px 8px;
border-radius: 6px
}
.toolbar button {
background: var(--btn);
border: 1px solid var(--btn-border);
color: var(--text);
padding: 6px 10px;
border-radius: 6px;
cursor: pointer
}
.layout {
display: grid;
grid-template-columns: minmax(300px, 380px) 1fr;
gap: 16px;
min-height: 70vh
}
.sidebar {
background: var(--panel);
border: 1px solid var(--border);
padding: 8px;
border-radius: 8px
}
.sidebar-header {
display: flex;
gap: 8px;
row-gap: 6px;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
flex-wrap: wrap
}
.sidebar-header .spacer {
display: none
}
.sidebar-header select {
min-width: 140px;
max-width: 100%
}
@media (min-width: 900px) {
.sidebar-header {
flex-wrap: nowrap
}
.sidebar-header .spacer {
display: block;
flex: 1
}
}
.ws-info {
font-size: 12px;
color: var(--muted);
margin-left: auto
}
.sidebar-header label {
font-size: 12px;
color: var(--muted)
}
.sidebar-header select {
background: var(--input);
border: 1px solid var(--input-border);
color: var(--text);
padding: 6px 8px;
border-radius: 6px
}
.sidebar-header button {
background: var(--btn);
border: 1px solid var(--btn-border);
color: var(--text);
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
white-space: nowrap;
flex: 0 0 auto
}
.sidebar-body {
.sidebar-header #wsCreateBtn {
width: 32px;
height: 32px;
padding: 0;
line-height: 30px;
text-align: center;
font-weight: bold
}
.hint {
color: var(--muted);
font-size: 12px
}
.prompt .actions {
margin-top: 8px
}
.prompt .actions button {
background: var(--btn);
border: 1px solid var(--btn-border);
color: var(--text);
padding: 6px 10px;
border-radius: 6px;
cursor: pointer
}
display: flex;
flex-direction: column;
gap: 8px
}
.searchbar {
display: flex;
gap: 8px
}
.searchbar input {
background: var(--input);
border: 1px solid var(--input-border);
color: var(--text);
padding: 6px 8px;
border-radius: 6px
}
.searchbar button {
background: var(--btn);
border: 1px solid var(--btn-border);
color: var(--text);
padding: 6px 10px;
border-radius: 6px;
cursor: pointer
}
.sidebar-header button {
background: var(--btn);
border: 1px solid var(--btn-border);
color: var(--text);
padding: 6px 10px;
border-radius: 6px;
cursor: pointer
}
.main {
display: flex;
flex-direction: column;
.prompt {
background: var(--panel);
border: 1px solid var(--border);
padding: 12px;
border-radius: 8px
}
.prompt textarea {
width: 100%;
min-height: 120px;
background: var(--input);
color: var(--text);
border: 1px solid var(--input-border);
border-radius: 6px;
padding: 8px;
resize: vertical
}
gap: 16px
}
/* Tabs */
.tabs {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 8px
}
.tab {
background: var(--btn);
border: 1px solid var(--btn-border);
color: var(--text);
padding: 6px 10px;
border-radius: 6px;
cursor: pointer
}
.tab.active {
background: transparent;
border-color: var(--accent);
color: var(--accent)
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
.subbar {
display: flex;
gap: 8px;
align-items: center;
margin: 8px 0
}
.subbar input {
background: var(--input);
border: 1px solid var(--input-border);
color: var(--text);
padding: 6px 8px;
border-radius: 6px
}
.subbar button {
background: var(--btn);
border: 1px solid var(--btn-border);
color: var(--text);
padding: 6px 10px;
border-radius: 6px;
cursor: pointer
}
.subbar input {
background: var(--input);
border: 1px solid var(--input-border);
color: var(--text);
padding: 6px 8px;
border-radius: 6px
}
.subbar button {
background: var(--btn);
border: 1px solid var(--btn-border);
color: var(--text);
padding: 6px 10px;
border-radius: 6px;
cursor: pointer
}
/* Chat */
.chat {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 8px;
display: flex;
flex-direction: column;
height: 60vh
}
.messages {
flex: 1;
padding: 12px;
overflow: auto;
display: flex;
flex-direction: column;
gap: 10px
}
.message {
display: flex;
gap: 8px;
}
.message .bubble {
max-width: 70%;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--border)
}
.message.user .bubble {
background: rgba(99, 102, 241, 0.15);
}
.message.ai .bubble {
background: rgba(16, 185, 129, 0.15);
}
.chat-input {
border-top: 1px solid var(--border);
padding: 10px;
display: flex;
gap: 8px
}
.chat-input textarea {
flex: 1;
background: var(--input);
border: 1px solid var(--input-border);
color: var(--text);
border-radius: 8px;
padding: 8px;
min-height: 60px
}
.chat-input button {
background: var(--btn);
border: 1px solid var(--btn-border);
color: var(--text);
border-radius: 8px;
padding: 8px 12px;
cursor: pointer
}
.preview {
background: var(--panel);
border: 1px solid var(--border);
padding: 8px;
border-radius: 6px;
min-height: 300px
}
.prompt,
.selection {
background: var(--panel);
border: 1px solid var(--border);
padding: 12px;
border-radius: 6px
}
.prompt textarea {
width: 100%;
min-height: 120px;
background: var(--input);
color: var(--text);
border: 1px solid var(--input-border);
border-radius: 6px;
padding: 8px;
resize: vertical;
}
.prompt .actions {
margin-top: 8px;
}
.prompt-output {
margin-top: 10px;
}
.prompt-output pre {
white-space: pre-wrap;
background: var(--panel);
border: 1px solid var(--border);
padding: 8px;
border-radius: 6px;
}
/* Collapsible tree styles */
#tree ul {
list-style: none;
margin: 0;
padding-left: 12px;
}
#tree li {
margin: 2px 0;
}
#tree .dir {
color: var(--text);
}
#tree .dir .dir-label .name {
color: var(--text);
}
#tree .file a {
color: var(--text);
text-decoration: none;
}
#tree .file a:hover {
text-decoration: underline;
}
/* Modal */
.modal[aria-hidden="true"] {
display: none
}
.modal {
position: fixed;
inset: 0;
z-index: 1000;
}
.modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5)
}
.modal .row {
display: flex;
gap: 12px
}
.modal .col {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px
}
.modal .list {
list-style: none;
margin: 0;
padding: 0;
max-height: 40vh;
overflow: auto
}
.modal .list li {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 6px 0;
border-bottom: 1px dashed var(--border)
}
.modal .list .use {
background: var(--btn);
border: 1px solid var(--btn-border);
color: var(--text);
border-radius: 6px;
padding: 4px 8px;
cursor: pointer
}
.modal-dialog {
position: relative;
margin: 8vh auto;
max-width: 520px;
background: var(--panel);
color: var(--text);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px;
z-index: 1
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px
}
.modal-header .icon {
background: transparent;
border: none;
color: var(--text);
cursor: pointer;
font-size: 18px
}
.modal-body {
display: flex;
flex-direction: column;
gap: 8px
}
.modal-body input {
background: var(--input);
color: var(--text);
border: 1px solid var(--input-border);
border-radius: 6px;
padding: 8px
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 12px
}
.modal-footer button {
background: var(--btn);
border: 1px solid var(--btn-border);
color: var(--text);
border-radius: 6px;
padding: 6px 10px;
cursor: pointer
}
.error {
color: #ef4444;
font-size: 12px;
min-height: 16px
}
#tree .toggle {
appearance: none;
-webkit-appearance: none;
width: 0;
height: 0;
position: absolute;
}
#tree .dir-label {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
user-select: none;
}
#tree .dir .chev {
display: inline-block;
transform: rotate(-90deg);
transition: transform 0.15s ease;
width: 10px;
height: 10px;
border-right: 2px solid #93c5fd;
border-bottom: 2px solid #93c5fd;
margin-left: 2px;
}
#tree .dir .toggle:checked+.dir-label .chev {
transform: rotate(0deg);
}
#tree .children {
display: none;
margin-left: 16px;
}
#tree .dir .toggle:checked~.children {
display: block;
}
#tree button {
margin-left: 6px;
background: var(--btn);
border: 1px solid var(--btn-border);
color: var(--text);
padding: 2px 6px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
#selected li {
display: flex;
justify-content: space-between;
gap: 8px
}

View File

@@ -0,0 +1,375 @@
console.log('Heroprompt UI loaded');
let currentWs = localStorage.getItem('heroprompt-current-ws') || 'default';
let selected = [];
const el = (id) => document.getElementById(id);
async function api(url) {
try { const r = await fetch(url); return await r.json(); }
catch { return { error: 'request failed' }; }
}
async function post(url, data) {
const form = new FormData();
Object.entries(data).forEach(([k, v]) => form.append(k, v));
try { const r = await fetch(url, { method: 'POST', body: form }); return await r.json(); }
catch { return { error: 'request failed' }; }
}
// Checkbox-based collapsible tree
let nodeId = 0;
function renderTree(displayName, fullPath) {
const c = document.createElement('div');
c.className = 'tree';
const ul = document.createElement('ul');
ul.className = 'tree-root';
const root = buildDirNode(displayName, fullPath, true);
ul.appendChild(root);
c.appendChild(ul);
return c;
}
function buildDirNode(name, fullPath, expanded = false) {
const li = document.createElement('li');
li.className = 'dir';
const id = `tn_${nodeId++}`;
const toggle = document.createElement('input');
toggle.type = 'checkbox';
toggle.className = 'toggle';
toggle.id = id;
if (expanded) toggle.checked = true;
const label = document.createElement('label');
label.htmlFor = id;
label.className = 'dir-label';
const icon = document.createElement('span');
icon.className = 'chev';
const text = document.createElement('span');
text.className = 'name';
text.textContent = name;
label.appendChild(icon);
label.appendChild(text);
const children = document.createElement('ul');
children.className = 'children';
toggle.addEventListener('change', async () => {
if (toggle.checked) {
if (!li.dataset.loaded) {
await loadChildren(fullPath, children);
li.dataset.loaded = '1';
}
}
});
// Load immediately if expanded by default
if (expanded) {
setTimeout(async () => {
await loadChildren(fullPath, children);
li.dataset.loaded = '1';
}, 0);
}
li.appendChild(toggle);
li.appendChild(label);
li.appendChild(children);
return li;
}
function createFileNode(name, fullPath) {
const li = document.createElement('li');
li.className = 'file';
const a = document.createElement('a');
a.href = '#';
a.textContent = name;
a.onclick = (e) => {
e.preventDefault();
// preview removed
};
const add = document.createElement('button');
add.textContent = '+';
add.title = 'Add to selection';
add.onclick = () => addToSelection(fullPath);
li.appendChild(a);
li.appendChild(add);
return li;
}
async function loadChildren(parentPath, ul) {
const r = await api(`/api/heroprompt/directory?name=${currentWs}&path=${encodeURIComponent(parentPath)}`);
if (r.error) { ul.innerHTML = `<li class="err">${r.error}</li>`; return; }
ul.innerHTML = '';
for (const it of r.items) {
const full = parentPath.endsWith('/') ? parentPath + it.name : parentPath + '/' + it.name;
if (it.type === 'directory') {
ul.appendChild(buildDirNode(it.name, full, false));
} else {
ul.appendChild(createFileNode(it.name, full));
}
}
}
async function loadDir(p) {
el('tree').innerHTML = '';
const display = p.split('/').filter(Boolean).slice(-1)[0] || p;
el('tree').appendChild(renderTree(display, p));
updateSelectionList();
}
function updateSelectionList() {
el('selCount').textContent = String(selected.length);
const ul = el('selected');
ul.innerHTML = '';
for (const p of selected) {
const li = document.createElement('li');
li.textContent = p;
const btn = document.createElement('button');
btn.textContent = 'remove';
btn.onclick = () => { selected = selected.filter(x => x !== p); updateSelectionList(); };
li.appendChild(btn);
ul.appendChild(li);
}
// naive token estimator ~ 4 chars/token
const tokens = Math.ceil(selected.join('\n').length / 4);
el('tokenCount').textContent = String(Math.ceil(tokens));
}
function addToSelection(p) {
if (!selected.includes(p)) { selected.push(p); updateSelectionList(); }
}
// Theme persistence and toggle
(function initTheme() {
const saved = localStorage.getItem('hero-theme');
const root = document.documentElement;
if (saved === 'light') root.classList.add('light');
})();
el('toggleTheme').onclick = () => {
const root = document.documentElement;
const isLight = root.classList.toggle('light');
localStorage.setItem('hero-theme', isLight ? 'light' : 'dark');
};
// Workspaces list + selector
async function reloadWorkspaces() {
const sel = document.getElementById('workspaceSelect');
if (!sel) return;
sel.innerHTML = '';
const names = await api('/api/heroprompt/workspaces').catch(() => []);
for (const n of names || []) {
const opt = document.createElement('option');
opt.value = n; opt.textContent = n;
sel.appendChild(opt);
}
// ensure current ws name exists or select first
function updateWsInfo(info) { const box = document.getElementById('wsInfo'); if (!box) return; if (!info || info.error) { box.textContent = ''; return; } box.textContent = `${info.name}${info.base_path}`; }
if ([...sel.options].some(o => o.value === currentWs)) sel.value = currentWs;
else if (sel.options.length > 0) sel.value = sel.options[0].value;
}
// On initial load: pick current or first workspace and load its base
(async function initWorkspace() {
const sel = document.getElementById('workspaceSelect');
const names = await api('/api/heroprompt/workspaces').catch(() => []);
if (!names || names.length === 0) return;
if (!currentWs || !names.includes(currentWs)) { currentWs = names[0]; localStorage.setItem('heroprompt-current-ws', currentWs); }
if (sel) sel.value = currentWs;
const info = await api(`/api/heroprompt/workspaces/${currentWs}`);
const base = info?.base_path || '';
if (base) await loadDir(base);
})();
// Create workspace modal wiring
const wcShow = () => { el('wcName').value = ''; el('wcPath').value = ''; el('wcError').textContent = ''; showModal('wsCreate'); };
el('wsCreateBtn')?.addEventListener('click', wcShow);
el('wcClose')?.addEventListener('click', () => hideModal('wsCreate'));
el('wcCancel')?.addEventListener('click', () => hideModal('wsCreate'));
el('wcCreate')?.addEventListener('click', async () => {
const name = el('wcName').value.trim();
const path = el('wcPath').value.trim();
if (!path) { el('wcError').textContent = 'Path is required.'; return; }
const formData = { base_path: path };
if (name) formData.name = name;
const resp = await post('/api/heroprompt/workspaces', formData);
if (resp.error) { el('wcError').textContent = resp.error; return; }
currentWs = resp.name || currentWs;
localStorage.setItem('heroprompt-current-ws', currentWs);
await reloadWorkspaces();
const info = await api(`/api/heroprompt/workspaces/${currentWs}`);
const base = info?.base_path || '';
if (base) await loadDir(base);
hideModal('wsCreate');
});
// Workspace details modal
el('wsDetailsBtn')?.addEventListener('click', async () => {
const info = await api(`/api/heroprompt/workspaces/${currentWs}`);
if (info && !info.error) { el('wdName').value = info.name || currentWs; el('wdPath').value = info.base_path || ''; el('wdError').textContent = ''; showModal('wsDetails'); }
});
el('wdClose')?.addEventListener('click', () => hideModal('wsDetails'));
el('wdCancel')?.addEventListener('click', () => hideModal('wsDetails'));
el('wdSave')?.addEventListener('click', async () => {
const newName = el('wdName').value.trim();
const newPath = el('wdPath').value.trim();
// update via create semantics if name changed, or add an update endpoint later
const form = new FormData(); if (newName) form.append('name', newName); if (newPath) form.append('base_path', newPath);
const resp = await fetch('/api/heroprompt/workspaces', { method: 'POST', body: form });
const j = await resp.json().catch(() => ({ error: 'request failed' }));
if (j.error) { el('wdError').textContent = j.error; return; }
currentWs = j.name || newName || currentWs; localStorage.setItem('heroprompt-current-ws', currentWs);
await reloadWorkspaces();
const info = await api(`/api/heroprompt/workspaces/${currentWs}`);
const base = info?.base_path || '';
if (base) await loadDir(base);
hideModal('wsDetails');
});
el('wdDelete')?.addEventListener('click', async () => {
// simple delete through factory delete via dedicated endpoint would be ideal; for now we can implement a delete endpoint later
const ok = confirm('Delete this workspace?'); if (!ok) return;
const r = await fetch(`/api/heroprompt/workspaces/${currentWs}`, { method: 'DELETE' });
const j = await r.json().catch(() => ({}));
// ignore errors for now
await reloadWorkspaces();
const sel = document.getElementById('workspaceSelect');
currentWs = sel?.value || '';
localStorage.setItem('heroprompt-current-ws', currentWs);
if (currentWs) { const info = await api(`/api/heroprompt/workspaces/${currentWs}`); const base = info?.base_path || ''; if (base) await loadDir(base); }
hideModal('wsDetails');
});
if (document.getElementById('workspaceSelect')) {
// Copy Prompt: generate on server using workspace.prompt and copy to clipboard
el('copyPrompt')?.addEventListener('click', async () => {
const text = el('promptText')?.value || '';
try {
const r = await fetch(`/api/heroprompt/workspaces/${currentWs}/prompt`, { method: 'POST', body: new URLSearchParams({ text }) });
const out = await r.text();
await navigator.clipboard.writeText(out);
} catch (e) {
console.warn('copy prompt failed', e);
}
});
reloadWorkspaces();
document.getElementById('workspaceSelect').addEventListener('change', async (e) => {
currentWs = e.target.value;
localStorage.setItem('heroprompt-current-ws', currentWs);
const info = await api(`/api/heroprompt/workspaces/${currentWs}`);
const base = info?.base_path || '';
if (base) await loadDir(base);
});
}
document.getElementById('refreshWs')?.addEventListener('click', async () => {
const info = await api(`/api/heroprompt/workspaces/${currentWs}`);
const base = info?.base_path || '';
if (base) await loadDir(base);
});
document.getElementById('openWsManage')?.addEventListener('click', async () => {
// populate manage list and open
const list = el('wmList'); const err = el('wmError'); if (!list) return;
err.textContent = ''; list.innerHTML = '';
const names = await api('/api/heroprompt/workspaces').catch(() => []);
for (const n of names || []) { const li = document.createElement('li'); const s = document.createElement('span'); s.textContent = n; const b = document.createElement('button'); b.className = 'use'; b.textContent = 'Use'; b.onclick = async () => { currentWs = n; await reloadWorkspaces(); const info = await api(`/api/heroprompt/workspaces/${currentWs}`); const base = info?.base_path || ''; if (base) await loadDir(base); hideModal('wsManage'); }; li.appendChild(s); li.appendChild(b); list.appendChild(li); }
showModal('wsManage');
});
// legacy setWs kept for backward compat - binds currentWs
el('setWs')?.addEventListener('click', async () => {
const base = el('basePath')?.value?.trim();
if (!base) { alert('Enter base path'); return; }
const r = await post('/api/heroprompt/workspaces', { name: currentWs, base_path: base });
if (r.error) { alert(r.error); return; }
await loadDir(base);
});
el('doSearch').onclick = async () => {
const q = el('search').value.trim();
if (!q) return;
const r = await api(`/api/heroprompt/search?name=${currentWs}&q=${encodeURIComponent(q)}`);
if (r.error) { alert(r.error); return; }
const tree = el('tree');
tree.innerHTML = '<div>Search results:</div>';
const ul = document.createElement('ul');
for (const it of r) {
const li = document.createElement('li');
li.className = it.type;
const a = document.createElement('a');
a.href = '#'; a.textContent = it.path;
a.onclick = async (e) => {
e.preventDefault();
if (it.type === 'file') {
const rf = await api(`/api/heroprompt/file?name=${currentWs}&path=${encodeURIComponent(it.path)}`);
if (!rf.error) el('preview').textContent = rf.content;
} else {
await loadDir(it.path);
}
};
const add = document.createElement('button');
add.textContent = '+';
add.title = 'Add to selection';
add.onclick = () => addToSelection(it.path);
li.appendChild(a);
li.appendChild(add);
ul.appendChild(li);
}
tree.appendChild(ul);
};
// Tabs
function switchTab(id) {
for (const t of document.querySelectorAll('.tab')) t.classList.remove('active');
for (const p of document.querySelectorAll('.tab-pane')) p.classList.remove('active');
const btn = document.querySelector(`.tab[data-tab="${id}"]`);
const pane = document.getElementById(`tab-${id}`);
if (btn && pane) {
btn.classList.add('active');
pane.classList.add('active');
}
}
for (const btn of document.querySelectorAll('.tab')) {
btn.addEventListener('click', () => switchTab(btn.dataset.tab));
}
// Chat (client-side mock for now)
el('sendChat').onclick = () => {
const input = el('chatInput');
const text = input.value.trim();
if (!text) return;
addChatMessage('user', text);
input.value = '';
// Mock AI response
setTimeout(() => addChatMessage('ai', 'This is a placeholder AI response.'), 500);
};
function addChatMessage(role, text) {
const msg = document.createElement('div');
msg.className = `message ${role}`;
const bubble = document.createElement('div');
bubble.className = 'bubble';
bubble.textContent = text;
msg.appendChild(bubble);
el('chatMessages').appendChild(msg);
el('chatMessages').scrollTop = el('chatMessages').scrollHeight;
}
// Modal helpers
function showModal(id) { const m = el(id); if (!m) return; m.setAttribute('aria-hidden', 'false'); }
function hideModal(id) { const m = el(id); if (!m) return; m.setAttribute('aria-hidden', 'true'); el('wsError').textContent = ''; }

View File

@@ -0,0 +1,115 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{.title}} - Heroprompt</title>
<link rel="stylesheet" href="/static/css/main.css">
</head>
<body>
<div class="container">
<div class="toolbar">
<div class="title">{{.title}}</div>
<span class="spacer"></span>
<button id="toggleTheme" title="Toggle dark/light">🌓</button>
</div>
<div class="tabs">
<button class="tab active" data-tab="compose">Compose</button>
<button class="tab" data-tab="chat">Chat</button>
</div>
<div class="tab-content">
<section id="tab-compose" class="tab-pane active">
<div class="layout">
<div class="sidebar">
<div class="sidebar-header">
<select id="workspaceSelect"></select>
<button id="refreshWs">Refresh</button>
<button id="wsCreateBtn" title="Create a new workspace">+</button>
<button id="wsDetailsBtn" title="Workspace details">Details</button>
<span class="spacer"></span>
</div>
<div class="sidebar-body">
<div class="searchbar">
<input id="search" placeholder="Search files..." />
<div class="ws-info" id="wsInfo"></div>
<button id="doSearch">Search</button>
</div>
<div id="tree"></div>
</div>
</div>
<div class="main">
<div class="prompt">
<h3>Prompt</h3>
<textarea id="promptText" placeholder="Type your instructions here..."></textarea>
<div class="actions"><button id="copyPrompt">Copy Prompt</button></div>
</div>
<div class="selection">
<h3>Selected Files (<span id="selCount">0</span>) — Tokens: <span id="tokenCount">0</span></h3>
<ul id="selected"></ul>
</div>
</div>
</div>
</section>
<section id="tab-chat" class="tab-pane">
<div class="chat">
<div id="chatMessages" class="messages"></div>
<div class="chat-input">
<textarea id="chatInput" placeholder="Type a message..."></textarea>
<button id="sendChat">Send</button>
</div>
</div>
</section>
</div>
</div>
<script src="/static/js/main.js" defer></script>
<!-- Modal: Create Workspace -->
<div id="wsCreate" class="modal" aria-hidden="true">
<div class="modal-backdrop"></div>
<div class="modal-dialog">
<div class="modal-header">
<h4>Create workspace</h4>
<button id="wcClose" class="icon"></button>
</div>
<div class="modal-body">
<label for="wcName">Workspace name (optional)</label>
<input id="wcName" placeholder="leave blank to auto-generate" />
<small class="hint">If blank we will generate one for you</small>
<label for="wcPath">Workspace path (required)</label>
<input id="wcPath" placeholder="/full/path e.g. ~/code/github/project1" />
<div id="wcError" class="error" role="alert"></div>
</div>
<div class="modal-footer">
<button id="wcCancel">Cancel</button>
<button id="wcCreate">Create</button>
</div>
</div>
<!-- Modal: Workspace Details -->
<div id="wsDetails" class="modal" aria-hidden="true">
<div class="modal-backdrop"></div>
<div class="modal-dialog">
<div class="modal-header">
<h4>Workspace details</h4>
<button id="wdClose" class="icon"></button>
</div>
<div class="modal-body">
<label for="wdName">Name</label>
<input id="wdName" />
<label for="wdPath">Path</label>
<input id="wdPath" />
<div id="wdError" class="error" role="alert"></div>
</div>
<div class="modal-footer">
<button id="wdDelete">Delete</button>
<span class="spacer"></span>
<button id="wdCancel">Close</button>
<button id="wdSave">Save</button>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,28 @@
module heroprompt
import strings
// Very small template renderer using {{.var}} replacement
pub fn render_template(tpl string, data map[string]string) string {
mut out := tpl
for k, v in data {
out = out.replace('{{.' + k + '}}', v)
}
return out
}
// Minimal HTML escape
pub fn html_escape(s string) string {
mut b := strings.new_builder(s.len)
for ch in s {
match ch {
`&` { b.write_string('&amp;') }
`<` { b.write_string('&lt;') }
`>` { b.write_string('&gt;') }
`"` { b.write_string('&quot;') }
`'` { b.write_string('&#39;') }
else { b.write_string(ch.str()) }
}
}
return b.str()
}

244
lib/web/ui/endpoints.v Normal file
View File

@@ -0,0 +1,244 @@
module ui
import veb
import freeflowuniverse.herolib.develop.heroprompt
import os
import json
// Directory browsing and file read endpoints for Heroprompt.js compatibility
struct DirItem {
name string
typ string @[json: 'type']
}
struct DirResp {
path string
mut:
items []DirItem
}
@['/api/heroprompt/directory'; get]
pub fn (app &App) api_heroprompt_directory(mut ctx Context) veb.Result {
// Optional workspace name, defaults to 'default'
wsname := ctx.query['name'] or { 'default' }
path_q := ctx.query['path'] or { '' }
if path_q.len == 0 {
return ctx.text('{"error":"path required"}')
}
// Try to resolve against workspace base_path if available, but do not require it
mut base := ''
if wsp := heroprompt.get(name: wsname, create: false) {
base = wsp.base_path
}
// Resolve path: if absolute, use as-is; else join with base
mut dir_path := path_q
if !os.is_abs_path(dir_path) && base.len > 0 {
dir_path = os.join_path(base, dir_path)
}
// List entries
entries := os.ls(dir_path) or { return ctx.text('{"error":"cannot list directory"}') }
mut items := []map[string]string{}
for e in entries {
full := os.join_path(dir_path, e)
if os.is_dir(full) {
items << {
'name': e
'type': 'directory'
}
} else if os.is_file(full) {
items << {
'name': e
'type': 'file'
}
}
}
ctx.set_content_type('application/json')
// Encode strongly typed JSON response
mut resp := DirResp{
path: dir_path
}
for it in items {
resp.items << DirItem{
name: it['name'] or { '' }
typ: it['type'] or { '' }
}
}
return ctx.text(json.encode(resp))
}
@['/api/heroprompt/file'; get]
pub fn (app &App) api_heroprompt_file(mut ctx Context) veb.Result {
wsname := ctx.query['name'] or { 'default' }
path_q := ctx.query['path'] or { '' }
if path_q.len == 0 {
return ctx.text('{"error":"path required"}')
}
// Try to resolve against workspace base_path if available, but do not require it
mut base := ''
if wsp := heroprompt.get(name: wsname, create: false) {
base = wsp.base_path
}
mut file_path := path_q
if !os.is_abs_path(file_path) && base.len > 0 {
file_path = os.join_path(base, file_path)
}
content := os.read_file(file_path) or { return ctx.text('{"error":"failed to read"}') }
lang := detect_lang(file_path)
ctx.set_content_type('application/json')
return ctx.text(json.encode({
'language': lang
'content': content
}))
}
fn detect_lang(path string) string {
ext := os.file_ext(path).trim_left('.')
return match ext.to_lower() {
'v' { 'v' }
'js' { 'javascript' }
'ts' { 'typescript' }
'py' { 'python' }
'rs' { 'rust' }
'go' { 'go' }
'java' { 'java' }
'c', 'h' { 'c' }
'cpp', 'hpp', 'cc', 'hh' { 'cpp' }
'sh', 'bash' { 'bash' }
'json' { 'json' }
'yaml', 'yml' { 'yaml' }
'html', 'htm' { 'html' }
'css' { 'css' }
'md' { 'markdown' }
else { 'text' }
}
}
// Heroprompt API: list workspaces
@['/api/heroprompt/workspaces'; get]
pub fn (app &App) api_heroprompt_list(mut ctx Context) veb.Result {
mut names := []string{}
ws := heroprompt.list(fromdb: true) or { []&heroprompt.Workspace{} }
for w in ws {
names << w.name
}
ctx.set_content_type('application/json')
return ctx.text(json.encode(names))
}
// Heroprompt API: create/get workspace
@['/api/heroprompt/workspaces'; post]
pub fn (app &App) api_heroprompt_create(mut ctx Context) veb.Result {
name := ctx.form['name'] or { '' }
base_path := ctx.form['base_path'] or { '' }
if base_path.len == 0 {
return ctx.text('{"error":"base_path required"}')
}
mut wsp := heroprompt.get(name: name, create: true, path: base_path) or {
return ctx.text('{"error":"create failed"}')
}
ctx.set_content_type('application/json')
return ctx.text(json.encode({
'name': name
'base_path': base_path
}))
}
// Heroprompt API: add directory to workspace
@['/api/heroprompt/workspaces/:name/dirs'; post]
pub fn (app &App) api_heroprompt_add_dir(mut ctx Context, name string) veb.Result {
path := ctx.form['path'] or { '' }
if path.len == 0 {
return ctx.text('{"error":"path required"}')
}
mut wsp := heroprompt.get(name: name, create: true) or {
return ctx.text('{"error":"workspace not found"}')
}
wsp.add_dir(path: path) or { return ctx.text('{"error":"' + err.msg() + '"}') }
ctx.set_content_type('application/json')
return ctx.text('{"ok":true}')
}
// Heroprompt API: add file to workspace
@['/api/heroprompt/workspaces/:name/files'; post]
pub fn (app &App) api_heroprompt_add_file(mut ctx Context, name string) veb.Result {
path := ctx.form['path'] or { '' }
if path.len == 0 {
return ctx.text('{"error":"path required"}')
}
mut wsp := heroprompt.get(name: name, create: true) or {
return ctx.text('{"error":"workspace not found"}')
}
wsp.add_file(path: path) or { return ctx.text('{"error":"' + err.msg() + '"}') }
ctx.set_content_type('application/json')
return ctx.text('{"ok":true}')
}
// Heroprompt API: generate prompt
@['/api/heroprompt/workspaces/:name/prompt'; post]
pub fn (app &App) api_heroprompt_prompt(mut ctx Context, name string) veb.Result {
text := ctx.form['text'] or { '' }
mut wsp := heroprompt.get(name: name, create: false) or {
return ctx.text('{"error":"workspace not found"}')
}
prompt := wsp.prompt(text: text)
ctx.set_content_type('text/plain')
return ctx.text(prompt)
}
// Heroprompt API: get workspace details
@['/api/heroprompt/workspaces/:name'; get]
pub fn (app &App) api_heroprompt_get(mut ctx Context, name string) veb.Result {
wsp := heroprompt.get(name: name, create: false) or {
return ctx.text('{"error":"workspace not found"}')
}
mut children := []map[string]string{}
for ch in wsp.children {
children << {
'name': ch.name
'path': ch.path.path
'type': if ch.path.cat == .dir { 'directory' } else { 'file' }
}
}
ctx.set_content_type('application/json')
return ctx.text(json.encode({
'name': wsp.name
'base_path': wsp.base_path
'children': json.encode(children)
}))
}
// Heroprompt API: delete workspace
@['/api/heroprompt/workspaces/:name'; delete]
pub fn (app &App) api_heroprompt_delete(mut ctx Context, name string) veb.Result {
wsp := heroprompt.get(name: name, create: false) or {
return ctx.text('{"error":"workspace not found"}')
}
wsp.delete_workspace() or { return ctx.text('{"error":"delete failed"}') }
ctx.set_content_type('application/json')
return ctx.text('{"ok":true}')
}
// Heroprompt API: remove directory
@['/api/heroprompt/workspaces/:name/dirs/remove'; post]
pub fn (app &App) api_heroprompt_remove_dir(mut ctx Context, name string) veb.Result {
path := ctx.form['path'] or { '' }
mut wsp := heroprompt.get(name: name, create: false) or {
return ctx.text('{"error":"workspace not found"}')
}
wsp.remove_dir(path: path, name: '') or { return ctx.text('{"error":"' + err.msg() + '"}') }
return ctx.text('{"ok":true}')
}
// Heroprompt API: remove file
@['/api/heroprompt/workspaces/:name/files/remove'; post]
pub fn (app &App) api_heroprompt_remove_file(mut ctx Context, name string) veb.Result {
path := ctx.form['path'] or { '' }
mut wsp := heroprompt.get(name: name, create: false) or {
return ctx.text('{"error":"workspace not found"}')
}
wsp.remove_file(path: path, name: '') or { return ctx.text('{"error":"' + err.msg() + '"}') }
return ctx.text('{"ok":true}')
}

View File

@@ -1,470 +0,0 @@
module ui
import veb
import os
import net.http
// Public Context type for veb
pub struct Context {
veb.Context
}
// Simple tree menu structure
pub struct MenuItem {
pub:
title string
href string
children []MenuItem
}
// Factory args
@[params]
pub struct FactoryArgs {
pub mut:
name string = 'default'
host string = 'localhost'
port int = 8080
title string = 'Admin'
menu []MenuItem
open bool
}
// The App holds server state and config
pub struct App {
veb.StaticHandler
pub mut:
title string
menu []MenuItem
port int
}
// Start the webserver (blocking)
pub fn start(args FactoryArgs) ! {
mut app := new(args)!
veb.run[App, Context](mut app, app.port)
}
// Routes
// Redirect root to /admin
@['/'; get]
pub fn (app &App) root(mut ctx Context) veb.Result {
return ctx.redirect('/admin')
}
// Admin home page
@['/admin'; get]
pub fn (app &App) admin_index(mut ctx Context) veb.Result {
return ctx.html(app.render_admin('/', 'Welcome'))
}
// HeroScript editor page
@['/admin/heroscript'; get]
pub fn (app &App) admin_heroscript(mut ctx Context) veb.Result {
return ctx.html(app.render_heroscript())
}
// Chat page
@['/admin/chat'; get]
pub fn (app &App) admin_chat(mut ctx Context) veb.Result {
return ctx.html(app.render_chat())
}
// Static CSS files
@['/static/css/colors.css'; get]
pub fn (app &App) serve_colors_css(mut ctx Context) veb.Result {
css_path := os.join_path(os.dir(@FILE), 'templates', 'css', 'colors.css')
css_content := os.read_file(css_path) or { return ctx.text('/* CSS file not found */') }
ctx.set_content_type('text/css')
return ctx.text(css_content)
}
@['/static/css/main.css'; get]
pub fn (app &App) serve_main_css(mut ctx Context) veb.Result {
css_path := os.join_path(os.dir(@FILE), 'templates', 'css', 'main.css')
css_content := os.read_file(css_path) or { return ctx.text('/* CSS file not found */') }
ctx.set_content_type('text/css')
return ctx.text(css_content)
}
// Static JS files
@['/static/js/theme.js'; get]
pub fn (app &App) serve_theme_js(mut ctx Context) veb.Result {
js_path := os.join_path(os.dir(@FILE), 'templates', 'js', 'theme.js')
js_content := os.read_file(js_path) or { return ctx.text('/* JS file not found */') }
ctx.set_content_type('application/javascript')
return ctx.text(js_content)
}
@['/static/js/heroscript.js'; get]
pub fn (app &App) serve_heroscript_js(mut ctx Context) veb.Result {
js_path := os.join_path(os.dir(@FILE), 'templates', 'js', 'heroscript.js')
js_content := os.read_file(js_path) or { return ctx.text('/* JS file not found */') }
ctx.set_content_type('application/javascript')
return ctx.text(js_content)
}
@['/static/js/chat.js'; get]
pub fn (app &App) serve_chat_js(mut ctx Context) veb.Result {
js_path := os.join_path(os.dir(@FILE), 'templates', 'js', 'chat.js')
js_content := os.read_file(js_path) or { return ctx.text('/* JS file not found */') }
ctx.set_content_type('application/javascript')
return ctx.text(js_content)
}
@['/static/css/heroscript.css'; get]
pub fn (app &App) serve_heroscript_css(mut ctx Context) veb.Result {
css_path := os.join_path(os.dir(@FILE), 'templates', 'css', 'heroscript.css')
css_content := os.read_file(css_path) or { return ctx.text('/* CSS file not found */') }
ctx.set_content_type('text/css')
return ctx.text(css_content)
}
@['/static/css/chat.css'; get]
pub fn (app &App) serve_chat_css(mut ctx Context) veb.Result {
css_path := os.join_path(os.dir(@FILE), 'templates', 'css', 'chat.css')
css_content := os.read_file(css_path) or { return ctx.text('/* CSS file not found */') }
ctx.set_content_type('text/css')
return ctx.text(css_content)
}
// Catch-all content under /admin/*
@['/admin/:path...'; get]
pub fn (app &App) admin_section(mut ctx Context, path string) veb.Result {
// Render current path in the main content
return ctx.html(app.render_admin(path, 'Content'))
}
// View rendering using external template
fn (app &App) render_admin(path string, heading string) string {
// Get the template file path relative to the module
template_path := os.join_path(os.dir(@FILE), 'templates', 'admin_layout.html')
// Read the template file
template_content := os.read_file(template_path) or {
// Fallback to inline template if file not found
return app.render_admin_fallback(path, heading)
}
// Generate menu HTML
menu_content := menu_html(app.menu, 0, 'm')
// Simple template variable replacement
mut result := template_content
result = result.replace('{{.title}}', app.title)
result = result.replace('{{.heading}}', heading)
result = result.replace('{{.path}}', path)
result = result.replace('{{.menu_html}}', menu_content)
result = result.replace('{{.css_colors_url}}', '/static/css/colors.css')
result = result.replace('{{.css_main_url}}', '/static/css/main.css')
result = result.replace('{{.js_theme_url}}', '/static/js/theme.js')
return result
}
// HeroScript editor rendering using external template
fn (app &App) render_heroscript() string {
// Get the template file path relative to the module
template_path := os.join_path(os.dir(@FILE), 'templates', 'heroscript_editor.html')
// Read the template file
template_content := os.read_file(template_path) or {
// Fallback to basic template if file not found
return app.render_heroscript_fallback()
}
// Generate menu HTML
menu_content := menu_html(app.menu, 0, 'm')
// Simple template variable replacement
mut result := template_content
result = result.replace('{{.title}}', app.title)
result = result.replace('{{.menu_html}}', menu_content)
result = result.replace('{{.css_colors_url}}', '/static/css/colors.css')
result = result.replace('{{.css_main_url}}', '/static/css/main.css')
result = result.replace('{{.css_heroscript_url}}', '/static/css/heroscript.css')
result = result.replace('{{.js_theme_url}}', '/static/js/theme.js')
result = result.replace('{{.js_heroscript_url}}', '/static/js/heroscript.js')
return result
}
// Chat rendering using external template
fn (app &App) render_chat() string {
// Get the template file path relative to the module
template_path := os.join_path(os.dir(@FILE), 'templates', 'chat.html')
// Read the template file
template_content := os.read_file(template_path) or {
// Fallback to basic template if file not found
return app.render_chat_fallback()
}
// Generate menu HTML
menu_content := menu_html(app.menu, 0, 'm')
// Simple template variable replacement
mut result := template_content
result = result.replace('{{.title}}', app.title)
result = result.replace('{{.menu_html}}', menu_content)
result = result.replace('{{.css_colors_url}}', '/static/css/colors.css')
result = result.replace('{{.css_main_url}}', '/static/css/main.css')
result = result.replace('{{.css_chat_url}}', '/static/css/chat.css')
result = result.replace('{{.js_theme_url}}', '/static/js/theme.js')
result = result.replace('{{.js_chat_url}}', '/static/js/chat.js')
return result
}
// Fallback HeroScript rendering method
fn (app &App) render_heroscript_fallback() string {
return '
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>${app.title} - HeroScript Editor</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1>HeroScript Editor</h1>
<p>HeroScript editor template not found. Please check the template files.</p>
<a href="/admin" class="btn btn-primary">Back to Admin</a>
</div>
</body>
</html>
'
}
// Fallback Chat rendering method
fn (app &App) render_chat_fallback() string {
return '
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>${app.title} - Chat</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1>Chat Assistant</h1>
<p>Chat template not found. Please check the template files.</p>
<a href="/admin" class="btn btn-primary">Back to Admin</a>
</div>
</body>
</html>
'
}
// Fallback rendering method (inline template)
fn (app &App) render_admin_fallback(path string, heading string) string {
return '
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>${app.title}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
body { padding-top: 44px; }
.header {
height: 44px;
line-height: 44px;
font-size: 14px;
}
.sidebar {
position: fixed;
top: 44px;
bottom: 0;
left: 0;
width: 260px;
overflow-y: auto;
background: #f8f9fa;
border-right: 1px solid #e0e0e0;
}
.main {
margin-left: 260px;
padding: 16px;
}
.list-group-item {
border: 0;
padding: .35rem .75rem;
background: transparent;
}
.menu-leaf a {
color: #212529;
text-decoration: none;
}
.menu-toggle {
text-decoration: none;
color: #212529;
}
.menu-toggle .chev {
font-size: 10px;
opacity: .6;
}
.menu-section {
font-weight: 600;
color: #6c757d;
padding: .5rem .75rem;
}
</style>
</head>
<body>
<nav class="navbar navbar-dark bg-dark fixed-top header px-2">
<div class="d-flex w-100 align-items-center justify-content-between">
<div class="text-white fw-bold">${app.title}</div>
<div class="text-white-50">Admin</div>
</div>
</nav>
<aside class="sidebar">
<div class="p-2">
<div class="menu-section">Navigation</div>
<div class="list-group list-group-flush">
${menu_html(app.menu,
0, 'm')}
</div>
</div>
</aside>
<main class="main">
<div class="container-fluid">
<div class="d-flex align-items-center mb-3">
<h5 class="mb-0">${heading}</h5>
<span class="ms-2 text-muted small">/admin/${path}</span>
</div>
<div class="card">
<div class="card-body">
<p class="text-muted">This is a placeholder admin content area for: <code>/admin/${path}</code>.</p>
<p class="mb-0">Use the treeview on the left to navigate.</p>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
'
}
// Recursive menu renderer
fn menu_html(items []MenuItem, depth int, prefix string) string {
mut out := []string{}
for i, it in items {
id := '${prefix}_${depth}_${i}'
if it.children.len > 0 {
// expandable group
out << '<div class="list-group-item">'
out << '<a class="menu-toggle d-flex align-items-center justify-content-between" data-bs-toggle="collapse" href="#${id}" role="button" aria-expanded="${if depth == 0 {
'true'
} else {
'false'
}}" aria-controls="${id}">'
out << '<span>${it.title}</span><span class="chev">&rsaquo;</span>'
out << '</a>'
out << '<div class="collapse ${if depth == 0 { 'show' } else { '' }}" id="${id}">'
out << '<div class="ms-2 mt-1">'
out << menu_html(it.children, depth + 1, id)
out << '</div>'
out << '</div>'
out << '</div>'
} else {
// leaf
out << '<div class="list-group-item menu-leaf"><a href="${if it.href.len > 0 {
it.href
} else {
'/admin'
}}">${it.title}</a></div>'
}
}
return out.join('\n')
}
// Default sample menu
fn default_menu() []MenuItem {
return [
MenuItem{
title: 'Dashboard'
href: '/admin'
},
MenuItem{
title: 'HeroScript'
href: '/admin/heroscript'
},
MenuItem{
title: 'Chat'
href: '/admin/chat'
},
MenuItem{
title: 'Users'
children: [
MenuItem{
title: 'Overview'
href: '/admin/users/overview'
},
MenuItem{
title: 'Create'
href: '/admin/users/create'
},
MenuItem{
title: 'Roles'
href: '/admin/users/roles'
},
]
},
MenuItem{
title: 'Content'
children: [
MenuItem{
title: 'Pages'
href: '/admin/content/pages'
},
MenuItem{
title: 'Media'
href: '/admin/content/media'
},
MenuItem{
title: 'Settings'
children: [
MenuItem{
title: 'SEO'
href: '/admin/content/settings/seo'
},
MenuItem{
title: 'Themes'
href: '/admin/content/settings/themes'
},
]
},
]
},
MenuItem{
title: 'System'
children: [
MenuItem{
title: 'Status'
href: '/admin/system/status'
},
MenuItem{
title: 'Logs'
href: '/admin/system/logs'
},
MenuItem{
title: 'Backups'
href: '/admin/system/backups'
},
]
},
]
}

243
lib/web/ui/server.v Normal file
View File

@@ -0,0 +1,243 @@
module ui
import veb
import os
import net.http
import json
import freeflowuniverse.herolib.develop.heroprompt
// Public Context type for veb
pub struct Context {
veb.Context
}
// Simple tree menu structure
pub struct MenuItem {
pub:
title string
href string
children []MenuItem
}
// Factory args
@[params]
pub struct FactoryArgs {
pub mut:
name string = 'default'
host string = 'localhost'
port int = 8080
title string = 'Admin'
menu []MenuItem
open bool
}
// The App holds server state and config
pub struct App {
veb.StaticHandler
pub mut:
title string
menu []MenuItem
port int
}
pub fn new(args FactoryArgs) !&App {
mut app := App{
title: args.title
menu: args.menu
port: args.port
}
return &app
}
// Start the webserver (blocking)
pub fn start(args FactoryArgs) ! {
mut app := new(args)!
veb.run[App, Context](mut app, app.port)
}
// Routes
// Redirect root to /admin
@['/'; get]
pub fn (app &App) root(mut ctx Context) veb.Result {
return ctx.redirect('/admin')
}
// Admin home page
@['/admin'; get]
pub fn (app &App) admin_index(mut ctx Context) veb.Result {
return ctx.html(render_admin(app, '/', 'Welcome'))
}
// HeroScript editor page
@['/admin/heroscript'; get]
pub fn (app &App) admin_heroscript(mut ctx Context) veb.Result {
return ctx.html(render_heroscript(app))
}
// Chat page
@['/admin/chat'; get]
pub fn (app &App) admin_chat(mut ctx Context) veb.Result {
return ctx.html(render_chat(app))
}
// Heroprompt page
@['/admin/heroprompt'; get]
pub fn (app &App) admin_heroprompt_page(mut ctx Context) veb.Result {
template_path := os.join_path(os.dir(@FILE), 'templates', 'heroprompt.html')
template_content := os.read_file(template_path) or { return ctx.text('template not found') }
menu_content := menu_html(app.menu, 0, 'm')
mut result := template_content
result = result.replace('{{.title}}', app.title)
result = result.replace('{{.menu_html}}', menu_content)
result = result.replace('{{.css_colors_url}}', '/static/css/colors.css')
result = result.replace('{{.css_main_url}}', '/static/css/main.css')
result = result.replace('{{.css_heroprompt_url}}', '/static/css/heroprompt.css?v=2')
result = result.replace('{{.js_theme_url}}', '/static/js/theme.js?v=2')
result = result.replace('{{.js_heroprompt_url}}', '/static/js/heroprompt.js?v=2')
return ctx.html(result)
}
// Static Heroprompt assets
@['/static/css/heroprompt.css'; get]
pub fn (app &App) serve_heroprompt_css(mut ctx Context) veb.Result {
css_path := os.join_path(os.dir(@FILE), 'templates', 'css', 'heroprompt.css')
css_content := os.read_file(css_path) or { return ctx.text('/* CSS file not found */') }
ctx.set_content_type('text/css')
return ctx.text(css_content)
}
@['/static/js/heroprompt.js'; get]
pub fn (app &App) serve_heroprompt_js(mut ctx Context) veb.Result {
js_path := os.join_path(os.dir(@FILE), 'templates', 'js', 'heroprompt.js')
js_content := os.read_file(js_path) or { return ctx.text('/* JS file not found */') }
ctx.set_content_type('application/javascript')
return ctx.text(js_content)
}
// Static CSS files
@['/static/css/colors.css'; get]
pub fn (app &App) serve_colors_css(mut ctx Context) veb.Result {
css_path := os.join_path(os.dir(@FILE), 'templates', 'css', 'colors.css')
css_content := os.read_file(css_path) or { return ctx.text('/* CSS file not found */') }
ctx.set_content_type('text/css')
return ctx.text(css_content)
}
@['/static/css/main.css'; get]
pub fn (app &App) serve_main_css(mut ctx Context) veb.Result {
css_path := os.join_path(os.dir(@FILE), 'templates', 'css', 'main.css')
css_content := os.read_file(css_path) or { return ctx.text('/* CSS file not found */') }
ctx.set_content_type('text/css')
return ctx.text(css_content)
}
// Static JS files
@['/static/js/theme.js'; get]
pub fn (app &App) serve_theme_js(mut ctx Context) veb.Result {
js_path := os.join_path(os.dir(@FILE), 'templates', 'js', 'theme.js')
js_content := os.read_file(js_path) or { return ctx.text('/* JS file not found */') }
ctx.set_content_type('application/javascript')
return ctx.text(js_content)
}
@['/static/js/heroscript.js'; get]
pub fn (app &App) serve_heroscript_js(mut ctx Context) veb.Result {
js_path := os.join_path(os.dir(@FILE), 'templates', 'js', 'heroscript.js')
js_content := os.read_file(js_path) or { return ctx.text('/* JS file not found */') }
ctx.set_content_type('application/javascript')
return ctx.text(js_content)
}
@['/static/js/chat.js'; get]
pub fn (app &App) serve_chat_js(mut ctx Context) veb.Result {
js_path := os.join_path(os.dir(@FILE), 'templates', 'js', 'chat.js')
js_content := os.read_file(js_path) or { return ctx.text('/* JS file not found */') }
ctx.set_content_type('application/javascript')
return ctx.text(js_content)
}
@['/static/css/heroscript.css'; get]
pub fn (app &App) serve_heroscript_css(mut ctx Context) veb.Result {
css_path := os.join_path(os.dir(@FILE), 'templates', 'css', 'heroscript.css')
css_content := os.read_file(css_path) or { return ctx.text('/* CSS file not found */') }
ctx.set_content_type('text/css')
return ctx.text(css_content)
}
@['/static/css/chat.css'; get]
pub fn (app &App) serve_chat_css(mut ctx Context) veb.Result {
css_path := os.join_path(os.dir(@FILE), 'templates', 'css', 'chat.css')
css_content := os.read_file(css_path) or { return ctx.text('/* CSS file not found */') }
ctx.set_content_type('text/css')
return ctx.text(css_content)
}
// Catch-all content under /admin/*
@['/admin/:path...'; get]
pub fn (app &App) admin_section(mut ctx Context, path string) veb.Result {
// Render current path in the main content
return ctx.html(render_admin(app, path, 'Content'))
}
// Pure functions for rendering templates
fn render_admin(app &App, path string, heading string) string {
template_path := os.join_path(os.dir(@FILE), 'templates', 'admin_layout.html')
template_content := os.read_file(template_path) or {
return render_admin_fallback(app, path, heading)
}
menu_content := menu_html(app.menu, 0, 'm')
mut result := template_content
result = result.replace('{{.title}}', app.title)
result = result.replace('{{.heading}}', heading)
result = result.replace('{{.path}}', path)
result = result.replace('{{.menu_html}}', menu_content)
result = result.replace('{{.css_colors_url}}', '/static/css/colors.css')
result = result.replace('{{.css_main_url}}', '/static/css/main.css')
result = result.replace('{{.js_theme_url}}', '/static/js/theme.js')
return result
}
fn render_heroscript(app &App) string {
template_path := os.join_path(os.dir(@FILE), 'templates', 'heroscript_editor.html')
template_content := os.read_file(template_path) or { return render_heroscript_fallback(app) }
menu_content := menu_html(app.menu, 0, 'm')
mut result := template_content
result = result.replace('{{.title}}', app.title)
result = result.replace('{{.menu_html}}', menu_content)
result = result.replace('{{.css_colors_url}}', '/static/css/colors.css')
result = result.replace('{{.css_main_url}}', '/static/css/main.css')
result = result.replace('{{.css_heroscript_url}}', '/static/css/heroscript.css')
result = result.replace('{{.js_theme_url}}', '/static/js/theme.js')
result = result.replace('{{.js_heroscript_url}}', '/static/js/heroscript.js')
return result
}
fn render_chat(app &App) string {
template_path := os.join_path(os.dir(@FILE), 'templates', 'chat.html')
template_content := os.read_file(template_path) or { return render_chat_fallback(app) }
menu_content := menu_html(app.menu, 0, 'm')
mut result := template_content
result = result.replace('{{.title}}', app.title)
result = result.replace('{{.menu_html}}', menu_content)
result = result.replace('{{.css_colors_url}}', '/static/css/colors.css')
result = result.replace('{{.css_main_url}}', '/static/css/main.css')
result = result.replace('{{.css_chat_url}}', '/static/css/chat.css')
result = result.replace('{{.js_theme_url}}', '/static/js/theme.js')
result = result.replace('{{.js_chat_url}}', '/static/js/chat.js')
return result
}
// Fallbacks
fn render_heroscript_fallback(app &App) string {
return '\n<!doctype html>\n<html lang="en">\n<head>\n\t<meta charset="utf-8">\n\t<meta name="viewport" content="width=device-width, initial-scale=1">\n\t<title>${app.title} - HeroScript Editor</title>\n\t<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">\n</head>\n<body>\n\t<div class="container mt-5">\n\t\t<h1>HeroScript Editor</h1>\n\t\t<p>HeroScript editor template not found. Please check the template files.</p>\n\t\t<a href="/admin" class="btn btn-primary">Back to Admin</a>\n\t</div>\n</body>\n</html>\n'
}
fn render_chat_fallback(app &App) string {
return '\n<!doctype html>\n<html lang="en">\n<head>\n\t<meta charset="utf-8">\n\t<meta name="viewport" content="width=device-width, initial-scale=1">\n\t<title>${app.title} - Chat</title>\n\t<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">\n</head>\n<body>\n\t<div class="container mt-5">\n\t\t<h1>Chat Assistant</h1>\n\t\t<p>Chat template not found. Please check the template files.</p>\n\t\t<a href="/admin" class="btn btn-primary">Back to Admin</a>\n\t</div>\n</body>\n</html>\n'
}
fn render_admin_fallback(app &App, path string, heading string) string {
return '\n<!doctype html>\n<html lang="en">\n<head>\n\t<meta charset="utf-8">\n\t<meta name="viewport" content="width=device-width, initial-scale=1">\n\t<title>${app.title}</title>\n\t<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">\n\t<style>body { padding-top: 44px; } .header { height: 44px; line-height: 44px; font-size: 14px; } .sidebar { position: fixed; top: 44px; bottom: 0; left: 0; width: 260px; overflow-y: auto; background: #f8f9fa; border-right: 1px solid #e0e0e0; } .main { margin-left: 260px; padding: 16px; } .list-group-item { border: 0; padding: .35rem .75rem; background: transparent; } .menu-leaf a { color: #212529; text-decoration: none; } .menu-toggle { text-decoration: none; color: #212529; } .menu-toggle .chev { font-size: 10px; opacity: .6; } .menu-section { font-weight: 600; color: #6c757d; padding: .5rem .75rem; }</style>\n</head>\n<body>\n\t<nav class="navbar navbar-dark bg-dark fixed-top header px-2">\n\t\t<div class="d-flex w-100 align-items-center justify-content-between">\n\t\t\t<div class="text-white fw-bold">${app.title}</div>\n\t\t\t<div class="text-white-50">Admin</div>\n\t\t</div>\n\t</nav>\n\n\t<aside class="sidebar">\n\t\t<div class="p-2">\n\t\t\t<div class="menu-section">Navigation</div>\n\t\t\t<div class="list-group list-group-flush">\n\t\t\t\t${menu_html(app.menu,
0, 'm')}\n\t\t\t</div>\n\t\t</div>\n\t</aside>\n\n\t<main class="main">\n\t\t<div class="container-fluid">\n\t\t\t<div class="d-flex align-items-center mb-3">\n\t\t\t\t<h5 class="mb-0">${heading}</h5>\n\t\t\t\t<span class="ms-2 text-muted small">/admin/${path}</span>\n\t\t\t</div>\n\t\t\t<div class="card">\n\t\t\t\t<div class="card-body">\n\t\t\t\t\t<p class="text-muted">This is a placeholder admin content area for: <code>/admin/${path}</code>.</p>\n\t\t\t\t\t<p class="mb-0">Use the treeview on the left to navigate.</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</main>\n\n\t<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>\n</body>\n</html>\n'
}

View File

@@ -45,10 +45,11 @@
<h6 class="mb-0">Workspaces</h6> <h6 class="mb-0">Workspaces</h6>
<button id="create-workspace" class="btn btn-sm btn-primary">New</button> <button id="create-workspace" class="btn btn-sm btn-primary">New</button>
</div> </div>
<div class="card-body p-0"> <div class="card-body">
<div id="workspace-list" class="list-group list-group-flush"> <label for="workspace-select" class="form-label small text-muted">Select workspace</label>
<!-- Workspaces will be populated by JavaScript --> <select id="workspace-select" class="form-select form-select-sm mb-2"></select>
</div> <button id="delete-workspace" class="btn btn-sm btn-outline-danger"
style="display:none;">Delete</button>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -5,19 +5,16 @@
class Heroprompt { class Heroprompt {
constructor() { constructor() {
this.storageKey = 'heroprompt_data'; // Backend-integrated state (no localStorage)
this.data = this.loadData(); this.currentWorkspace = '';
this.currentWorkspace = this.data.current || 'default'; this.workspaces = [];
this.selectedFiles = new Set();
// Ensure default workspace exists this.selectedDirs = new Set();
if (!this.data.workspaces.default) {
this.data.workspaces.default = { dirs: [] };
this.saveData();
}
this.initializeUI(); this.initializeUI();
this.bindEvents(); this.bindEvents();
this.render(); // Load workspaces from backend and render
this.refreshWorkspaces();
} }
// Data management // Data management
@@ -51,7 +48,8 @@ class Heroprompt {
// API calls to V backend // API calls to V backend
async fetchDirectory(path) { async fetchDirectory(path) {
try { try {
const response = await fetch(`/api/heroprompt/directory?path=${encodeURIComponent(path)}`); const qs = new URLSearchParams({ name: this.currentWorkspace || 'default', path }).toString();
const response = await fetch(`/api/heroprompt/directory?${qs}`);
if (!response.ok) { if (!response.ok) {
throw new Error(`HTTP ${response.status}`); throw new Error(`HTTP ${response.status}`);
} }
@@ -64,7 +62,8 @@ class Heroprompt {
async fetchFileContent(path) { async fetchFileContent(path) {
try { try {
const response = await fetch(`/api/heroprompt/file?path=${encodeURIComponent(path)}`); const qs = new URLSearchParams({ name: this.currentWorkspace || 'default', path }).toString();
const response = await fetch(`/api/heroprompt/file?${qs}`);
if (!response.ok) { if (!response.ok) {
throw new Error(`HTTP ${response.status}`); throw new Error(`HTTP ${response.status}`);
} }
@@ -139,6 +138,108 @@ class Heroprompt {
this.addDirectoryWithPrompt(); this.addDirectoryWithPrompt();
} }
} }
// Backend API helpers
async apiListWorkspaces() {
const res = await fetch('/api/heroprompt/workspaces');
if (!res.ok) throw new Error('Failed to list workspaces');
return await res.json(); // array of names
}
async apiCreateWorkspace(name, base_path = '') {
const form = new FormData();
form.append('name', name);
if (base_path) form.append('base_path', base_path);
const res = await fetch('/api/heroprompt/workspaces', { method: 'POST', body: form });
if (!res.ok) throw new Error('Failed to create workspace');
return await res.json();
}
async apiDeleteWorkspace(name) {
const res = await fetch(`/api/heroprompt/workspaces/${encodeURIComponent(name)}`, { method: 'DELETE' });
if (!res.ok) throw new Error('Failed to delete workspace');
return await res.json();
}
async refreshWorkspaces(selectName = '') {
try {
this.workspaces = await this.apiListWorkspaces();
if (this.workspaces.length > 0) {
this.currentWorkspace = selectName || this.currentWorkspace || this.workspaces[0];
} else {
this.currentWorkspace = '';
}
await this.render();
} catch (e) {
console.error(e);
this.showToast('Failed to load workspaces', 'error');
}
}
async apiGetWorkspace(name) {
const res = await fetch(`/api/heroprompt/workspaces/${encodeURIComponent(name)}`);
if (!res.ok) throw new Error('Failed to get workspace');
return await res.json();
}
async apiAddDir(path) {
const form = new FormData();
form.append('path', path);
const res = await fetch(`/api/heroprompt/workspaces/${encodeURIComponent(this.currentWorkspace)}/dirs`, {
method: 'POST', body: form
});
if (!res.ok) throw new Error('Failed to add directory');
return await res.json();
}
async apiRemoveDir(path) {
const form = new FormData();
form.append('path', path);
const res = await fetch(`/api/heroprompt/workspaces/${encodeURIComponent(this.currentWorkspace)}/dirs/remove`, {
method: 'POST', body: form
});
if (!res.ok) throw new Error('Failed to remove directory');
return await res.json();
}
async apiAddFile(path) {
const form = new FormData();
form.append('path', path);
const res = await fetch(`/api/heroprompt/workspaces/${encodeURIComponent(this.currentWorkspace)}/files`, {
method: 'POST', body: form
});
if (!res.ok) throw new Error('Failed to add file');
return await res.json();
}
async apiRemoveFile(path) {
const form = new FormData();
form.append('path', path);
const res = await fetch(`/api/heroprompt/workspaces/${encodeURIComponent(this.currentWorkspace)}/files/remove`, {
method: 'POST', body: form
});
if (!res.ok) throw new Error('Failed to remove file');
return await res.json();
}
async loadCurrentWorkspaceDetails() {
if (!this.currentWorkspace) {
this.currentDetails = null;
this.selectedFiles = new Set();
this.selectedDirs = new Set();
return;
}
const data = await this.apiGetWorkspace(this.currentWorkspace);
this.currentDetails = data;
const files = new Set();
const dirs = new Set();
for (const ch of (data.children || [])) {
if (ch.type === 'file') files.add(ch.path);
if (ch.type === 'directory') dirs.add(ch.path);
}
this.selectedFiles = files;
this.selectedDirs = dirs;
}
async addDirectoryWithPicker() { async addDirectoryWithPicker() {
try { try {
@@ -219,72 +320,46 @@ class Heroprompt {
} }
} }
addDirectoryWithPrompt() { async addDirectoryWithPrompt() {
const path = prompt('Enter directory path:'); const path = prompt('Enter directory path:');
if (!path || path.trim() === '') { if (!path || path.trim() === '') return;
return; try {
await this.apiAddDir(path.trim());
await this.render();
this.showToast(`Directory "${path}" added`, 'success');
} catch (e) {
console.error('Failed to add directory:', e);
this.showToast(`Failed to add directory: ${e.message}`, 'error');
} }
this.fetchDirectory(path.trim())
.then(dirData => {
// Check if we got an error response
if (dirData.error) {
throw new Error(dirData.error);
}
const processedDir = {
path: dirData.path || path.trim(),
files: [],
subdirs: [],
selected: []
};
// Separate files and directories
if (dirData.items && Array.isArray(dirData.items)) {
for (const item of dirData.items) {
if (item.type === 'file') {
processedDir.files.push(item.name);
} else if (item.type === 'directory') {
processedDir.subdirs.push(item.name);
}
}
}
this.data.workspaces[this.currentWorkspace].dirs.push(processedDir);
this.saveData();
this.render();
this.showToast(`Directory "${path}" added`, 'success');
})
.catch(e => {
console.error('Failed to add directory:', e);
this.showToast(`Failed to add directory: ${e.message}`, 'error');
});
} }
removeDirectory(workspaceName, dirIndex) { async removeDirectory(path) {
if (!confirm('Are you sure you want to remove this directory?')) { if (!confirm('Are you sure you want to remove this directory?')) return;
return; try {
await this.apiRemoveDir(path);
await this.render();
this.showToast('Directory removed', 'success');
} catch (e) {
console.error('Failed to remove directory:', e);
this.showToast('Failed to remove directory', 'error');
} }
this.data.workspaces[workspaceName].dirs.splice(dirIndex, 1);
this.saveData();
this.render();
this.showToast('Directory removed', 'success');
} }
// File selection management // File selection management (backend-synced)
toggleFileSelection(workspaceName, dirIndex, fileName) { async toggleFileSelection(filePath) {
const dir = this.data.workspaces[workspaceName].dirs[dirIndex]; try {
const selectedIndex = dir.selected.indexOf(fileName); if (this.selectedFiles.has(filePath)) {
await this.apiRemoveFile(filePath);
if (selectedIndex === -1) { this.selectedFiles.delete(filePath);
dir.selected.push(fileName); } else {
} else { await this.apiAddFile(filePath);
dir.selected.splice(selectedIndex, 1); this.selectedFiles.add(filePath);
}
await this.renderWorkspaceDetails();
} catch (e) {
console.error('Failed to toggle file selection:', e);
this.showToast('Failed to toggle file selection', 'error');
} }
this.saveData();
this.renderWorkspaceDetails();
} }
selectAllFiles(workspaceName, dirIndex) { selectAllFiles(workspaceName, dirIndex) {
@@ -325,9 +400,8 @@ class Heroprompt {
// Clipboard functionality with new format // Clipboard functionality with new format
async copySelection() { async copySelection() {
const workspace = this.data.workspaces[this.currentWorkspace]; if (!this.currentWorkspace) {
if (!workspace || workspace.dirs.length === 0) { this.showToast('Select a workspace first', 'error');
this.showToast('No directories in workspace', 'error');
return; return;
} }
@@ -348,17 +422,18 @@ class Heroprompt {
// Generate file map // Generate file map
output.push('<file_map>'); output.push('<file_map>');
for (const dir of workspace.dirs) { const dirSet = new Set(Array.from(this.selectedFiles).map(p => p.split('/').slice(0, -1).join('/')));
if (dir.selected.length > 0) { for (const dirPath of dirSet) {
hasSelection = true; const data = await this.fetchDirectory(dirPath);
const fileTree = this.generateFileTree(dir.path, dir.files, dir.subdirs || []); const files = (data.items || []).filter(it => it.type === 'file').map(it => it.name);
output.push(fileTree); const subdirs = (data.items || []).filter(it => it.type === 'directory').map(it => it.name);
} const fileTree = this.generateFileTree(dirPath, files, subdirs);
output.push(fileTree);
} }
output.push('</file_map>'); output.push('</file_map>');
output.push(''); output.push('');
if (!hasSelection) { if (this.selectedFiles.size === 0) {
this.showToast('No files selected', 'error'); this.showToast('No files selected', 'error');
return; return;
} }
@@ -367,26 +442,23 @@ class Heroprompt {
output.push('<file_contents>'); output.push('<file_contents>');
try { try {
for (const dir of workspace.dirs) { for (const filePath of Array.from(this.selectedFiles)) {
for (const fileName of dir.selected) { try {
const filePath = `${dir.path}/${fileName}`; const fileData = await this.fetchFileContent(filePath);
try { output.push(`File: ${filePath}`);
const fileData = await this.fetchFileContent(filePath); output.push('');
output.push(`File: ${filePath}`); output.push(`\`\`\`${fileData.language}`);
output.push(''); output.push(fileData.content);
output.push(`\`\`\`${fileData.language}`); output.push('```');
output.push(fileData.content); output.push('');
output.push('```'); } catch (e) {
output.push(''); console.error(`Failed to fetch file ${filePath}:`, e);
} catch (e) { output.push(`File: ${filePath}`);
console.error(`Failed to fetch file ${filePath}:`, e); output.push('');
output.push(`File: ${filePath}`); output.push('```text');
output.push(''); output.push(`Error: Failed to read file - ${e.message}`);
output.push('```text'); output.push('```');
output.push(`Error: Failed to read file - ${e.message}`); output.push('');
output.push('```');
output.push('');
}
} }
} }
} catch (e) { } catch (e) {
@@ -437,7 +509,7 @@ class Heroprompt {
initializeUI() { initializeUI() {
// Cache DOM elements // Cache DOM elements
this.elements = { this.elements = {
workspaceList: document.getElementById('workspace-list'), workspaceSelect: document.getElementById('workspace-select'),
workspaceContent: document.getElementById('workspace-content'), workspaceContent: document.getElementById('workspace-content'),
currentWorkspaceName: document.getElementById('current-workspace-name'), currentWorkspaceName: document.getElementById('current-workspace-name'),
createWorkspaceBtn: document.getElementById('create-workspace'), createWorkspaceBtn: document.getElementById('create-workspace'),
@@ -452,15 +524,36 @@ class Heroprompt {
bindEvents() { bindEvents() {
// Workspace management // Workspace management
this.elements.createWorkspaceBtn.addEventListener('click', () => { this.elements.createWorkspaceBtn.addEventListener('click', async () => {
const name = prompt('Enter workspace name:'); const name = prompt('Enter workspace name:');
if (name) { if (!name) return;
this.createWorkspace(name); const base_path = prompt('Enter base path for this workspace (optional):') || '';
try {
await this.apiCreateWorkspace(name.trim(), base_path.trim());
await this.refreshWorkspaces(name.trim());
this.showToast(`Workspace "${name}" created`, 'success');
} catch (e) {
console.error(e);
this.showToast('Failed to create workspace', 'error');
} }
}); });
this.elements.deleteWorkspaceBtn.addEventListener('click', () => { this.elements.deleteWorkspaceBtn.addEventListener('click', async () => {
this.deleteWorkspace(this.currentWorkspace); if (!this.currentWorkspace) return;
if (!confirm(`Are you sure you want to delete workspace "${this.currentWorkspace}"?`)) return;
try {
await this.apiDeleteWorkspace(this.currentWorkspace);
await this.refreshWorkspaces();
this.showToast('Workspace deleted', 'success');
} catch (e) {
console.error(e);
this.showToast('Failed to delete workspace', 'error');
}
});
this.elements.workspaceSelect.addEventListener('change', async () => {
this.currentWorkspace = this.elements.workspaceSelect.value;
await this.render();
}); });
// Directory management // Directory management
@@ -480,30 +573,16 @@ class Heroprompt {
} }
render() { render() {
this.renderWorkspaceList(); this.renderWorkspaceSelect();
this.renderWorkspaceDetails(); this.renderWorkspaceDetails();
} }
renderWorkspaceList() { renderWorkspaceSelect() {
const workspaceNames = Object.keys(this.data.workspaces).sort(); const names = this.workspaces;
const options = names.map(n => `<option value="${n}" ${n === this.currentWorkspace ? 'selected' : ''}>${n}</option>`).join('');
this.elements.workspaceList.innerHTML = workspaceNames.map(name => ` this.elements.workspaceSelect.innerHTML = options;
<div class="list-group-item workspace-item ${name === this.currentWorkspace ? 'active' : ''}" this.elements.deleteWorkspaceBtn.style.display = this.currentWorkspace && this.currentWorkspace !== 'default' ? 'inline-block' : 'none';
data-workspace="${name}"> this.elements.currentWorkspaceName.textContent = this.currentWorkspace || 'Select a workspace';
<div class="d-flex justify-content-between align-items-center">
<span>${name}</span>
<small class="text-muted">${this.data.workspaces[name].dirs.length} dirs</small>
</div>
</div>
`).join('');
// Bind workspace selection events
this.elements.workspaceList.querySelectorAll('.workspace-item').forEach(item => {
item.addEventListener('click', () => {
const workspaceName = item.dataset.workspace;
this.selectWorkspace(workspaceName);
});
});
} }
renderWorkspaceDetails() { renderWorkspaceDetails() {
@@ -513,7 +592,7 @@ class Heroprompt {
this.elements.currentWorkspaceName.textContent = this.currentWorkspace; this.elements.currentWorkspaceName.textContent = this.currentWorkspace;
// Show/hide buttons based on selection // Show/hide buttons based on selection
const hasWorkspace = !!workspace; const hasWorkspace = !!this.currentWorkspace;
this.elements.deleteWorkspaceBtn.style.display = hasWorkspace && this.currentWorkspace !== 'default' ? 'inline-block' : 'none'; this.elements.deleteWorkspaceBtn.style.display = hasWorkspace && this.currentWorkspace !== 'default' ? 'inline-block' : 'none';
this.elements.addDirectoryBtn.style.display = hasWorkspace ? 'inline-block' : 'none'; this.elements.addDirectoryBtn.style.display = hasWorkspace ? 'inline-block' : 'none';
this.elements.copySelectionBtn.style.display = hasWorkspace ? 'inline-block' : 'none'; this.elements.copySelectionBtn.style.display = hasWorkspace ? 'inline-block' : 'none';
@@ -534,39 +613,110 @@ class Heroprompt {
return; return;
} }
// Render directories and files // Load current workspace details from backend
this.elements.workspaceContent.innerHTML = workspace.dirs.map((dir, dirIndex) => ` try {
await this.loadCurrentWorkspaceDetails();
} catch (e) {
console.error(e);
this.elements.workspaceContent.innerHTML = '<p class="text-muted">Failed to load workspace details.</p>';
return;
}
const dirs = Array.from(this.selectedDirs);
if (dirs.length === 0) {
this.elements.workspaceContent.innerHTML = `
<div class="empty-state">
<div class="empty-state-icon">📁</div>
<p>No directories added to this workspace.</p>
<p class="text-muted">Click "Add Directory" to get started.</p>
</div>
`;
return;
}
// Render directories as expandable tree explorers
this.elements.workspaceContent.innerHTML = dirs.map((dirPath, dirIndex) => `
<div class="directory-item"> <div class="directory-item">
<div class="directory-header"> <div class="directory-header">
<div class="d-flex justify-content-between align-items-center"> <div class="d-flex justify-content-between align-items-center">
<div> <div>
<strong>${this.getDirectoryName(dir.path)}</strong> <strong>${this.getDirectoryName(dirPath)}</strong>
<div class="directory-path">${dir.path}</div> <div class="directory-path">${dirPath}</div>
${dir.subdirs && dir.subdirs.length > 0 ? `<div class="text-muted small">Subdirs: ${dir.subdirs.join(', ')}</div>` : ''}
</div> </div>
<div class="btn-group-actions"> <div class="btn-group-actions">
<span class="selection-counter ${dir.selected.length > 0 ? 'has-selection' : ''}"> <button class="btn btn-sm btn-outline-danger" onclick="heroprompt.removeDirectory('${dirPath}')">Remove</button>
${dir.selected.length}/${dir.files.length} selected
</span>
<button class="btn btn-sm btn-outline-secondary" onclick="heroprompt.selectAllFiles('${this.currentWorkspace}', ${dirIndex})">All</button>
<button class="btn btn-sm btn-outline-secondary" onclick="heroprompt.deselectAllFiles('${this.currentWorkspace}', ${dirIndex})">None</button>
<button class="btn btn-sm btn-outline-danger" onclick="heroprompt.removeDirectory('${this.currentWorkspace}', ${dirIndex})">Remove</button>
</div> </div>
</div> </div>
</div> </div>
<div class="file-list"> <div class="file-tree" id="file-tree-${dirIndex}"></div>
${dir.files.map(file => `
<div class="file-item ${dir.selected.includes(file) ? 'selected' : ''}"
onclick="heroprompt.toggleFileSelection('${this.currentWorkspace}', ${dirIndex}, '${file}')">
<input type="checkbox" ${dir.selected.includes(file) ? 'checked' : ''}
onclick="event.stopPropagation()">
<span class="file-icon ${this.getFileIconClass(file)}"></span>
<span class="file-name">${file}</span>
</div>
`).join('')}
</div>
</div> </div>
`).join(''); `).join('');
// Populate tree nodes asynchronously
dirs.forEach((dirPath, dirIndex) => {
const container = document.getElementById(`file-tree-${dirIndex}`);
this.renderDirNode(dirPath, dirIndex, container, 0);
});
}
// Render a directory node with lazy subdir loading
async renderDirNode(dirPath, dirIndex, container, level) {
try {
// Fetch directory listing from backend
const data = await this.fetchDirectory(dirPath);
const items = data.items || [];
// Separate directories and files
const dirs = items.filter(it => it.type === 'directory').map(it => it.name);
const files = items.filter(it => it.type === 'file').map(it => it.name);
// Build HTML
const indent = '&nbsp;'.repeat(level * 2);
const list = [];
dirs.forEach(sub => {
const subPath = `${dirPath}/${sub}`;
const nodeId = `dir-node-${dirIndex}-${level}-${sub.replace(/[^a-zA-Z0-9_-]/g, '_')}`;
list.push(`
<div class="file-item">
<span class="file-icon">📁</span>
<a href="#" class="toggle" data-target="${nodeId}" data-path="${subPath}">${indent}${sub}</a>
<div id="${nodeId}" class="children" style="display:none; margin-left:12px;"></div>
</div>
`);
});
files.forEach(file => {
const absPath = `${dirPath}/${file}`;
const isSel = this.selectedFiles.has(absPath);
list.push(`
<div class="file-item ${isSel ? 'selected' : ''}" onclick="heroprompt.toggleFileSelection('${absPath}')">
<input type="checkbox" ${isSel ? 'checked' : ''} onclick="event.stopPropagation()">
<span class="file-icon ${this.getFileIconClass(file)}"></span>
<span class="file-name">${indent}${file}</span>
</div>
`);
});
container.innerHTML = list.join('');
// Bind toggles for lazy load
container.querySelectorAll('a.toggle').forEach(a => {
a.addEventListener('click', async (e) => {
e.preventDefault();
const targetId = a.getAttribute('data-target');
const path = a.getAttribute('data-path');
const target = document.getElementById(targetId);
if (target.getAttribute('data-loaded') !== '1') {
await this.renderDirNode(path, dirIndex, target, level + 1);
target.setAttribute('data-loaded', '1');
}
target.style.display = (target.style.display === 'none') ? 'block' : 'none';
});
});
} catch (e) {
console.error('Failed to render directory node:', e);
container.innerHTML = `<div class="text-muted small">Failed to load ${dirPath}</div>`;
}
} }
getDirectoryName(path) { getDirectoryName(path) {

27
lib/web/ui/utils.v Normal file
View File

@@ -0,0 +1,27 @@
module ui
// Recursive menu renderer
fn menu_html(items []MenuItem, depth int, prefix string) string {
mut out := []string{}
for i, it in items {
id := '${prefix}_${depth}_${i}'
if it.children.len > 0 {
// expandable group
out << '<div class="item">'
out << '<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-bs-toggle="collapse" href="#${id}" role="button" aria-expanded="${if depth == 0 { 'true' } else { 'false' }}" aria-controls="${id}">'
out << '<span>${it.title}</span><span class="chev">&rsaquo;</span>'
out << '</a>'
out << '<div class="collapse ${if depth == 0 { 'show' } else { '' }}" id="${id}">'
out << '<div class="ms-2 mt-1">'
out << menu_html(it.children, depth + 1, id)
out << '</div>'
out << '</div>'
out << '</div>'
} else {
// leaf
out << '<a href="${it.href}" class="list-group-item list-group-item-action">${it.title}</a>'
}
}
return out.join('\n')
}