7. The Web UI — Resource Editor

The central panel is where you view and edit the knowledge of your resources. It has two clearly differentiated parts: the path bar at the top, and the content viewer/editor below. Depending on what you open, the same area can show a KaKeKiKoKu context, a quick Markdown/text editor, a read-only source-code viewer, or extracted text from a document.

Path bar (breadcrumb)

The path bar shows the location of the selected resource as a series of clickable segments. If the path is very long, it's trimmed from the beginning (not the end) — you always see the most relevant part. Each segment has a tooltip with the full path up to that point.

What the path bar contains

It is laid out as two fixed rows, so the path never has to compete with the buttons. The first row is pure navigation — Back, Up one level, and the path itself. The second row is the resource's state and actions:

  • Path segments (first row): each folder in the path is a clickable link that takes you to that folder. You can double-click the project name to rename it directly from the bar — that changes the display name only, never the folder on disk.
  • Type badge: indicates whether the resource is a file, a folder, or an entity.
  • Character counter: shows the prose size of the context — what you have written, not counting relation lines — against the same fixed maximum for every folder context, file context, and entity: 52,000 characters. It turns yellow at the round 50,000-character warning threshold and red at the cap. The first time a resource crosses the warning, a notice suggests partitioning it into smaller resources connected with relations (you can dismiss it permanently). If you have a legacy resource above the cap, KaKeKiKoKu still opens it and only blocks edits that do not reduce its prose — so it can shrink gradually.
  • Relation counters: two compact chips next to the character counter track the resource's relations. The outgoing chip reads N/20: the number is how many outgoing relations the resource holds (20 is the ceiling), and the thin bar underneath is their shared character budget — lavish descriptions fill the bar faster, so you trade richness for quantity, like a spending meter. Whichever fills first, the number or the bar, blocks the next relation. The incoming chip simply counts how many other resources point at this one; being referenced has no cap, so it has no bar. Hover either chip for the details.
  • Action buttons:
    • 🤖 Talk to AI: sends the complete resource as context to your AI.
    • Important flag (flag icon): marks or unmarks the resource as important.
    • Pending flag (clock icon): marks or unmarks the resource as pending.
    • Draft flag (draft icon): marks or unmarks the resource as a draft.
    • Reload: reloads the resource content from disk.
    • Open in new window: opens the resource in a separate browser tab.
    • Open: opens the actual project file — the quick editor for Markdown and text, the read-only viewer for source code and documents. While a viewer is open the same button reads Context and takes you back to the context, so you can flip between the file and its knowledge without leaving the panel. It appears for any openable file type, even one with no context: being able to read a file shouldn't depend on having added context to it. For everything else — and for large or non-editable files — Open in system hands it to your operating system's default application.
    • Back (first row): returns to the resource you were viewing before. KaKeKiKoKu keeps a navigation history of the central panel only (independent from the browser's own history); it clears when you open, close, or switch projects. The tooltip names the destination.
    • Up one level (first row): navigates to the parent resource (containing folder).

When you open a real Markdown or text file, the character counter steps aside and the bar shows that file's size instead (in bytes, against its own 128 KiB limit). Context and file have different limits and different units; showing one while you edit the other would only mislead you.

Content viewer/editor

Below the path bar, the content of the selected resource is displayed. This is where you view and edit the context sections.

Central views

  • Context view: the normal KaKeKiKoKu view. You edit the resource description, sections, subsections, relationships, flags, and knowledge structure.
  • Markdown/text file editor: for real project files such as .md, .markdown, and .txt, KaKeKiKoKu can open a quick editor. Saving here edits the actual project file, not its context.
  • Source-code viewer: source files can be opened read-only with syntax highlighting. KaKeKiKoKu helps you inspect code, but it does not become a code editor.
  • Document text viewer: Word .docx, OpenDocument .odt, and PDF .pdf files can be opened as extracted plain text. This is read-only and intended for inspection, not for preserving the original layout.

Notices for the open resource

When Studio detects out-of-date context or pending relationship reviews for the resource you have open, a small notice appears above its content. It updates while you stay on that resource, including reviews requested by an AI through MCP or HTTP, and disappears when those issues are resolved. Your current edit stays open.

Choose Synchronization to open the issue panel. For relationship reviews, expand Consult and choose the connected resource or block to read it in the consult area. These actions only show information: they do not acknowledge out-of-date context or accept a review. The notice also appears in focus mode and when automatic opening of the right panel is switched off.

Description

The description (_description) appears at the top as editable text. It is a required field — no KaKeKiKoKu resource can be created without it. It has a maximum of 280 characters because it's the summary your AI sees in the project index before deciding whether it needs to load the full resource. That's why it must be concise and descriptive. Click on it to edit it directly — it's inline editing.

Image resources

When the open resource is an image file with a context (PNG, JPG/JPEG, WebP, GIF), the viewer shows the image as a preview at the very top of the panel, above the description. Below the preview, the rest of its context (description, sections, relations, backlinks) is displayed as in any other resource. This way you see what the image is and read its context together.

An image without a context does not display the preview here — it shows the standard card for a file without context so you can create one if you want to promote the image to a KaKeKiKoKu resource. Images embedded in another context's content with the ![alt](path) syntax are rendered there, not as standalone resources (see chapter 4 — Images and Markdown).

Sections

Each section of a context appears as a collapsible block with its name as the header. Sections can be:

  • Expanded/collapsed: click the chevron button to open or close the section.
  • Edited inline: click on a section's non-interactive text to open the block editor. Use Save to persist your changes or Cancel to discard them. Losing focus or clicking a neutral area does not save or close an active text editor.
  • Reordered or moved: hold a section's drag handle and release it on an insertion line to change its order or make it a subsection. You can also move blocks to another resource through the navigation panel. The insertion line shows the destination while the original space stays in place.
  • Real-time counter: while editing, you see a character counter (X/4,000) showing how much space remains.

Section content is rendered as Markdown, so headings, lists, tables, code blocks, links, and images all display formatted. Markdown images written as ![alt](path) appear inline next to the surrounding text — see chapter 4 (Images and Markdown) for how KaKeKiKoKu resolves and serves them safely.

Assisted block editor

When you edit a section or subsection, KaKeKiKoKu opens the block editor drawer. The top of the drawer displays a unified editing ribbon with the following tools:

  • Editor preference: choose assisted Markdown or plain text in Settings > Application. KaKeKiKoKu uses that preference when you open a section or subsection for editing. There is no mode switch inside the block. Both edit the same Markdown source; the description always uses a compact plain-text editor.
  • Formatting buttons: apply bold, italic, headings, lists, code, quotes, links, and images in the assisted Markdown editor. These buttons stay visible but disabled in plain-text editing and preview. For syntax examples, see the external Markdown Guide Basic Syntax.
  • Preview (eye icon): Renders a live preview of the Markdown content using KaKeKiKoKu's native renderer before saving.
  • Fullscreen (expand icon): Maximizes the block editor to fill the entire browser viewport (shortcut Ctrl+Shift+F) for distraction-free writing.
  • Save / Cancel: save with the button, Ctrl+Enter (Cmd+Enter on macOS keyboards), or numeric-keypad Enter. Cancel or Esc discards the block edit.

Navigation and actions that need to leave an edit attempt to save it first; a failed save keeps the edit open. One exception to the neutral-click rule is the block preview: clicking outside an open preview saves it and closes the editor after a short delay. The real-file editor has its own controls: Escape leaves fullscreen or preview without discarding the draft; use Cancel to discard that draft.

Does this change require reviewing related knowledge?

While you edit a description, section or subsection, Studio checks whether the draft changes connected knowledge. If it does, the question appears inside the editor with a second save button. You choose directly, with no question after saving:

  • Save, highlighted on the right, saves and requests review of related knowledge. The save shortcut uses this action too.
  • Just save, to its left, saves without requesting new reviews. Pending reviews in other resources are preserved.

An unchanged draft, a title-only change or a change outside connected scopes shows only Save. New content can require review too: adding text to a subsection may affect a relationship to its whole section or resource. Navigation and other actions that save an open editor use the main Save action.

View relations expands the complete list of incoming and outgoing relationships, with both block addresses and each relationship’s description. It includes connections on other sections and subsections so you can decide without remembering them. The list covers the whole resource; reviews still depend on which connected knowledge actually changed.

Other gestures that change connected knowledge, such as moving, pasting, renaming or deleting blocks, retain a dialog with Request review, Do not request and Cancel. Cancelling that dialog keeps the draft or leaves the operation unapplied. It differs from cancelling the block editor, which discards that edit. A structural confirmation and review choice share one dialog when both are needed.

An effective knowledge edit accepts the current neighboring knowledge for the block you edited and its containing section and resource. It does not accept untouched children or siblings. Editing only a title or relationship reason accepts nothing.

A successful save produces one notification. Just save confirms the save without issuing relationship-review warnings. When you request review, the same notification also summarizes the resources with reviews pending, which remain visible after restarting Studio. For a long list, it states how many more resources can be inspected in the synchronization panel.

If the knowledge was saved but some relationship maintenance failed, Studio reports the partial result and updates the editor's saved base. Do not repeat the operation; inspect the remaining failures. If the main save failed, your draft stays open.

Markdown image button

In Markdown editing mode, the image button inserts a basic image template:

![alt](image.png)

alt means alternative text: a short description of what the image shows. It is not the image height and it does not have to match the file name.

Replace image.png with the image source you want:

  • Project image: use a relative path such as local_test_image.png or images/diagram.webp. KaKeKiKoKu resolves it inside the current project and the image does not need its own context.
  • Internet image: use a full URL such as https://example.com/image.png. KaKeKiKoKu leaves remote URLs unchanged and the browser loads them directly.

If an image deserves its own explanation, relations, or AI-readable context, create a context for the image file. That makes it a KaKeKiKoKu image resource. A Markdown image is only an inline visual embedded in the text.

Subsections

Inside each section there can be subsections, which work the same way: collapsible, inline-editable, draggable. You can move subsections between parent sections, promote them to top-level sections, or move them to another resource.

KaKeKiKoKu keeps one subsection level. If a move would create a subsection inside a subsection, KaKeKiKoKu places it as a sibling under the appropriate parent instead. If a destination already has a block with the same name, KaKeKiKoKu adjusts the incoming name automatically.

Converting and integrating blocks

Two transformations are available only when dragging from the central panel to the central panel, within the open resource. Both ask for confirmation before saving. Ordinary moves do not require a transformation confirmation; they may still ask whether to request a review when connected content changes.

  • Convert a reserved section into a subsection: drag a reserved section such as _rules to a subsection insertion line inside another section. After confirmation, it becomes an ordinary subsection named rules: only the leading underscore is removed, and it loses its reserved role. Its text, title, and relationships travel with it. If it has subsections, they become additional subsections of the receiving section, alongside the converted block.
  • Integrate a section or subsection into another section's text: drag the block over the receiving section's text area, including its empty-content area. A highlighted area and an Integrate content at the end label distinguish this from the insertion line. After confirmation, the source text is appended at the end, with the original name as a heading. Its title and attributes, when present, are retained as text. The original block stops being an independent section or subsection. Its subsections become subsections of the receiver, preserving their content.

The confirmation explains the transformation and any transfer of subsections. Relationships travel with the content; references to the original block are redirected to the destination, and references to its children follow their new addresses. Duplicate child names are adjusted automatically. If the combined content or structure exceeds a limit, the operation is refused without changing the blocks.

These transformations are unavailable in the navigation panel or across panels. The required _description block cannot be converted or integrated. Use an insertion line when you want to keep a block independent; use the text area when you want to integrate its content. Cancel or press Esc in the confirmation to leave the resource unchanged.

Context menu

Right-clicking on the description, a section header, or a section's content shows a context menu. The first option is always:

  • 🤖 Talk to AI: sends your AI the resource and the specific section you right-clicked. The AI receives all the context it needs without you having to explain anything.

It also includes options to copy, cut, paste, and delete sections.

Relationships

If the resource has relationships with other resources, they appear under the blocks that own them:

  • Outgoing relationships: links this resource has to others. They appear as rows (chips) in the central panel; clicking one consults the other end (see below). When the target is a KaKeKiKoKu image (an image file with context), the row can display a thumbnail of the image instead of the generic link icon, so you recognize what it points to without opening it.
  • Incoming relationships (backlinks): other resources that point to this one. They are shown in the central panel too, but their meaning belongs to the resource where they originate.

Relationship text lives in the central panel, where you read and edit it. The navigation tree shows relationships with arrows and as shortcut rows that take you to the other end; those rows navigate, and the eye on the row (or Alt+click) consults the other end in the consult area described below.

Reading the other end: the consult area

Clicking a relationship chip does not navigate and does not edit: the whole chip is a button that opens the consult area, a read-only strip at the bottom of the central panel that shows the other end of the relationship while you stay in the resource you are editing. The rule is simple: the tree takes you there; the center shows you. Wherever you are, the other action is always one visible step away, with the same eye icon in both panels:

  • How to open it: click anywhere on an outgoing or incoming chip, or focus it with the keyboard and press Enter or Space. Consult is also the first item of the chip’s context menu, and it works on broken outgoing relationships too: the area then shows whether the target or only its block is missing. From the tree, use the eye on any row, Alt+click, or Consult in its menu (see chapter 6). Ctrl+click (or Cmd+click, or the middle mouse button) on the chip opens the other end in a new browser tab, and Navigate to target in the same menu is the direct way to go there. Only the pencil button on the chip edits the relationship.
  • Two parts of one document: the eye next to the robot in the header above the editor consults the resource you are editing. Use it to keep one part of a long document in view while you write in another. The header then says it is the resource you are editing, and Swap is hidden, because there is nothing to swap.
  • What it shows: always the whole resource, presented the way the central panel does it, without any editing control: the description first, then every block with its header (category icon, name in its color, title), its text, its own outgoing relationships as small chips, and its subsections, all visible. When you asked for a block — a relationship that points to a section, or a block row in the tree — the area opens scrolled to that block and marks it with a ring, so you read it in place with everything around it.
  • What you are reading: the header has two rows, one thing each. The first holds the area’s name and its buttons. The second says what is shown: when you arrived through a relationship, a strip names it in the declared direction (origin [block] → destination [block], the end you are reading in bold) with its description and, if it applies, a To review mark; otherwise, its path, with the block when there is one. The project is named at the start of that row only when it is not the one you are editing. When the area shows the very resource you are editing, the header says so.
  • Keep reading: chips inside the area and links in its text open the next reference inside the area. Back then appears in the header and returns to the previous step, exactly where you left it; point at it to see where it goes. Each new step fades in briefly, so you notice the change.
  • Size: the area sits under the editor instead of over it, so it never covers the text you are editing. Drag the divider between them to resize it: it keeps at least 120 pixels and never takes more than 70% of the central panel. Double-click the divider to restore the default height. The height is remembered in this browser.
  • Live update: when the consulted resource changes, the area reloads by itself and shows a short Updated mark. It shows what is saved, so a draft you are still writing in the editor appears there once you save it.
  • Swap: the Swap button moves the editor to the consulted resource and block, and the area then consults the resource you were editing. Like any other navigation it saves a pending draft first; if that fails or is cancelled, nothing changes.
  • Paired with the editor: the area belongs to the resource you are editing. If the editor goes to the consulted resource by any route (the tree, the path bar, quick slots, search, the browser’s back button, or a chip’s Navigate to target), the two swap and the Back history is cleared. If the editor goes to any other resource, the area closes. Moving to another block of the same resource changes nothing. Other screens of the application, such as settings or resource creation, hide the area and it returns as you left it; project map mode does not offer it.
  • Read only: the area does not edit the consulted resource, change relationships, or give conformity.

Press Escape to close it; focus returns to the element that opened it. The area takes the focus when it opens, and Escape still closes it after a click on plain text elsewhere, unless something else claims the key: while you edit a block, Escape cancels that edit first. Delete and Backspace do not reach the editor from there, and every other key works as usual. Links to other resources inside the Markdown text of a block in the editor still navigate.

Creating relationships

Each description, section, and subsection has a circular relationship port on its left side.

  • Click the port to open the precise relationship form. This is the slower path when you want to choose the target carefully. The form includes a 🤖 Suggest relationships with AI button that asks your AI to analyze the resource and suggest links with other project resources.
  • Drag from the port to the navigation tree to create a quick outgoing relationship from the open resource to another resource, section, or subsection.
  • Drag from another resource in the tree to a central block to create a relationship whose origin is that other resource and whose destination is the block you are viewing.

Quick arrow creation creates the relationship immediately, then opens a small description popup. You can write the description right away or leave it empty and fill it later. If the target does not have context yet, KaKeKiKoKu asks for a minimal description first so the relationship can be stored as a normal KaKeKiKoKu relationship.

These relationship ports also appear in the navigation tree, including on the branch of the resource you have selected. That lets you create relationships directly between two items in the tree, without opening either one in the central panel — the selection then follows to the relationship's origin so the new arrow appears in its normal place. See chapter 6 for details.

Editing and deleting relationships

A new relationship starts with both ends accepted. Changing its reason preserves any pending review; changing the addressed endpoint creates a new connection with its current knowledge accepted. To review an existing connection, use Relations to review in the sync panel. Opening the relationship or reading its contents does not give conformity.

Press the pencil button of a relationship chip, or click a concrete arrow, to select the relationship. The same relationship editor opens either way. For an incoming relationship, the pencil takes you to the resource that declares it, where it is edited.

  • Move an endpoint: when a concrete arrow is active, small diamond handles appear at its ends. Drag a handle to change that endpoint.
  • The central endpoint stays in the open resource: if you move the central end, it can only move between the description, sections, and subsections of the resource you are viewing.
  • The far endpoint moves in the tree: drag the other end to another resource, section, or subsection in the navigation panel.
  • Delete by gesture: dragging an endpoint into empty space asks for confirmation before deleting the relationship.

Incoming relationships are owned by the resource where they were created. If you need to edit their description or meaning, KaKeKiKoKu takes you to that origin resource. This keeps it clear where the knowledge is actually written.

KaKeKiKoKu blocks relationships inside the same resource and duplicate relationships between the same pair of blocks. It also blocks relationships that target the project's base folder (its root context): every resource already belongs to the root, so such a link adds no knowledge — the same reasoning as forbidding a relationship from a resource to itself. To surface a resource at project level, mark it as important instead. Relationships from the base folder to its resources are allowed, so you can still use the root context as a hand-written index. Empty descriptions are allowed, but they are visibly marked so you can complete them later.

Relationships are budgeted: descriptions hold up to 200 characters — enough for two full sentences, which is what a good link label needs — and each resource holds up to 20 outgoing relationships within a shared character budget (the chip in the path bar shows both at a glance). Whichever fills first, the count or the budget, blocks the new relationship: KaKeKiKoKu refuses it and tells you exactly why, so you can shorten a description, remove a link, or — usually the better move — split the resource into smaller connected ones. With many relationships, keep descriptions concise: twenty of them leave about 200 characters each on average, path included.

Opening project files

The central panel can also open real project files when that helps you inspect the work behind the context:

  • Markdown and text files: can open in a quick editor with save, cancel, preview, and fullscreen controls. Remember: this edits the project file itself, not its KaKeKiKoKu context.
  • Source code: opens as a read-only viewer with syntax highlighting and line numbers. Opening a search match scrolls to its line and highlights it, including when the file is already open.
  • Documents: Word .docx, OpenDocument .odt, and PDF .pdf files open as extracted plain text. Use this when you need to read or copy the content quickly; use the system application when layout, tables, or exact formatting matter.

If you need the full power of a specialized editor or application, use Open in system from the navigation panel.

Special states

The central panel also shows informational states when the selected resource has no context:

  • No context: indicates the file exists but has no context. Offers to create one.
  • Excluded: the resource is on the exclusion list. It will not be processed.
  • Untracked: the resource is visible but doesn't need context.
  • Ghost context: the context exists but the original file doesn't. Shows a banner with options to convert to entity or delete.

Important resources

When you open the project's root context — its cover page, in practice — everything you marked as important is listed at the bottom, below the sections, with a link to each one and a button to unmark it. It is the same list your AI receives on opening the project. Below it, See what the AI receives when opening this project opens the literal text your AI is handed before it does anything else, with the size of each part. The link is always there on the root context, even when nothing is marked as important.