6. The Web UI — Navigation Panel

The left panel is your window into the project's knowledge. From here you browse all resources, perform operations on them, and search for information.

Tree view

The panel shows your project structure as a tree, similar to an IDE. Files, folders, and entities appear organized hierarchically, with icons indicating their type and state.

Multi-project

If you have multiple KaKeKiKoKu projects open, they all appear in the same panel, each with its own accent color for visual distinction. You can expand and collapse each project independently.

AI visibility

If a project is open but set to be hidden from your AI (through Projects available to AI in the File menu, or the Welcome screen), a small marker — an AI icon crossed out — appears next to its name in the tree. Hover it for a reminder, or click it to reopen that dialog and make the project visible. It's there so a deliberately hidden project never looks like a broken connection: if your AI can't find a project you have open, this marker usually tells you why.

Icons and visual states

Each tree element shows icons that inform you at a glance:

• Resource type: file, folder, or entity — each with its own icon.
• Issues: if a resource has a problem (👻 ghost, ❓ undocumented, ▲ drift, 🔗 broken reference, 🔴 error, ⌛ pending), its issue icon appears next to the type icon.
• Flags: resources marked as important, pending, or draft show additional indicators.

Inline descriptions

Next to each resource name, its description (from the sidecar) appears. This gives you context without needing to open each resource.

Navigation

• Click on a resource: selects it and shows its content in the central panel.
• Ctrl+click: opens the resource in a new browser tab without losing what you're viewing. A small button on the row does the same when you hover it.
• Shift+click: opens the context menu — the same one as right-click, for anyone whose pointing device makes right-click awkward.
• Expand/collapse: folders expand and collapse by clicking the arrow. The expansion state is remembered between sessions.

Panel width

Drag the vertical splitter to resize the panel: it never goes below 400 pixels and never past half the window. The floor is deliberate — at that width the tree always fits names, descriptions, icons, and every control, so nothing gets hidden on you at narrow sizes. When you want the whole window for the tree, use project map mode (below) instead of dragging. Width is per window and isn't remembered: every launch starts at 400 pixels.

Section navigator

The left panel doesn't stop at files and folders: it can also show the sections (and subsections) of a resource right underneath it, turning the tree into an operative index of the knowledge itself — not just of the files.

• Knowledge drawer icon: every resource that has sections shows a small drawer button in the left rail of its row. Press it to open or close that resource's section drawer. Folder arrows still control filesystem contents; the drawer button controls knowledge sections.
• The selected resource is always expanded: when you select a resource its sections open automatically. Select another resource and the previous one collapses again — unless you had opened it by hand with the drawer button, in which case it stays open until you close it the same way.
• Subsections: appear nested under their section automatically, so you don't have to expand them one by one.
• Click to jump: clicking a section or subsection scrolls the central panel straight to that block. If the resource wasn't open, KaKeKiKoKu opens it first and then scrolls.
• Scroll-spy: as you scroll the central panel, the matching section is highlighted in the navigator so you always know where you are. At the very top of a resource (above the first section) nothing is highlighted.

Per window, not saved. Which resources have their sections open lives in the current browser tab only and is never written to disk — like the flag navigators, it's a working aid, not a setting. And, just like them, the section navigator never filters or hides the tree: it only adds rows and moves the selection.

Relationship arrows

When a resource is open in the central panel, KaKeKiKoKu can draw arrows between that resource's relationship rows and the corresponding resources, sections, or subsections in the navigation tree.

• Concrete arrows connect one visible relationship to one visible target. They can be selected and edited from the central workflow.
• Grouped or dotted arrows mean the exact target is hidden inside a collapsed folder, a closed section drawer, or a group of several relationships. Click the arrow to reveal the concrete target.
• The tree does not duplicate relationship text. Relationship descriptions live in the central panel; the tree shows where they go.
• Only the selected resource opens automatically. The tree doesn't fan open the resources a relationship points to; they stay closed until you open their drawer yourself. When an arrow's exact target sits inside a closed drawer, click the arrow to open it on demand.

Creating relationships from the tree. Every knowledge block in the tree carries a relationship port (a small circle). Drag from it to another resource, section, or subsection to create a relationship — including between two items in the tree, with no need to open either one in the central panel first. When you create a relationship purely within the tree, KaKeKiKoKu selects its origin (the block where the relationship is stored), so the central panel opens there and the new arrow settles into its normal place instead of floating in the tree. A light pop-up then lets you add a description, or skip it. The only thing you cannot do is relate a resource to itself.

Think of the arrows as a live map of the resource you are reading, not as a global graph of the entire project.

