Understanding the User Interface

Understanding the User Interface

This page describes TMI's user interface layout, navigation, and key features. It covers each major screen you encounter when using TMI: the navigation bar, dashboard, threat model editor, diagram editor, threat detail page, note editor, and user preferences.

Navigation Structure

Top Navigation Bar

Located at the top of every page:

• Home (logo button): Opens a navigation menu allowing you to navigate to any page you have access to, or to your home (landing) page, or to log out.
• Language Selector: Switches the interface language.
• Navigation Links (role-applicable links are visible when signed in):
  • Intake: Access security review intake surveys.
  • Triage: Triage incoming requests (visible only to users with the Security Reviewer role).
  • Dashboard: View and manage your threat models.
  • Admin: Access administration settings (visible only to users with the Admin role).
• Feedback Menu: Provide feedback, report a bug (copies the application log to your clipboard and opens a pre-filled GitHub issue), or request a feature.
• Server Connection Indicator: Displays whether the TMI backend server is connected, degraded, offline, or not configured. Click it to open the server URL when connected.
• WebSocket Indicator: Appears during an active Collaborative-Threat-Modeling on a diagram page. Shows real-time connection status.
• User Profile Button: Opens user preferences. Displays your display name and shows your email in a tooltip.
• Logout Button: Signs you out of TMI.

Dashboard

When you sign in to TMI, you land on the dashboard.

Threat Model List

The dashboard displays all threat models you own or have permission to access. Each entry shows the threat model's name, description, last modified date, status, status last changed date, and owner. Threat models with active Collaborative-Threat-Modeling are sorted to the top.

You can switch between two view modes:

• Card View (default): Displays threat models as cards with summary statistics including counts of assets, threats, diagrams, notes, documents, and source code repositories.
• List View: Displays threat models in a sortable table with columns for name, last modified, status, status last changed, owner, created date, and actions.

Click any threat model to open it for viewing or editing. Use the delete button to remove a threat model you own.

Dashboard Actions

• Toggle View Mode: Switches between card view and list view.
• Import: Imports a threat model from a JSON file (up to 10 MB).
• Create: Opens a dialog to create a new threat model with a name, description, framework, and confidentiality setting.

Search and Filters

The dashboard provides both client-side search and server-side filtering:

• Search: A local text search that filters the currently loaded threat models by name, description, owner, or status.
• Name Filter: Server-side filter by threat model name (partial match).
• Status Filter: Multi-select dropdown to filter by threat model status (Not Started, In Progress, Pending Review, Remediation Required, Remediation In Progress, Verification Pending, Approved, Rejected, Deferred, Closed).
• Advanced Filters (expandable): Description, owner, issue URI, created date range, modified date range, and status updated date range.
• Clear All Filters: Reset all filters and search text at once.

Filter and pagination state is reflected in the URL, so you can bookmark or share filtered views.

Collaboration Sessions on the Dashboard

When a threat model has one or more active Collaborative-Threat-Modeling, a collaboration indicator appears. In card view, session details are shown inline with the diagram name, host, start time, and active user count. In list view, click the collaboration indicator to expand the row and see session details. Click Join Session to participate in a session that is already in progress.

Threat Model View/Edit Page

Threat Model Details

At the top of the page, the threat model name is displayed along with a Timmy button that opens the Timmy-AI-Assistant chat for the current threat model. If you have read-only access, an indicator icon appears next to the title.

The Threat Model Details card contains:

• Name and Description: Editable text fields.
• Project: Associate the threat model with a project (editable via a project picker if you have write access).

The details card header provides the following action buttons:

• Manage Metadata: Opens a dialog to view or edit custom Metadata-and-Extensions key-value pairs.
• Actions Menu (kebab menu):
  • Export: Downloads the threat model as a portable JSON file.
  • Addons: Invokes registered Addon-System on the threat model (requires write access).
  • Report: Generates a PDF report of the threat model.
  • Audit Trail: Shows the audit trail of changes to the threat model.
  • Permissions: View or manage who has access (owner, reader, writer roles for users and groups).
