UI Walkthrough

Afunana's web interface gives full access to analyzed source, generated documentation, dependency maps, the data dictionary, and the AI assistant. This guide walks through every major screen.

The screens are shown for IBM i. Oracle and plain SQL collections use the same interface.

The Navigation Model

Everything in Afunana is connected, and the UI is built to be traversed, not just read. A single thread runs through the whole application:

System → Program → Business Rule → Field

Start at the System Overview, click into a program, read a business rule with its clickable PROGRAM:LINE badge, jump to the exact source line, follow a field into its lineage across the estate, and land in another program -- all without losing your place. Every factual statement and every documented rule is a citation you can click. This is the knowledge graph made navigable.

Collection Dashboard

The home screen after selecting a collection. Summary statistics and quick navigation for the active collection.

• System name and purpose -- from the AI-generated system overview
• Program and file counts -- badges linking to the Programs and Files lists
• Program-type breakdown -- counts by language (COBOL, RPG, CL; PL/SQL for Oracle)
• Recently viewed -- programs and files with relative timestamps, to pick up where you left off
• Recent chat sessions -- resume previous conversations with the assistant
• Quick-nav links -- System Overview, Data Dictionary, Cross-Reference, Dependency Graph
• Build status and coverage -- current build state and documentation coverage

A collection switcher in the sidebar changes collections without logging out.

System Overview

A generated narrative describing the entire collection as an application -- not individual programs, but the system as a whole.

Header. System name, one-line description, and quick-nav badges to Programs, Files, Data Dictionary, and Cross-Reference.

Tabs:

Subsystem cards. A sidebar lists AI-identified subsystems. Clicking one shows its narrative and a member-programs table with business purposes; every program name links to Program Details.

The Notes tab is the risk view -- it surfaces the silent-failure findings (parameter mismatches, truncations, unhandled I/O) at the system level. See Code Quality Analysis.

Programs List

A searchable, filterable, sortable table of every analyzed program.

Search and Filtering

Four independent search boxes filter simultaneously:

If tags are defined, a row of colored tag pills appears below the search bar; clicking a tag filters the list.

Rows

Each row shows the program name with a color-coded type badge, a business-description preview, a pencil icon (opens the source in VS Code via the Afunana extension), and a relationships icon (popup with three columns: programs that call this one, programs it calls, and files it uses -- every name a clickable link). Clicking a row opens Program Details.

Program Details

The richest screen in the application: full AI-generated documentation for one program alongside its source.

Layout

Resizable split layout. Left: structured documentation. Right: source code, a flowchart, the file list, the called-programs list, or a field-lineage diagram, toggled from a toolbar. A third panel can open for side-by-side documentation and source.

Documentation Sections

A vertical sidebar of icon cards jumps to any section:

Tabs

Three documentation levels (Business Specification, Systems Analysis, Program Specification) as tabs -- the same structure at increasing depth.

Business Rules and Clickable Citations

Each business rule is a card carrying a clickable line badge (142-158). Clicking it scrolls and highlights the exact source lines in the code panel. This is the heart of the navigation model: the "why" of the code always has a one-click path back to the "what." See Program Documentation.

Flowcharts / Diagrams

Multiple diagram types render for the program: program flowchart, business-logic flowchart, data-flow diagram, sequence diagram, call-hierarchy diagram, and a code-flow tree. Nodes are clickable -- they scroll the code panel to the corresponding source lines.

Source Panel

Syntax-highlighted source with line numbers, section markers, and full-text search. A terminal-theme toggle (green-on-black 5250 style or a light editor theme) and virtualized scrolling for large programs. Clicking any citation elsewhere scrolls and highlights the matching lines here.

Program Chat

A chat button opens an inline AI assistant scoped to the current program, answering from that program's documentation and source. See Chat Capabilities.

Files List

Same layout as the Programs List, with five simultaneous filters:

Each row shows the file name with a type pill, a usage badge (how many programs reference it), and a business description. An expand toggle opens an inline field table -- name, type, length, decimals, COBOL name, description -- with key fields marked by a key icon.

SQL Members