Project map mode

Project map mode turns the navigation panel into a wider read-only map. The central document area steps back so the tree can occupy more space, showing resources, sections, subsections, inline descriptions, and relationship arrows together.

Use it when you want to review the structure of the project, inspect relationships, or decide what to ask your AI to change. It is deliberately not a mass-editing mode.

• Read-only tree: drag-and-drop, relationship creation handles, flag toggles, and destructive context menu actions are disabled while the map is active.
• Inline descriptions: sections and subsections can show a short description or content preview next to their name, so you can scan the project without opening every block.
• Quick preview: double-click a resource, section, or subsection to open a read-only preview of that block. The preview can also show its incoming and outgoing relationships as text.
• AI-friendly review: because the map is read-only, it is a good place to inspect the project and then use Talk to AI or the chat to ask for a change.

The panel header

Above the tree sits a single row holding three things: the quick flag navigators (next), the four quick resource slots (chapter 5), and the button that toggles project map mode (described above).

Quick flag navigators

Three mini-navigators sit side by side in that header: important, draft and pending. Each one jumps between the resources carrying that flag, across all open projects at once.

Each mini-navigator shows:

• An icon identifying the flag (flag, pencil, clock — the same ones you see in the tree and breadcrumb).
• ◀ ▶ arrows to move to the previous or next item.
• An n/total counter: current position over the total of resources matching the flag.

Both the icon and the counter are clickable: they take you to the currently pointed item. Useful when you've drifted elsewhere in the tree and want to return to the match you were on. When a flag has zero resources, its mini-navigator dims and the buttons disable.

They don't filter the tree. The full tree stays visible — only the selection changes. It's pure navigation, not visual filtering.

Counters update instantly the moment you mark or unmark a flag from anywhere (context menu, breadcrumb, central panel). No need to wait for the next analysis.

Navigators don't persist between sessions: every KaKeKiKoKu launch starts fresh. They're a punctual aid while you're working, not a permanent setting.

Important — flags vs. issues. These navigators operate on flags you declare (important, draft, pending). Issues (drift, ghost, orphan, broken references, etc.) are a different thing: they're detected by sync and live in the right panel, with their own navigation. Don't mix the concepts.

Context menu (right click)

Right-clicking on any tree element shows a context menu. The options shown vary by resource type (file, folder, entity, ghost, project root), but all are selected from the same set of possible actions:

🤖 Talk to AI

Always the first option in the menu. Sends your AI a request to talk about that specific resource. The AI receives the complete context — you don't need to explain which file or folder you want to discuss.

Context management

• Create context: creates a sidecar for a file or folder that doesn't have one. This is how you start documenting a resource.
• Delete context: deletes only the sidecar of a resource. The project file is untouched — only the associated knowledge is removed.
• Delete file and context: deletes both the project file and its sidecar. Destructive operation with confirmation.
• Convert to entity: available for ghost sidecars. Transforms an orphaned sidecar into a standalone entity, preserving its content.
• Delete ghost: deletes a ghost sidecar you no longer need.
• Delete entity: deletes a standalone entity.

Create new resources

• New entity: creates a standalone entity within the selected folder.
• New Markdown document: creates an empty Markdown file together with its KaKeKiKoKu context. Use it when the information should exist as a real project file that you can open and edit as Markdown. KaKeKiKoKu opens the context after creation.
• New folder: creates a new folder with its sidecar already prepared.

Organization and classification

• Mark/unmark as important: important resources are sent to the AI automatically when opening the project. Use it for knowledge your AI should always have present.
• Mark/unmark as pending: flags resources that require attention or additional work.
• Exclude: adds the resource to the project's exclusion list. KaKeKiKoKu will ignore it completely — it won't appear in the index or be processed during sync. Ideal for folders like node_modules/ or bin/.
• Discard (untrack): the resource remains visible but KaKeKiKoKu won't ask for it to be documented. For files that don't need a sidecar, such as decorative images or licenses.
• Include: restores an excluded or discarded resource to normal tracking.

Exclude and Discard never delete context for you. If the resource still has a sidecar, the action remains available but KaKeKiKoKu shows a warning and changes nothing. Review or preserve the knowledge, use Delete context explicitly, and then apply the state you want. Folder exclusions are also rejected when any matching descendant still has context.

File and folder operations