• Close: Returns to the dashboard.

Review Process Panel

An expandable panel that displays and allows you to edit:

• Status: The review lifecycle status of the threat model (selectable from a dropdown).
• Status Last Updated: Auto-managed timestamp.
• Security Reviewer: The assigned security reviewer (selectable from a dropdown or user picker, depending on server configuration).
• Issue URI: A link to an external issue tracker for this engagement (supports drag-and-drop of URLs).
• Framework: The threat modeling framework in use (e.g., STRIDE, CIA).

Audit Panel

An expandable panel showing read-only audit information:

• ID: The threat model's unique identifier (with a copy-to-clipboard button).
• Last Modified: When the threat model was last changed.
• Created By: The user who created the threat model.
• Created: When the threat model was created.

Inputs Section

A collapsible section containing the assets, documents, and source code repositories that describe the system under analysis.

Assets

A table listing assets with columns for type icon, name, description, criticality, sensitivity, classification, and actions. Each asset has a type: data, hardware, software, infrastructure, service, or personnel. Actions include managing Metadata-and-Extensions, invoking Addon-System, viewing the audit trail, and deleting.

Documents

A table listing documents with columns for icon, name, description, hyperlink, and actions. Documents represent external references (URLs) to design documents, specifications, or other relevant materials. Supports drag-and-drop of URLs to create new document entries.

Repositories

A table listing source code repositories with columns for icon, name, description, hyperlink, and actions. Repositories can be of type git, svn, mercurial, or other, and can include branch/tag/commit references and sub-paths.

Outputs Section

A collapsible section containing notes, diagrams, and threats produced during security analysis.

Notes

A table listing notes with columns for icon, name, description, and actions. Click a note to open the full note editor page. Notes support Markdown content with Mermaid diagram rendering. See also Using-Notes-and-Documentation.

Diagrams

A table listing data flow diagrams with columns for icon, name, description, thumbnail preview, and actions. Click a diagram to open the diagram editor. See also Working-with-Data-Flow-Diagrams.

Threats

A table listing threats with columns for severity icon, severity, name, description, status, mitigated checkbox, issue hyperlink, and actions. You can filter threats by name, status, severity, mitigated state, threat type, and priority. The threats table supports sorting and pagination. See also Managing-Threats.

Diagram Editor

For a detailed guide on building diagrams, see Working-with-Data-Flow-Diagrams.

Layout

The diagram editor page consists of:

• Title Area: The page title, the parent threat model name, an editable diagram name, an editable diagram description, and an "Include in Report" checkbox.
• Collaboration Controls: Start, join, or leave a real-time Collaborative-Threat-Modeling.
• Toolbar: Buttons for adding components, editing, and managing the diagram.
• Canvas: The main drag-and-drop diagram workspace.
• Style Panel (toggleable): Customize colors and formatting for selected diagram cells.

Toolbar

The toolbar is organized into groups:

Component creation:

• Actor: Add an actor node (represents external entities or users).
• Process: Add a process node (represents processing components).
• Store: Add a data store node (represents data storage).
• Security Boundary: Add a security boundary (a dashed-border container for grouping components within a trust zone).
• Text Box: Add a free-form text annotation.
• Style Panel Toggle: Open or close the style/color formatting panel.

Editing:

• Cut: Cut selected cells to clipboard.
• Copy: Copy selected cells to clipboard.
• Paste: Paste cells from clipboard.
• Delete: Delete selected cells.

View and history:

• Undo: Undo the last action (Ctrl/Cmd + Z).
• Redo: Redo the last undone action (Cmd + Shift + Z on Mac, Ctrl + Y on Windows/Linux).
• Zoom to Fit: Fit all diagram content within the visible canvas area.

Collaboration:

• Start/Stop Collaboration Session: Host a real-time collaboration session on this diagram.
• Presenter Mode: Allow others to follow your view.