Embedded-SQL and SQL-member documentation is listed and searchable in the same pattern, with generated descriptions and table references. On Oracle collections, PL/SQL packages, procedures, and functions surface here.

File Details

Full documentation for a single data file. Sidebar section cards: Summary, Fields, Programs, Impact.

Summary. AI-generated business description of the file.

Fields. Virtualized table of all fields:

Programs. Every program that uses this file, with access mode (READ/WRITE/UPDATE as colored badges) and business description.

Impact. The Change-Impact Report: a narrative of system-wide effects if this file's structure were modified (a build-time artifact). See Data Dictionary & Cross-Reference.

Field Lineage. From the field context menu, a side panel shows a flowchart of every program and file that references the selected field across the entire collection.

Data Dictionary

Three-level dictionary with full-text search:

• Field Catalog -- every unique field with AI descriptions, data type, length, and program/file references
• Table Documentation -- file-level view of all fields within one file, with relationships
• Application Groups -- logical groupings by business function

AI descriptions enable natural-language search across inconsistent naming. See Data Dictionary & Cross-Reference.

Cross-Reference

Matrix view: rows are programs, columns are files, cells show access type (read/write/update/delete). Filterable by program, file, access type, or library. Files and programs are ranked by impact count -- a file used by 40 programs ranks above one used by 3.

Data Lineage

Field-level lineage flowcharts tracing how data moves through the system. Select a field and see every program that reads it, transforms it, and writes it elsewhere -- a directed graph with programs as nodes and data flows as edges. Lineage follows fields across CALL boundaries, so tracing does not stop at a single program. See Data Dictionary & Cross-Reference.

Call Tree

Interactive hierarchical visualization of the whole collection's call structure.

Tree. The left panel shows root programs (never called by others) at the top. Expanding a node reveals called programs (recursively), files used with type badges, fields within each file, and the program's sections/paragraphs. Each node shows name, type badge, and a description tooltip; nodes referenced by multiple callers show a reference-count badge.

Search and navigation. A search box filters the tree; Expand All / Collapse All control the whole tree. Clicking a program name opens a split panel on the right showing documentation, source, flowcharts, call-hierarchy diagrams, file details, or field lineage. A third panel can open for side-by-side documentation and source.

Dependency Graph

A visual graph of program-to-program and program-to-file dependencies. Unlike the Call Tree (hierarchical call chains), the Dependency Graph shows the full network -- including file-mediated dependencies, where programs share data through common files without a direct call. Nodes are color-coded by type; edges are labeled with relationship type.

AI Chat

A floating chat panel is available from any page, plus a full-screen chat page. The panel exposes a mode toggle:

• Ask Mode -- read-only questions; answers stream in via SSE with clickable PROGRAM:LINE citations.
• Plan Mode -- structured change proposals, rendered as cards in the chat (programs to modify, code changes in the codebase's own style, files affected, compile order, testing scope, risk assessment).
• Agent Mode -- shown alongside Ask and Plan as a coming-soon option, currently disabled.

A file-attachment control accepts images, text, and CSV files for extra context, and a resizable session-history side panel (toggled from the header) lists past sessions for one-click reload. Change plans are the PLAN phase of the four-phase model; the default posture is to hand off to a developer, with an approval-gated execute step available to admins. For the retrieval pipeline, modes, and example queries, see Chat Capabilities.

Global Search

A command palette (Ctrl+K / Cmd+K) searches across programs, files, and fields at once. Results are grouped by category and ranked by relevance, with quick-access entries for System Overview, Data Dictionary, Cross-Reference, and other pages.

Downloads and Export

Bulk export for generating documentation packages.

Export jobs run asynchronously; large collections may take several minutes.

Tools and Generation

A Tools area collects productivity utilities. The one live wizard is Generate -- an on-demand generator for formal specification documents (Business Spec, Systems Analysis Document, Program Specs) delivered as DOCX or PDF; see Program Documentation. The broader Tools hub and app-generation surfaces are scaffolding for planned capabilities and are marked as such in the UI; they are not yet live features.

Admin Panel

Administrative screens for users with the admin role.

Configuration changes to models, connections, and check severities take effect live; changes to secret keys that note "restart required" in the UI are the exception.