• Move: moves a file or folder along with its sidecar. Relationships don't break thanks to the UUID system.
• Rename: renames the resource and its associated sidecar.
• Duplicate: copies a file, folder, or entity together with its context in one act. The copy is born with fresh internal identity, so its knowledge never collides with the original: relations inside the duplicated set follow the copy, outgoing relations keep their original targets, and incoming links from outside are not replicated. Name conflicts resolve with a numeric suffix; excluded folders are skipped and reported; the project root cannot be duplicated.
• Delete: deletes the resource from the project (with confirmation).
• Copy path: copies the resource's project-qualified path to the clipboard, for example MyProject\src\file.py. For the project root, it copies the project folder name.
• Copy absolute path: copies the resource's full path.
• Open in system: opens the file with your operating system's default application.
• Open in new tab: opens the resource in a new tab within KaKeKiKoKu.

“I thought KaKeKiKoKu never touched my files.” It doesn't — on its own. KaKeKiKoKu never creates, moves, or deletes a project file by its own initiative, and your AI cannot do it through KaKeKiKoKu at all. What you have in this menu are five operations where you explicitly ask for it from the interface: create a folder, create a Markdown document, duplicate, move or rename, and delete file with context. All five exist for one reason: in each of them the file and its knowledge must travel together, in a single act. Separating them is exactly what produces orphaned sidecars and duplicated identities — so KaKeKiKoKu does both halves or neither.

Previous versions

• Previous versions: shows a resource's previous versions, letting you restore both the file and its sidecar to a previous point. Restoration is always unified — file and sidecar together, never separately. Requires the backup system to be active.

Tree navigation

• Expand all / Collapse all: expands or collapses the entire branch from the selected point.
• Refresh: reloads the tree structure.

Remember: not all options appear for all resources. KaKeKiKoKu shows only the options that make sense for the type of resource you right-clicked. For example, "Convert to entity" only appears on ghost sidecars, and "Create context" only on resources that don't have a sidecar yet.

Search

At the bottom of the left panel, below the tree, there is a search bar. Type your query and press the magnifier button (or Enter) to run it; results appear right below the input, separated from the tree by an adjustable vertical splitter. Pressing the magnifier again re-runs the search — handy after you have changed something and want fresh results.

KaKeKiKoKu's search looks inside structured knowledge — not just file names, but descriptions, sections, and sidecar content — as well as the files' own text. If you have multiple projects open, results are grouped by project, each group with its corresponding accent color.

Each result shows the resource path, its description, and a snippet with the matched term highlighted. A small label tells you where the match is: in the resource's context (its .wuniq knowledge, with the section name), in the file's own content (with the line number), or just in its name. When a resource matches in several places, those matches are listed underneath it with a count.

Click a result to go there. A context match opens the resource and scrolls to the matching section; a Markdown or text file opens and jumps to the matching line; a source-code file simply opens so you can read it — working on the code itself is not what KaKeKiKoKu is about. Clicking a specific match listed under a result takes you straight to that one.

Changing the query text hides the current results until you search again, so you never see matches that no longer fit what you typed. When a search is active, a clear button (×) on the right of the input wipes the query and the results in one click.

The Web panel is designed for a human browsing results, so it is not restricted by the AI’s 30,000-character MCP response budget. It can return up to 500 results across all open projects (distributed fairly), or up to 500 occurrences when searching inside one resource. The first 100 are rendered immediately; use Show more to reveal further chunks without running the search again. If the 500-result ceiling is reached, KaKeKiKoKu tells you to refine the query rather than silently pretending the list is complete.

A search expression can contain up to 2,000 characters. A project selector and the resource path used by a resource-local search are routing information and do not count toward that expression limit.

Tip: you can also ask your AI to search for you using KaKeKiKoKu's search command. It's especially useful for complex searches or when you want the AI to act directly on the results.

Drag and drop

You can drag tree elements to move them between folders. KaKeKiKoKu takes care of moving both the project file and its sidecar, keeping relationships intact.

The tree also participates in knowledge-block moves. You can drag a section or subsection from the open resource into any resource in the tree, from the tree into the open resource, and — this is the new freedom — from one place in the tree to another, even when neither end is the resource you currently have open. In every case KaKeKiKoKu moves the knowledge block, not the project file, and relationships travel with it.

When you move a block purely within the tree (neither end is the open resource), KaKeKiKoKu follows the result: the moved block becomes the selection and the central panel opens its new home, scrolled to it — so you always see where the knowledge landed, the move is never blind. When the open resource is one of the two ends, the central panel stays put, because it is already showing what you are working on.

Drop a block back onto the exact spot it came from and nothing happens; drop it anywhere else and it moves. KaKeKiKoKu still blocks anything that would corrupt the graph — you cannot drop a section inside its own subsections, for instance.