Diagram management:

• Save: Manually save the diagram (auto-save is also active).
• Export Menu: Export the diagram as SVG, PNG, or JPEG.
• Help: Open a help dialog showing animated demonstrations of pan and zoom gestures.
• Close: Return to the threat model page.

Data Flows

Data flows are the arrows that represent data movement between components. You create them by connecting ports on diagram nodes. Hover over a node to reveal its connection ports, then drag from a port to another node to create a data flow. Data flows are not added via the toolbar.

Right-Click Context Menu

Right-click on a cell in the diagram to access:

• Edit Text: Edit the cell's label text.
• Move Forward / Move Backward / Move to Front / Move to Back: Change the z-order (layering) of the selected cell.
• Add Inverse Connection (edges only): Create a data flow in the opposite direction.
• Data Assets (data flow components only): Associate data assets from the threat model with the selected component.
• Delete: Delete the selected cell.
• Add Threat (single data flow component only): Open the threat editor to create a new threat linked to the selected component.
• Show Object (developer tools only): Inspect the raw cell properties.

Mouse and Keyboard Controls

Action	Input
Select	Click a cell; drag to rubber-band select multiple cells
Move	Drag a selected cell
Resize	Drag the corner handles of a selected cell
Pan	Hold Shift and drag on the canvas background
Zoom	Hold Shift and scroll the mouse wheel
Delete	Press Delete or Backspace while cells are selected
Undo	Ctrl/Cmd + Z
Redo	Cmd + Shift + Z (Mac) or Ctrl + Y (Windows/Linux)
Context Menu	Right-click on a cell

Threat Detail Page

When you click a threat in the threats table (or navigate to a threat from the diagram editor), the threat detail page opens. For more on threat management workflows, see Managing-Threats. The page shows:

• Name: The threat name.
• Asset: The associated asset (selectable from a dropdown of assets in the threat model).
• Description: A detailed description of the threat.
• Threat Type: One or more threat categories from the selected framework (e.g., Spoofing, Tampering for STRIDE).
• CWE IDs: Common Weakness Enumeration identifiers, entered as chips (with a CWE picker dialog).
• Severity: Critical, High, Medium, Low, Informational, or Unknown.
• Score: A numeric risk score (0 to 10).
• Priority: Immediate, High, Medium, Low, or Deferred.
• CVSS Scores: One or more CVSS vectors and scores (with a built-in CVSS calculator dialog supporting CVSS 3.1 and 4.0).
• Issue URI: A link to an external issue tracker (supports drag-and-drop of URLs).
• Status: Open, Confirmed, Mitigation Planned, Mitigation In Progress, Verification Pending, Resolved, Accepted, False Positive, Deferred, or Closed.
• Mitigated: A checkbox indicating whether the threat has been mitigated.
• Include in Report: A checkbox controlling whether the threat appears in generated PDF reports.
• Mitigation: A text area describing mitigation strategies and controls.
• Diagram and Cell: Link the threat to a specific diagram and component cell within that diagram.
• Metadata: Custom key-value properties managed via a Metadata-and-Extensions dialog.

Note Editor Page

When you click a note in the notes table, the note editor page opens. For more on working with notes, see Using-Notes-and-Documentation. The page contains:

• Name and Description: Editable fields for the note title and a short description.
• Include in Report: A checkbox controlling whether the note appears in generated PDF reports.
• Markdown Editor: A text area for writing note content in Markdown format.
• Preview Mode: Toggle between editing and rendered preview. The preview renders Markdown with full support for Mermaid diagrams.
• Formatting Toolbar: Buttons for common Markdown operations (bold, italic, insert link, etc.).

Markdown Syntax

Common markdown elements:

# Heading 1

## Heading 2

### Heading 3

- Bullet list
- Another item

1. Numbered list
2. Second item

**Bold text**
_Italic text_
`Code text`

