352 lines
17 KiB
HTML
352 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Session Summary — 6 July 2026</title>
|
|
<link rel="stylesheet" href="../../../../_assets_/styles.css">
|
|
<link rel="stylesheet" href="../../../../_assets_/nav.css">
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
|
|
<header>
|
|
<p class="date">Monday, 6 July 2026</p>
|
|
<h1>Roject — Session Summary</h1>
|
|
<p class="subtitle">
|
|
File tree rename/delete, locale generator rewrite, locale documentation,
|
|
doc/ renamed to workspace/, fixed navigation header system,
|
|
Guides/Actions workspace restructure, Update History action rewrite,
|
|
and Rojo chibi bone animator prototype.
|
|
</p>
|
|
</header>
|
|
|
|
<section>
|
|
<h2>What we built</h2>
|
|
|
|
<div class="card">
|
|
<h3>File Tree: Rename and Delete</h3>
|
|
<p>
|
|
Right-clicking any file or directory label in the file tree now opens a
|
|
context menu with <em>Rename…</em> and <em>Delete</em> entries.
|
|
Rename shows an inline overlay (same pattern as Add File) with the current
|
|
name pre-filled. Delete requires confirmation via
|
|
<code><confirm-dialog></code> before proceeding.
|
|
</p>
|
|
<p style="margin-top:0.75rem">
|
|
Two new server-side storage functions were added:
|
|
<code>renameProjectEntry</code> (validates new name has no path separators,
|
|
target does not already exist, result stays within project root) and
|
|
<code>deleteProjectEntry</code> (uses <code>fs.rmSync</code> with
|
|
<code>recursive: true</code>). Exposed as
|
|
<code>POST /:projectId/rename</code> and <code>POST /:projectId/delete</code>
|
|
in <code>server/routes/files.ts</code>.
|
|
<code>confirm-dialog.css</code> and <code>confirm-dialog.js</code> were added
|
|
to <code>public/editor.html</code>.
|
|
</p>
|
|
<div class="tags">
|
|
<span class="tag">file-tree-panel.ts</span>
|
|
<span class="tag">server/storage.ts</span>
|
|
<span class="tag">server/routes/files.ts</span>
|
|
<span class="tag">confirm-dialog</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Locale Generator Rewrite</h3>
|
|
<p>
|
|
<code>server/localeGenerator.ts</code> was rewritten to generate one
|
|
<code>.ts</code> file per source directory instead of a single monolithic
|
|
<code>Locales.ts</code>. Output goes to <code>src/locales/generated/</code>.
|
|
The root directory generates <code>Locales.ts</code>; each subdirectory
|
|
generates a file named in PascalCase (e.g. <code>commands/</code> →
|
|
<code>Commands.ts</code>).
|
|
</p>
|
|
<p style="margin-top:0.75rem">
|
|
Naming rules: directory names → PascalCase class names; file names →
|
|
camelCase member names, with all dots replaced by underscores first, then
|
|
dashes converted to camelCase on the remaining segments. The extension is
|
|
always kept as a suffix after an underscore. Example:
|
|
<code>add-file.txt</code> → <code>addFile_txt</code>,
|
|
<code>config.min.json</code> → <code>config_min_json</code>.
|
|
Parent classes re-expose child classes as <code>static readonly</code>
|
|
members, so paths like
|
|
<code>Locales.Commands.FileTreeCommands.addFile_txt</code> work naturally.
|
|
</p>
|
|
<p style="margin-top:0.75rem">
|
|
<code>LocaleManager.$</code> was changed from a static method to a static
|
|
getter, so usage is <code>LocaleManager.$.get(…)</code> without parentheses.
|
|
</p>
|
|
<div class="tags">
|
|
<span class="tag">server/localeGenerator.ts</span>
|
|
<span class="tag">src/locales/generated/</span>
|
|
<span class="tag">LocaleManager.ts</span>
|
|
<span class="tag">static get $</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Locale Documentation</h3>
|
|
<p>
|
|
A full reference guide was written at
|
|
<code>workspace/guides/locales/index.html</code> covering: what the locale
|
|
system is, how source files are structured under <code>locales/en/</code>,
|
|
how the generator turns them into TypeScript, the naming conventions
|
|
(PascalCase directories, camelCase+extension members), how to add a new
|
|
locale file, and how to use it in code via
|
|
<code>LocaleManager.$.get( Locales.X.Y.member_ext )</code>.
|
|
</p>
|
|
<div class="tags">
|
|
<span class="tag">workspace/guides/locales/index.html</span>
|
|
<span class="tag">naming conventions</span>
|
|
<span class="tag">usage examples</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>doc/ Renamed to workspace/</h3>
|
|
<p>
|
|
The documentation root was renamed from <code>doc/</code> to
|
|
<code>workspace/</code>. Because the directory was open in the IDE,
|
|
PowerShell <code>Rename-Item</code> and Bash <code>mv</code> both failed
|
|
with Permission Denied. The workaround was to copy the tree with
|
|
<code>robocopy</code> then delete the original with
|
|
<code>Remove-Item -Recurse -Force</code>.
|
|
<code>CLAUDE.md</code> was updated to point to
|
|
<code>workspace/outline/index.html</code>.
|
|
</p>
|
|
<div class="tags">
|
|
<span class="tag">robocopy workaround</span>
|
|
<span class="tag">CLAUDE.md</span>
|
|
<span class="tag">workspace/</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Workspace Navigation Header</h3>
|
|
<p>
|
|
Every workspace HTML page now includes a fixed navigation header generated
|
|
from a central sitemap. The system consists of three files in
|
|
<code>workspace/_assets_/</code>:
|
|
</p>
|
|
<ul style="margin-top:0.75rem">
|
|
<li><strong>nav-data.js</strong> — declares <code>var NAV_DATA</code>, a tree of
|
|
<code>{ title, path, children? }</code> nodes mirroring all workspace pages.</li>
|
|
<li><strong>nav.js</strong> — finds the current page in the tree and renders a
|
|
three-row header: breadcrumb (ancestors), siblings row (peers at the same level),
|
|
and children row (direct children). After inserting the <code><nav></code>,
|
|
it sets <code>document.body.style.paddingTop</code> dynamically to prevent content
|
|
hiding under the fixed bar.</li>
|
|
<li><strong>nav.css</strong> — <code>.wsnav</code> is <code>position: fixed</code>
|
|
spanning the full viewport width; <code>.wsnav-inner</code> is centered at 57 em
|
|
to keep the content aligned with the page body.</li>
|
|
</ul>
|
|
<p style="margin-top:0.75rem">
|
|
Each page sets <code>var NAV_ROOT</code> to its relative depth from
|
|
<code>workspace/</code> so nav links resolve correctly regardless of nesting
|
|
level. Day entries use <code>'../../../../'</code>; the outline uses
|
|
<code>'../'</code>.
|
|
</p>
|
|
<div class="tags">
|
|
<span class="tag">workspace/_assets_/nav-data.js</span>
|
|
<span class="tag">workspace/_assets_/nav.js</span>
|
|
<span class="tag">workspace/_assets_/nav.css</span>
|
|
<span class="tag">position: fixed</span>
|
|
<span class="tag">NAV_ROOT</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Workspace Restructure: Guides and Actions</h3>
|
|
<p>
|
|
The workspace was reorganised into four top-level sections: Outline, Guides,
|
|
Actions, and History. <strong>Guides</strong> hold informational reference
|
|
material (how to approach a type of work). <strong>Actions</strong> hold
|
|
repeatable procedures that an agent can be told to execute.
|
|
</p>
|
|
<p style="margin-top:0.75rem">
|
|
Pages created: <code>workspace/guides/index.html</code>,
|
|
<code>workspace/guides/writing-typescript-code/index.html</code>,
|
|
<code>workspace/guides/locales/index.html</code>,
|
|
<code>workspace/actions/index.html</code>,
|
|
<code>workspace/actions/update-history/index.html</code>,
|
|
<code>workspace/actions/update-outline/index.html</code>.
|
|
The outline index was updated with Guides and Actions summary cards.
|
|
<code>nav-data.js</code> was updated to include both sections.
|
|
</p>
|
|
<div class="tags">
|
|
<span class="tag">workspace/guides/</span>
|
|
<span class="tag">workspace/actions/</span>
|
|
<span class="tag">nav-data.js</span>
|
|
<span class="tag">outline/index.html</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Update History Action: Commit and Push</h3>
|
|
<p>
|
|
The Update History action was rewritten with two new behaviours. First,
|
|
when no entry exists for today, the agent now always asks which day to use
|
|
(a session may have started the previous day) and waits for an answer before
|
|
continuing. Second, a Step 5 was added: before running any git command, the
|
|
agent presents a confirmation prompt stating the exact date, the commit
|
|
message (a one-liner summary), and the push target (<code>main</code>), then
|
|
waits for the user to approve. After approval it runs
|
|
<code>git add .</code>, <code>git commit -m "…"</code>, and
|
|
<code>git push</code>. A push failure is reported to the user without any
|
|
automatic recovery attempt. Same-day updates append new cards when there is
|
|
enough new material, or adjust existing content in place for minor changes.
|
|
</p>
|
|
<div class="tags">
|
|
<span class="tag">workspace/actions/update-history/index.html</span>
|
|
<span class="tag">git add . / commit / push</span>
|
|
<span class="tag">confirmation prompt</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Rojo Chibi Bone Animator Prototype</h3>
|
|
<p>
|
|
A 2D skeletal animation prototype was started for an in-app chibi character
|
|
intended to accompany AI agent interactions. The source artwork is an Inkscape
|
|
SVG (<code>src/rojos/rojo-base.svg</code>) where each body part is a
|
|
<code><g></code> labelled <code>*-transform</code> and contains a
|
|
<code><circle></code> labelled <code>*-pivot</code> that marks the
|
|
rotation point. The pivot circle carries an inverse transform so its
|
|
<code>cx/cy</code> sits at the exact world-space pivot regardless of the
|
|
bone's own transform.
|
|
</p>
|
|
<p style="margin-top:0.75rem">
|
|
<code>src/rojos/rojo-animator.ts</code> provides <code>RojoAnimator</code>,
|
|
which walks all <code>*-transform</code> groups on load, applies the pivot
|
|
circle's transform to its <code>cx/cy</code> to recover the local-space pivot,
|
|
removes the circles, and strips Inkscape namespaced attributes. At runtime,
|
|
<code>setBoneAngle(name, degrees)</code> writes
|
|
<code>restTransform translate(lx,ly) rotate(θ) translate(-lx,-ly)</code>
|
|
directly onto the group element — no graphics library required. The parser
|
|
handles all three transform types present in the SVG:
|
|
<code>translate</code>, <code>matrix</code>, and <code>rotate(angle,cx,cy)</code>.
|
|
</p>
|
|
<p style="margin-top:0.75rem">
|
|
<code>public/rojos/rojo-demo.html</code> fetches the SVG, injects it into
|
|
the page, and runs a <code>requestAnimationFrame</code> loop with three
|
|
switchable animations: <em>Idle</em> (breathing sway), <em>Walk</em>
|
|
(legs and arms in opposite phase), and <em>Wave</em> (right arm wave).
|
|
</p>
|
|
<div class="tags">
|
|
<span class="tag">src/rojos/rojo-animator.ts</span>
|
|
<span class="tag">public/rojos/rojo-demo.html</span>
|
|
<span class="tag">public/rojos/rojo-base.svg</span>
|
|
<span class="tag">SVG bone animation</span>
|
|
<span class="tag">no graphics library</span>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Key Decisions</h2>
|
|
|
|
<div class="decision">
|
|
<strong>Right-click context menu for rename/delete (not header buttons)</strong>
|
|
<p>
|
|
The file tree header already had Add File and Add Directory buttons.
|
|
Adding more buttons would crowd the header. Right-click is the conventional
|
|
gesture for per-item operations on file trees and uses the existing
|
|
ContextMenu infrastructure.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="decision">
|
|
<strong>One generated .ts file per locale directory</strong>
|
|
<p>
|
|
A single flat <code>Locales.ts</code> would grow unbounded and force a
|
|
full regeneration for every locale change. Per-directory files allow
|
|
TypeScript to cache unchanged files and make the generated output easier
|
|
to read and trace back to source.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="decision">
|
|
<strong>All dots in file names become underscores before dash-to-camelCase</strong>
|
|
<p>
|
|
File names like <code>config.min.json</code> have structural dots that
|
|
are not word separators in the same way dashes are. Replacing all dots
|
|
with underscores first produces unambiguous member names
|
|
(<code>config_min_json</code>) without any special-casing for extensions.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="decision">
|
|
<strong>LocaleManager.$ as a static getter, not a method</strong>
|
|
<p>
|
|
<code>LocaleManager.$</code> is a singleton accessor. Callers should read
|
|
it like a property, not invoke it like a factory. Removing the parentheses
|
|
at every call site makes the access pattern clear and consistent.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="decision">
|
|
<strong>Fixed nav with .wsnav-inner for centered content</strong>
|
|
<p>
|
|
<code>position: fixed</code> and <code>margin: auto</code> cannot coexist
|
|
on the same element because fixed positioning takes the element out of
|
|
normal flow. Splitting into an outer full-width <code>.wsnav</code> and
|
|
an inner <code>.wsnav-inner</code> (57 em, margin auto) solves this cleanly.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="decision">
|
|
<strong>Guides for style/approach, Actions for repeatable procedures</strong>
|
|
<p>
|
|
"Guides" describes informational reference material that helps a contributor
|
|
understand how to work in an area. "Actions" describes discrete, repeatable
|
|
procedures that a human or agent can be told to execute by name — they have
|
|
concrete steps, not just advice.
|
|
</p>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Structural Changes</h2>
|
|
<div class="card">
|
|
<p>
|
|
<code>doc/</code> → <code>workspace/</code> — root rename<br>
|
|
<code>workspace/_assets_/nav-data.js</code> — new: sitemap for nav system<br>
|
|
<code>workspace/_assets_/nav.js</code> — new: nav renderer<br>
|
|
<code>workspace/_assets_/nav.css</code> — new: fixed nav styles<br>
|
|
<code>workspace/guides/</code> — new section<br>
|
|
<code>workspace/guides/writing-typescript-code/index.html</code> — new<br>
|
|
<code>workspace/guides/locales/index.html</code> — new<br>
|
|
<code>workspace/actions/</code> — new section<br>
|
|
<code>workspace/actions/update-history/index.html</code> — new<br>
|
|
<code>workspace/actions/update-outline/index.html</code> — new<br>
|
|
<code>server/storage.ts</code> — added <code>renameProjectEntry</code>, <code>deleteProjectEntry</code><br>
|
|
<code>server/routes/files.ts</code> — added <code>POST /:projectId/rename</code>, <code>POST /:projectId/delete</code><br>
|
|
<code>src/components/file-tree-panel/file-tree-panel.ts</code> — added <code>showItemMenu</code>, <code>startInlineRename</code>, <code>renameEntry</code>, <code>deleteEntry</code><br>
|
|
<code>public/editor.html</code> — added confirm-dialog CSS and script<br>
|
|
<code>server/localeGenerator.ts</code> — complete rewrite (per-directory output)<br>
|
|
<code>src/locales/generated/</code> — new: generated locale classes<br>
|
|
<code>src/locales/LocaleManager.ts</code> — <code>static $</code> changed to <code>static get $</code><br>
|
|
<code>CLAUDE.md</code> — updated to point to <code>workspace/outline/index.html</code><br>
|
|
<code>workspace/index.html</code> — updated: added Guides and Actions cards<br>
|
|
<code>src/rojos/rojo-base.svg</code> — new: Inkscape chibi character with bone/pivot structure<br>
|
|
<code>src/rojos/rojo-animator.ts</code> — new: SVG bone animator (pivot parser + setBoneAngle)<br>
|
|
<code>public/rojos/rojo-base.svg</code> — new: copy of SVG for static serving<br>
|
|
<code>public/rojos/rojo-demo.html</code> — new: interactive animation demo (idle/walk/wave)
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
Roject — session log — 6 July 2026
|
|
</footer>
|
|
|
|
</div>
|
|
<script>var NAV_ROOT = '../../../../';</script>
|
|
<script src="../../../../_assets_/nav-data.js"></script>
|
|
<script src="../../../../_assets_/nav.js"></script>
|
|
</body>
|
|
</html>
|