@takimcizgisi/ajan 0.2.5

package/src/gui/css/style.css

@@ -0,0 +1,430 @@
+/* ─── RESET & BASE ─── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0 !important; }
+body {
+    background: #1a1a1a; color: #f8f9fa;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    height: 100vh; display: flex; flex-direction: column; overflow: hidden;
+    user-select: none;
+}
+a { text-decoration: none; color: inherit; }
+
+/* ─── LAYOUT ─── */
+#app { display: flex; flex-direction: row; height: 100vh; width: 100vw; }
+
+/* ─── SIDEBAR ─── */
+.sidebar {
+    width: 60px; background: #1a1a1a; border-right: 1px solid #ff751f;
+    display: flex; flex-direction: column; justify-content: space-between;
+    padding: 0; flex-shrink: 0; overflow: hidden; white-space: nowrap;
+    transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1); z-index: 1000;
+}
+.sidebar:hover { width: 220px; }
+
+.sidebar-brand {
+    height: 50px; display: flex; align-items: center; justify-content: center;
+    border-bottom: 1px solid #ff751f; position: relative; width: 100%;
+}
+.brand-small, .brand-large {
+    height: 36px; object-fit: contain; position: absolute;
+    left: 50%; top: 50%; transform: translate(-50%, -50%);
+    transition: opacity 0.15s ease;
+}
+.brand-small { opacity: 1; width: 36px; }
+.brand-large { opacity: 0; width: 100%; padding: 0 12px; }
+.sidebar:hover .brand-small { opacity: 0; pointer-events: none; }
+.sidebar:hover .brand-large { opacity: 1; }
+
+.sidebar-menu { display: flex; flex-direction: column; gap: 0; flex: 1; padding-top: 2px; }
+.sidebar-link {
+    display: flex; align-items: center; padding: 10px 20px; color: #8e8e93;
+    font-size: 0.9rem; transition: all 0.15s ease;
+    border-left: 3px solid transparent; cursor: pointer; gap: 14px;
+    min-height: 38px;
+}
+.sidebar-text { opacity: 0; transition: opacity 0.15s ease; white-space: nowrap; }
+.sidebar:hover .sidebar-text { opacity: 1; }
+.sidebar-link .icon { width: 1.2rem; height: 1.2rem; flex-shrink: 0; stroke: #ff751f; stroke-width: 2; fill: none; }
+.sidebar-link:hover .icon, .sidebar-link.active .icon { stroke: #ffffff; }
+.sidebar-link:hover { color: #ffffff; background: #222222; border-left-color: #ff751f; }
+.sidebar-link.active { color: #ffffff; background: #252525; border-left-color: #ff751f; font-weight: 600; }
+.sidebar-link-action { color: #ff751f; }
+.sidebar-link-action:hover { color: #ffffff; }
+
+.sidebar-divider {
+    height: 0; border-top: 1px solid #ff751f; margin: 4px 0;
+}
+
+.sidebar-sessions-header {
+    padding: 8px 20px 2px; color: #666; font-size: 0.7rem; text-transform: uppercase;
+    letter-spacing: 0.5px; white-space: nowrap; margin-top: 4px;
+}
+.sidebar-sessions {
+    flex: 1; overflow-y: auto; overflow-x: hidden; margin-top: 2px;
+    min-height: 0;
+}
+.sidebar-sessions::-webkit-scrollbar { width: 4px; }
+.sidebar-sessions::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
+.sidebar-session-item {
+    display: flex; align-items: center; gap: 10px; padding: 7px 20px;
+    color: #8e8e93; font-size: 0.85rem; cursor: pointer; white-space: nowrap;
+    border-left: 3px solid transparent; transition: all 0.15s ease; min-height: 32px;
+}
+.sidebar-session-item:hover { color: #ffffff; background: #222222; border-left-color: #ff751f; }
+.sidebar-session-item.active { color: #ffffff; background: #252525; border-left-color: #ff751f; }
+.sidebar-session-title-text {
+    overflow: hidden; text-overflow: ellipsis; flex: 1;
+}
+.sidebar-sessions-empty {
+    padding: 6px 20px; color: #555; font-size: 0.8rem; white-space: nowrap;
+}
+
+.sidebar-footer { padding: 0 10px; }
+.sidebar-version {
+    font-size: 0.65rem; color: #555; text-align: center; opacity: 0;
+    transition: opacity 0.15s ease;
+}
+.sidebar:hover .sidebar-version { opacity: 1; }
+
+/* ─── MAIN AREA ─── */
+#main-container {
+    flex: 1; height: 100%; display: flex; flex-direction: column;
+    background: #1a1a1a; overflow: hidden;
+}
+
+/* ─── WINDOW HEADER ─── */
+.window-header {
+    height: 50px; width: 100%; background: #1a1a1a; border-bottom: 1px solid #ff751f;
+    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
+    position: relative;
+}
+.header-drag-region {
+    position: absolute; inset: 0; -webkit-app-region: drag;
+}
+
+/* Header nav icons — solda hizalı */
+.header-nav-icons {
+    display: flex; gap: 0; z-index: 10; -webkit-app-region: no-drag;
+    padding-left: 4px;
+}
+.header-nav-btn {
+    width: 42px; height: 50px; background: transparent;
+    border: none; border-bottom: 1px solid transparent;
+    color: #8e8e93; cursor: pointer; display: flex; align-items: center;
+    justify-content: center; transition: color 0.15s, background 0.15s, border-color 0.15s;
+}
+.header-nav-btn:hover { color: #fff; background: #252525; border-bottom-color: #ff751f; }
+.header-nav-btn.active { color: #ff751f; border-bottom-color: #ff751f; }
+.header-btn-new-chat { color: #ff751f; }
+.header-btn-new-chat:hover { color: #fff; background: #252525; }
+
+/* Header controls — sağa hizalı */
+.header-controls {
+    display: flex; gap: 0; z-index: 10; -webkit-app-region: no-drag;
+}
+.header-btn {
+    width: 46px; height: 50px; background: transparent;
+    border: none; border-bottom: 1px solid #ff751f;
+    color: #8e8e93; cursor: pointer; display: flex; align-items: center;
+    justify-content: center; transition: color 0.15s, background 0.15s;
+}
+.header-btn:hover { background: #252525; color: #fff; }
+.header-btn-close:hover { background: #e81123; color: #fff; }
+
+/* Pencere büyüdüğünde maximize butonunu fade out ile gizle */
+body.is-maximized .header-btn-maximize {
+    opacity: 0; transform: translateX(20px); pointer-events: none;
+    width: 0; overflow: hidden; margin: 0; padding: 0;
+}
+.header-btn-maximize {
+    transition: opacity 0.45s ease, transform 0.45s ease, width 0.45s ease, margin 0.45s ease, padding 0.45s ease;
+}
+
+/* ─── CONTENT ─── */
+#main-content {
+    flex: 1; padding: 25px; display: flex; flex-direction: column;
+    overflow: hidden; align-items: center;
+}
+
+/* ─── SCROLLBAR ─── */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #666; }
+
+/* ─── CHAT ─── */
+.chat-container {
+    width: 100%; max-width: 750px; display: flex; flex-direction: column;
+    align-items: center; flex: 1; overflow: hidden;
+}
+.chat-logo {
+    height: 65px; width: auto; object-fit: contain;
+    filter: drop-shadow(0 0 1px rgba(255, 117, 31, 0.3));
+    pointer-events: none; margin-bottom: 16px; flex-shrink: 0;
+}
+.chat-logs {
+    width: 100%; flex: 1; overflow-y: auto;
+    padding: 0 8px; margin-bottom: 12px;
+}
+.chat-input-wrap { width: 100%; flex-shrink: 0; }
+
+/* Boş durumda logo + yazma alanı ortada dursun */
+.chat-container.chat-empty {
+    justify-content: center;
+    padding-bottom: 8vh;
+}
+.chat-container.chat-empty .chat-logo {
+    margin-bottom: 24px;
+}
+.chat-container.chat-empty .chat-logs {
+    flex: 0 0 auto;
+    display: none;
+}
+.chat-form {
+    background: #1a1a1a; border: 1px solid #ff751f; border-radius: 30px;
+    display: flex; align-items: center; padding: 8px 14px; height: 54px;
+    transition: background 0.2s ease;
+}
+.chat-form:focus-within { background: #222222; }
+.chat-input {
+    flex: 1; background: transparent; border: none; outline: none;
+    color: #fff; font-size: 0.95rem; font-family: inherit;
+}
+.chat-input::placeholder { color: #666; }
+.chat-send-btn {
+    background: #ff751f; color: #1a1a1a; border: none;
+    width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0; transition: transform 0.2s, background 0.2s;
+}
+.chat-send-btn:hover { background: #ff8533; transform: scale(1.05); }
+.chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+.chat-send-btn svg { width: 1.1rem; height: 1.1rem; stroke-width: 2.5; }
+.chat-stop-btn {
+    background: #b3341f; color: #fff; border: none;
+    width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0; margin-left: 8px; transition: transform 0.2s, background 0.2s;
+}
+.chat-stop-btn:hover { background: #d0442c; transform: scale(1.05); }
+.chat-stop-btn svg { width: 1.1rem; height: 1.1rem; }
+
+.load-progress-bar {
+    display: flex; align-items: center; gap: 10px; width: 100%;
+    padding: 6px 12px; margin-bottom: 8px; background: #222; border: 1px solid #333;
+    font-size: 0.75rem; color: #ff751f;
+}
+.load-progress-fill {
+    height: 4px; background: #ff751f; transition: width 0.2s;
+    border-radius: 2px; max-width: 100%;
+}
+.load-progress-bar span { white-space: nowrap; }
+
+.model-select-row {
+    display: flex; justify-content: flex-end; width: 100%; margin-top: 8px;
+    padding: 0 8px; opacity: 0.85;
+}
+.model-select {
+    background: transparent; color: #8e8e93; border: none;
+    font-size: 0.75rem; cursor: pointer; outline: none;
+    padding: 2px 5px; transition: color 0.2s; text-align-last: right;
+}
+.model-select:hover, .model-select:focus { color: #ff751f; }
+.model-select option { background: #1a1a1a; color: #fff; }
+
+/* ─── MESSAGES ─── */
+.msg { display: flex; width: 100%; margin-bottom: 12px; }
+.msg-user { justify-content: flex-end; }
+.msg-ai { justify-content: flex-start; }
+.msg-bubble {
+    max-width: 80%; padding: 12px 16px; font-size: 0.95rem;
+    white-space: pre-wrap; line-height: 1.5;
+}
+.msg-user .msg-bubble {
+    background: #222222; border-right: 3px solid #ff751f; color: #f8f9fa;
+}
+.msg-ai .msg-bubble {
+    background: #1a1a1a; border-left: 3px solid #00e5ff; color: #f8f9fa;
+}
+.msg-label {
+    font-size: 0.7rem; display: block; margin-bottom: 4px;
+    letter-spacing: 0.5px; opacity: 0.7;
+}
+.msg-user .msg-label { color: #888; }
+.msg-ai .msg-label { color: #00e5ff; }
+
+/* ─── THINKING / TOOL ─── */
+.msg-think { justify-content: center; }
+.msg-think .msg-bubble {
+    background: #1a1a1a; border-left: 3px solid #666; color: #888;
+    font-size: 0.85rem; font-style: italic;
+}
+.msg-tool { justify-content: center; }
+.msg-tool .msg-bubble {
+    background: #1a1a1a; border-left: 3px solid #ff751f; color: #ccc;
+    font-size: 0.8rem; font-family: 'Consolas', 'Courier New', monospace;
+    max-width: 90%; overflow-x: auto;
+}
+.tool-status { color: #ff751f; font-weight: 600; margin-bottom: 4px; }
+.tool-status.ok { color: #4caf50; }
+.tool-status.err { color: #f44336; }
+.tool-output { opacity: 0.8; max-height: 200px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; }
+
+/* ─── TYPING INDICATOR ─── */
+.typing-indicator {
+    display: flex; justify-content: flex-start; width: 100%; margin-bottom: 12px;
+}
+.typing-bubble {
+    background: #1a1a1a; border-left: 3px solid #666; color: #888;
+    padding: 12px 16px; display: flex; align-items: center; gap: 8px;
+}
+.spinner {
+    width: 14px; height: 14px; border: 2px solid #555; border-top-color: #ff751f;
+    border-radius: 50%; animation: spin 0.8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ─── STEP BAR ─── */
+.step-bar {
+    width: 100%; max-width: 750px; margin-bottom: 8px;
+    display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: #666;
+}
+.step-progress {
+    flex: 1; height: 3px; background: #333; border-radius: 2px; overflow: hidden;
+}
+.step-fill {
+    height: 100%; background: #ff751f; transition: width 0.3s ease;
+}
+
+/* ─── SETTINGS ─── */
+.settings-page { width: 100%; max-width: 700px; }
+.settings-title { font-size: 1.3rem; font-weight: 600; color: #ff751f; margin-bottom: 24px; }
+.settings-section { margin-bottom: 24px; }
+.settings-section-title { font-size: 0.85rem; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; border-bottom: 1px solid #333; padding-bottom: 6px; }
+.settings-row {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 10px 0; border-bottom: 1px solid #252525;
+}
+.settings-row:last-child { border-bottom: none; }
+.settings-label { color: #ccc; font-size: 0.9rem; }
+.settings-hint { color: #666; font-size: 0.75rem; margin-top: 2px; }
+.settings-input {
+    background: #1a1a1a; border: 1px solid #444; color: #fff;
+    padding: 6px 12px; font-size: 0.9rem; width: 180px; outline: none;
+    transition: border-color 0.2s;
+}
+.settings-input:focus { border-color: #ff751f; }
+.settings-select {
+    background: #1a1a1a; border: 1px solid #444; color: #fff;
+    padding: 6px 12px; font-size: 0.9rem; outline: none; cursor: pointer;
+}
+.settings-btn {
+    background: #ff751f; color: #1a1a1a; border: none; padding: 8px 20px;
+    font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.2s;
+}
+.settings-btn:hover { background: #ff8533; }
+.settings-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.settings-btn-outline {
+    background: transparent; color: #ff751f; border: 1px solid #ff751f;
+    padding: 6px 16px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s;
+}
+.settings-btn-outline:hover { background: #ff751f; color: #1a1a1a; }
+.settings-btn-danger {
+    background: transparent; color: #f44336; border: 1px solid #f44336;
+    padding: 6px 16px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s;
+}
+.settings-btn-danger:hover { background: #f44336; color: #fff; }
+
+/* ─── DOWNLOADS ─── */
+.downloads-page { width: 100%; max-width: 700px; }
+.downloads-title { font-size: 1.3rem; font-weight: 600; color: #ff751f; margin-bottom: 24px; }
+.model-card {
+    background: #1a1a1a; border: 1px solid #333; padding: 16px 20px;
+    margin-bottom: 12px; transition: border-color 0.2s;
+}
+.model-card:hover { border-color: #ff751f; }
+.model-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
+.model-card-name { color: #fff; font-size: 1rem; font-weight: 600; }
+.model-card-status { font-size: 0.75rem; padding: 2px 8px; }
+.model-card-status.installed { color: #4caf50; border: 1px solid #4caf50; }
+.model-card-status.missing { color: #888; border: 1px solid #555; }
+.model-card-active { color: #ff751f; border: 1px solid #ff751f; }
+.model-card-desc { color: #888; font-size: 0.85rem; margin-bottom: 8px; }
+.model-card-meta { color: #666; font-size: 0.75rem; display: flex; gap: 16px; }
+.model-card-actions { margin-top: 10px; display: flex; gap: 8px; }
+.model-card-actions button { font-size: 0.8rem; padding: 5px 14px; }
+.model-download-progress { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.72rem; color: #ff751f; }
+.model-dl-bar { flex: 1; height: 6px; background: #222; border-radius: 3px; overflow: hidden; }
+.model-dl-bar > div { height: 100%; background: #ff751f; transition: width 0.2s; }
+
+/* ─── PROJECTS ─── */
+.projects-page { width: 100%; max-width: 700px; }
+.projects-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 12px; }
+.projects-actions { display: flex; gap: 8px; }
+.projects-list { width: 100%; }
+.project-card {
+    background: #1a1a1a; border: 1px solid #333; padding: 14px 18px;
+    margin-bottom: 12px; transition: border-color 0.2s;
+}
+.project-card:hover { border-color: #555; }
+.project-card-active { border-color: #ff751f; }
+.project-card-body { display: flex; align-items: center; gap: 14px; }
+.project-card-icon { font-size: 1.4rem; opacity: 0.8; }
+.project-card-info { flex: 1; min-width: 0; }
+.project-card-name { color: #fff; font-size: 0.95rem; font-weight: 600; margin-bottom: 2px; }
+.project-card-path { color: #666; font-size: 0.78rem; word-break: break-all; }
+.project-card-status {
+    font-size: 0.72rem; padding: 2px 8px; color: #888; border: 1px solid #555; white-space: nowrap;
+}
+.project-card-active .project-card-status { color: #ff751f; border-color: #ff751f; }
+.project-card-actions { margin-top: 10px; display: flex; gap: 8px; }
+.project-card-actions button { font-size: 0.8rem; padding: 5px 14px; }
+
+/* ─── EMPTY STATE ─── */
+.empty-state {
+    display: flex; flex-direction: column; align-items: center;
+    justify-content: center; flex: 1; color: #555; gap: 8px;
+}
+.empty-state-icon { font-size: 2rem; opacity: 0.3; }
+.empty-state-text { font-size: 0.9rem; }
+
+/* ─── TOAST ─── */
+.toast {
+    position: fixed; bottom: 24px; right: 24px; background: #333;
+    color: #fff; padding: 10px 20px; font-size: 0.85rem; z-index: 9999;
+    opacity: 0; transform: translateY(10px); transition: all 0.3s;
+    pointer-events: none;
+}
+.toast.show { opacity: 1; transform: translateY(0); }
+.toast.error { border-left: 3px solid #f44336; }
+.toast.success { border-left: 3px solid #4caf50; }
+
+/* ─── ABOUT ─── */
+.about-page { width: 100%; max-width: 560px; }
+.about-card {
+    background: #1a1a1a; border: 1px solid #333; padding: 32px 36px;
+    display: flex; flex-direction: column; align-items: center; text-align: center;
+}
+.about-logo { height: 72px; width: auto; object-fit: contain; margin-bottom: 12px; }
+.about-title { font-size: 1.5rem; font-weight: 600; color: #ff751f; margin-bottom: 2px; }
+.about-version { font-size: 0.8rem; color: #666; margin-bottom: 16px; }
+.about-desc { color: #bbb; font-size: 0.9rem; line-height: 1.6; margin-bottom: 20px; }
+.about-section { width: 100%; text-align: left; margin-bottom: 20px; }
+.about-section-title {
+    font-size: 0.85rem; color: #888; text-transform: uppercase;
+    letter-spacing: 1px; margin-bottom: 8px; border-bottom: 1px solid #333; padding-bottom: 6px;
+}
+.about-list { list-style: none; }
+.about-list li {
+    color: #ccc; font-size: 0.88rem; padding: 5px 0 5px 18px; position: relative;
+}
+.about-list li::before {
+    content: "•"; position: absolute; left: 0; color: #ff751f; font-weight: 700;
+}
+.about-meta { width: 100%; text-align: left; }
+.about-row {
+    display: flex; justify-content: space-between; gap: 12px;
+    padding: 8px 0; border-bottom: 1px solid #252525; font-size: 0.85rem;
+}
+.about-row:last-child { border-bottom: none; }
+.about-meta-label { color: #888; }
+.about-code { color: #ff751f; font-family: 'Consolas', 'Courier New', monospace; font-size: 0.8rem; }

package/src/gui/html/chat.html

@@ -0,0 +1,34 @@
+<div class="chat-container">
+    <img src="../assets/image/ajan.png" alt="AJAN" class="chat-logo" id="chat-logo">
+
+    <div class="load-progress-bar" id="load-progress-bar" style="display:none">
+        <div class="load-progress-fill" id="load-progress-fill" style="width:0%"></div>
+        <span id="load-progress-text"></span>
+    </div>
+
+    <div class="step-bar" id="step-bar" style="display:none">
+        <span id="step-text">Adım 0/0</span>
+        <div class="step-progress"><div class="step-fill" id="step-fill" style="width:0%"></div></div>
+    </div>
+
+    <div id="chat-logs" class="chat-logs"></div>
+
+    <div class="chat-input-wrap">
+        <div class="chat-form">
+            <input type="text" id="chat-input" class="chat-input"
+                   placeholder="Yapay zekaya talimat verin..." autofocus autocomplete="off">
+            <button class="chat-send-btn" id="chat-send-btn">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4z"/><path d="M22 2 11 13"/></svg>
+            </button>
+            <button class="chat-stop-btn" id="chat-stop-btn" title="Durdur" style="display:none">
+                <svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>
+            </button>
+        </div>
+
+        <div class="model-select-row">
+            <select id="model-select" class="model-select">
+                <option value="" disabled selected>Model yükleniyor...</option>
+            </select>
+        </div>
+    </div>
+</div>

package/src/gui/html/downloads.html

@@ -0,0 +1,11 @@
+<div class="downloads-page">
+    <div class="projects-header">
+        <span class="settings-title">İndirmeler</span>
+        <div class="projects-actions">
+            <button class="settings-btn-outline" id="btn-refresh-models">Yenile</button>
+        </div>
+    </div>
+    <div id="models-list">
+        <div class="empty-state"><div class="spinner"></div><div class="empty-state-text">Modeller yükleniyor...</div></div>
+    </div>
+</div>

package/src/gui/html/hakkinda.html

@@ -0,0 +1,26 @@
+<div class="about-page">
+    <div class="about-card">
+        <img src="../assets/image/ajan.png" alt="AJAN" class="about-logo">
+        <div class="about-title">AJAN AI</div>
+        <div class="about-version" id="about-version">v0.0.0</div>
+        <div class="about-desc">
+            Otonom yerel kodlama yapay zekâ asistanı. Gemma 4 E2B + node-llama-cpp üzerinde,
+            tamamen yerel ve kişisel verilerinizi cihazınızdan çıkarmadan çalışır.
+        </div>
+        <div class="about-section">
+            <div class="about-section-title">Özellikler</div>
+            <ul class="about-list">
+                <li>Tamamen yerel çalışma (internet gerektirmez)</li>
+                <li>Dosya oluşturma / düzenleme araçları</li>
+                <li>Terminal komutu çalıştırma</li>
+                <li>Proje bağlamı ve kalıcı hafıza</li>
+            </ul>
+        </div>
+        <div class="about-meta">
+            <div class="about-row"><span class="about-meta-label">Geliştirici</span><span>TakımÇizgisi Yazılım Geliştirme Grubu</span></div>
+            <div class="about-row"><span class="about-meta-label">Lisans</span><span>Apache-2.0</span></div>
+            <div class="about-row"><span class="about-meta-label">Depo</span><span class="about-code">github.com/takimcizgisi/ajan</span></div>
+            <div class="about-row"><span class="about-meta-label">Motor</span><span class="about-code">node-llama-cpp</span></div>
+        </div>
+    </div>
+</div>

package/src/gui/html/index.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="tr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' blob:; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:;">
+    <title id="page-title">AJAN AI</title>
+    <link rel="stylesheet" href="../css/style.css">
+</head>
+<body>
+    <div id="app">
+        <aside class="sidebar" id="sidebar">
+            <div>
+                <div class="sidebar-brand">
+                    <img src="../assets/image/ajan.png" class="brand-small" alt="A">
+                    <img src="../assets/image/ajan.png" class="brand-large" alt="AJAN AI">
+                </div>
+                <nav class="sidebar-menu">
+                    <a href="#" data-action="new-project" class="sidebar-link sidebar-link-action">
+                        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+                        <span class="sidebar-text">Yeni Proje</span>
+                    </a>
+                    <a href="#" data-page="projects" class="sidebar-link">
+                        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+                        <span class="sidebar-text">Projeler</span>
+                    </a>
+                    <div class="sidebar-divider"></div>
+                    <div class="sidebar-sessions-header">
+                        <span class="sidebar-text">Oturumlar</span>
+                    </div>
+                    <div class="sidebar-sessions" id="sidebar-sessions"></div>
+                </nav>
+            </div>
+            <div class="sidebar-footer">
+                <div class="sidebar-version" id="version-info">v0.2.1</div>
+            </div>
+        </aside>
+
+        <main id="main-container">
+            <div class="window-header" id="window-header">
+                <div class="header-drag-region"></div>
+                <div class="header-nav-icons">
+                    <button class="header-nav-btn header-btn-new-chat" id="header-new-chat" title="Yeni Sohbet">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+                    </button>
+                    <button class="header-nav-btn" data-page="chat" title="Sohbetler">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4z"/><path d="M22 2 11 13"/></svg>
+                    </button>
+                    <button class="header-nav-btn" data-page="downloads" title="İndirmeler">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" x2="3" y1="12" y2="12"/></svg>
+                    </button>
+                    <button class="header-nav-btn" data-page="settings" title="Ayarlar">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
+                    </button>
+                    <button class="header-nav-btn" data-page="hakkinda" title="Hakkında">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+                    </button>
+                </div>
+                <div class="header-controls">
+                    <button class="header-btn" id="btn-minimize" title="Küçült">
+                        <svg width="12" height="12" viewBox="0 0 12 12"><rect y="5" width="12" height="1.5" fill="currentColor"/></svg>
+                    </button>
+                    <button class="header-btn header-btn-maximize" id="btn-maximize" title="Büyüt">
+                        <svg width="12" height="12" viewBox="0 0 12 12"><rect x="1" y="1" width="10" height="10" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
+                    </button>
+                    <button class="header-btn header-btn-close" id="btn-close" title="Kapat">
+                        <svg width="12" height="12" viewBox="0 0 12 12"><line x1="1" y1="1" x2="11" y2="11" stroke="currentColor" stroke-width="1.5"/><line x1="11" y1="1" x2="1" y2="11" stroke="currentColor" stroke-width="1.5"/></svg>
+                    </button>
+                </div>
+            </div>
+            <div id="main-content"></div>
+        </main>
+    </div>
+
+    <script src="../js/app.js"></script>
+    <script src="../js/chat.js"></script>
+    <script src="../js/downloads.js"></script>
+    <script src="../js/projects.js"></script>
+    <script src="../js/settings.js"></script>
+    <script src="../js/hakkinda.js"></script>
+</body>
+</html>

package/src/gui/html/projects.html

@@ -0,0 +1,12 @@
+<div class="projects-page">
+    <div class="projects-header">
+        <span class="settings-title">Projeler</span>
+        <div class="projects-actions">
+            <button class="settings-btn" id="btn-add-project">+ Yeni Proje</button>
+            <button class="settings-btn-outline" id="btn-refresh-projects">Yenile</button>
+        </div>
+    </div>
+    <div id="projects-list" class="projects-list">
+        <div class="empty-state"><div class="spinner"></div><div class="empty-state-text">Projeler yükleniyor...</div></div>
+    </div>
+</div>

package/src/gui/html/settings.html

@@ -0,0 +1,4 @@
+<div class="settings-page">
+    <div class="settings-title">Ayarlar</div>
+    <div class="empty-state"><div class="spinner"></div><div class="empty-state-text">Ayarlar yükleniyor...</div></div>
+</div>