[Link text](https://example.com)

Mermaid diagrams can be embedded using fenced code blocks with the mermaid language identifier.

Collaboration Features

TMI supports real-time collaborative editing of data flow diagrams. For a complete guide, see Collaborative-Threat-Modeling.

Real-Time Diagram Collaboration

From the diagram editor:

• Start a Session: The diagram owner or any user with write access can start a collaboration session, making it visible to others on the dashboard.
• Join a Session: Other users can join an active session from the dashboard or by navigating to the diagram.
• Active Users: See the count of users currently in the session.
• Live Changes: Diagram changes made by any participant are synchronized in real time via WebSocket.
• Presenter Mode: The host can enable presenter mode so that participants follow the host's viewport.

Collaboration on the Dashboard

Active collaboration sessions are highlighted on the dashboard. Each session shows the diagram name, host user, session start time, and the number of active users. Click Join Session to participate.

User Preferences

Click your username in the navigation bar to open the User Preferences dialog, which has the following tabs:

Profile Tab

Displays your user profile information (read-only):

• Name: Your display name.
• Email: Your email address.
• Identity Provider: The authentication provider (e.g., Google, GitHub).
• Provider ID: Your unique identifier with the provider.
• Group Memberships: Groups you belong to.
• Current Threat Model Role: Your role (owner, writer, reader) for the currently open threat model, if any.
• Download Log: Download the application log as a JSONL file for troubleshooting.

Display Tab

• Theme: Choose Automatic (follows system setting), Light, or Dark mode.
• Color Blind Safe Palette: Enable a color palette optimized for color vision deficiency.
• Diagram Animation Effects: Toggle animations in the diagram editor.
• Show Cell Metadata on Hover: Show metadata tooltips when hovering over diagram cells.
• Dashboard List View: Default the dashboard to list/table view instead of card view.
• Show Developer Tools: Enable developer-oriented debugging tools in the diagram editor.

Reports Tab

• Preferred Page Size: US Letter or A4.
• Preferred Margin Size: Narrow, Standard, or Wide.

Credentials Tab

Available only to users with Admin or Security Reviewer roles. Manage client credentials for API access.

Keyboard Shortcuts

Diagram Editor

Shortcut	Action
Delete or Backspace	Delete selected cells
Ctrl/Cmd + Z	Undo
Cmd + Shift + Z (Mac) / Ctrl + Y (Windows/Linux)	Redo
Escape	Close dialog

Accessibility Features

TMI includes the following accessibility features:

• Keyboard Navigation: All interactive elements are keyboard-accessible with proper tab ordering.
• Screen Reader Support: ARIA labels and roles are applied throughout the application.
• Theme Support: Light, dark, and automatic (system-following) themes.
• Color Blind Safe Palette: An optional color palette designed for users with color vision deficiency.
• Zoom Support: The interface is fully compatible with browser zoom.

Tips for Efficient Use

Organization

• Use clear, consistent naming for threat models, diagrams, and notes.
• Add metadata to threat models, assets, threats, and other objects for structured tagging.
• Create separate diagrams for different subsystems or trust boundaries.
• Use notes with Markdown and Mermaid diagrams for detailed documentation.

Dashboard

• Use the search field to quickly find threat models by name, description, or owner.
• Use server-side filters (name, status, date ranges) for more precise results.
• Switch to list view for sortable columns when managing many threat models.
• Bookmark filtered dashboard URLs for quick access to specific views.

Collaboration

• Keep notes updated for collaborators.
• Use the collaboration session feature for real-time diagram editing with your team.
• Review the audit trail to see change history.
• Set appropriate permissions (owner, writer, reader) for team members and groups.

Next Steps

• Start Creating-Your-First-Threat-Model
• Learn about Working-with-Data-Flow-Diagrams
• Explore Collaborative-Threat-Modeling

Need Help?

• See Common-Issues for troubleshooting
• Check the FAQ for common questions
• Visit Getting-Help for support